Skip to content

Commit ded7dbd

Browse files
codebytescodebytes
authored
Merge pull request #181 from codebytes/copilot/fix-180
✨ Add comprehensive GitHub Copilot instructions
2 parents 5f1763d + 39563c9 commit ded7dbd

File tree

1 file changed

+168
-0
lines changed

1 file changed

+168
-0
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# GitHub Copilot Instructions for Testing with Playwright
2+
3+
## Repository Overview
4+
5+
This repository demonstrates Playwright testing best practices through a React Todo application. It serves as an educational resource for learning end-to-end testing with Playwright, featuring comprehensive test examples, CI/CD integration, and presentation materials.
6+
7+
## Project Structure
8+
9+
```
10+
├── src/ # React Todo application source code
11+
├── tests/ # Playwright test files
12+
├── slides/ # Presentation materials
13+
├── .github/ # GitHub workflows and configurations
14+
├── .devcontainer/ # Development container configurations
15+
└── public/ # Static assets
16+
```
17+
18+
## Technology Stack
19+
20+
- **Frontend**: React 19 + TypeScript + Vite
21+
- **Testing**: Playwright with TypeScript
22+
- **Styling**: CSS with modern features
23+
- **Build Tool**: Vite
24+
- **Linting**: ESLint with TypeScript support
25+
- **Package Manager**: npm
26+
27+
## Code Standards and Conventions
28+
29+
### TypeScript/React Conventions
30+
- Use TypeScript strict mode for all code
31+
- Define explicit interfaces for data structures (see `Todo` interface in App.tsx)
32+
- Use functional components with hooks
33+
- Prefer `const` for variables and arrow functions
34+
- Use meaningful variable and function names
35+
- Keep components focused and single-responsibility
36+
37+
### File Organization
38+
- React components in `src/` directory
39+
- Test files use `.spec.ts` extension in `tests/` directory
40+
- Use kebab-case for test file names (e.g., `todo-app.spec.ts`)
41+
- Group related tests using `test.describe()` blocks
42+
43+
### Playwright Testing Patterns
44+
45+
#### Test Structure
46+
- Use descriptive test names that explain the behavior being tested
47+
- Group tests logically with `test.describe()` blocks
48+
- Use `test.beforeEach()` for common setup (navigation, etc.)
49+
- Follow AAA pattern: Arrange, Act, Assert
50+
51+
#### Locator Strategies
52+
- Prefer semantic locators when possible: `page.getByRole()`, `page.getByPlaceholder()`
53+
- Use CSS selectors for specific UI elements: `.todo-list li`, `input[type="text"]`
54+
- Use data-testid attributes for complex elements when needed
55+
- Chain locators for precision: `page.locator('.todo-list li').first().locator('button')`
56+
57+
#### Common Patterns
58+
```typescript
59+
// Navigation setup
60+
test.beforeEach(async ({ page }) => {
61+
await page.goto('/');
62+
});
63+
64+
// Locator patterns
65+
const inputField = page.locator('input[type="text"]');
66+
const todoItems = page.locator('.todo-list li');
67+
const checkboxes = page.locator('.todo-list li input[type="checkbox"]');
68+
69+
// Assertions
70+
await expect(todoItems).toHaveCount(2);
71+
await expect(todoItems.first()).toContainText('expected text');
72+
await expect(inputField).toHaveValue('');
73+
```
74+
75+
#### Test Data
76+
- Define test data constants at the top of test files
77+
- Use meaningful, realistic test data
78+
- Use arrays for multiple test items: `const TODO_ITEMS = ['item1', 'item2']`
79+
80+
### Error Handling and Edge Cases
81+
- Always test both happy path and edge cases
82+
- Test empty inputs, whitespace-only inputs
83+
- Verify state persistence across page reloads
84+
- Test interaction sequences (add, toggle, delete)
85+
86+
## Development Workflow
87+
88+
### Available Scripts
89+
- `npm run dev` - Start development server
90+
- `npm run build` - Build for production
91+
- `npm run lint` - Run ESLint
92+
- `npm run test` - Run Playwright tests
93+
- `npm run test:ui` - Run tests with UI mode
94+
- `npm run test:debug` - Debug tests
95+
- `npm run test:chromium` - Run tests on Chromium only
96+
97+
### Testing Commands
98+
- Always run tests before committing changes
99+
- Use UI mode (`npm run test:ui`) for interactive test development
100+
- Use debug mode for troubleshooting failing tests
101+
- Test across multiple browsers in CI/CD
102+
103+
### Local Storage Considerations
104+
- The Todo app uses localStorage for persistence
105+
- Tests should account for this behavior
106+
- Clean state between tests when needed
107+
- Test persistence scenarios explicitly
108+
109+
## Code Quality Guidelines
110+
111+
### ESLint Rules
112+
- Follow the configured ESLint rules in `eslint.config.js`
113+
- Avoid `any` types - use specific type definitions
114+
- Remove unused imports and variables
115+
- Use consistent code formatting
116+
117+
### TypeScript Best Practices
118+
- Define interfaces for all data structures
119+
- Use type annotations for function parameters and returns
120+
- Avoid implicit `any` types
121+
- Use type guards when working with dynamic data
122+
123+
### Test Quality
124+
- Write clear, descriptive test names
125+
- Keep tests focused and atomic
126+
- Use appropriate wait strategies and assertions
127+
- Cover both positive and negative scenarios
128+
- Test user workflows end-to-end
129+
130+
## Educational Context
131+
132+
This repository is designed for learning and demonstration:
133+
- Tests showcase various Playwright features and patterns
134+
- Code examples are intentionally verbose for clarity
135+
- Comments explain testing strategies and decisions
136+
- Multiple test approaches are demonstrated for comparison
137+
138+
## CI/CD Integration
139+
140+
- GitHub Actions workflows run tests on multiple browsers
141+
- Tests run on pull requests and main branch changes
142+
- Build and test artifacts are preserved
143+
- Consider browser compatibility when making changes
144+
145+
## Contributing Guidelines
146+
147+
When adding new features or tests:
148+
1. Follow existing code patterns and conventions
149+
2. Add comprehensive test coverage
150+
3. Update documentation if needed
151+
4. Ensure all tests pass in multiple browsers
152+
5. Keep changes focused and atomic
153+
6. Write descriptive commit messages
154+
155+
## Common Gotchas
156+
157+
- The Todo app uses React 19, ensure compatibility
158+
- LocalStorage behavior may vary in different test environments
159+
- Vite dev server startup time should be considered in CI
160+
- Playwright auto-wait is helpful but understand when to use explicit waits
161+
- CSS selectors may be fragile - prefer semantic selectors when possible
162+
163+
## Resources
164+
165+
- [Playwright Documentation](https://playwright.dev/)
166+
- [React Documentation](https://react.dev/)
167+
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
168+
- [Vite Documentation](https://vitejs.dev/)

0 commit comments

Comments
 (0)