Skip to content

Commit 28833e5

Browse files
justin808claude
andcommitted
Update spec/dummy/README.md with Playwright testing documentation
- Add comprehensive Playwright testing section to dummy app README - Include setup instructions for Playwright - Document all available test commands - Explain test structure and file organization - Provide example for writing new Playwright tests - Link to detailed Playwright README for more information This ensures developers working with the dummy app understand how to use Playwright for E2E testing alongside RSpec and Jest. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent f40f63a commit 28833e5

File tree

1 file changed

+83
-0
lines changed

1 file changed

+83
-0
lines changed

spec/dummy/README.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,86 @@ foreman start -f Procfile.dev-static-assets
4646
```sh
4747
foreman start -f Procfile.spec
4848
```
49+
50+
# Testing
51+
52+
## Running RSpec Tests
53+
54+
```sh
55+
bundle exec rspec
56+
```
57+
58+
## Running Jest Tests
59+
60+
```sh
61+
yarn test:js
62+
```
63+
64+
## Running Playwright E2E Tests
65+
66+
Playwright provides cross-browser end-to-end testing for React on Rails components.
67+
68+
### Setup Playwright
69+
70+
```sh
71+
# Install Playwright and browsers (first time only)
72+
yarn add -D @playwright/test
73+
yarn playwright install --with-deps
74+
```
75+
76+
### Run Playwright Tests
77+
78+
```sh
79+
# Run all tests in headless mode
80+
yarn test:e2e
81+
82+
# Run tests with UI (interactive debugging)
83+
yarn test:e2e:ui
84+
85+
# Run tests with visible browser
86+
yarn test:e2e:headed
87+
88+
# Debug a specific test
89+
yarn test:e2e:debug
90+
91+
# View test report
92+
yarn test:e2e:report
93+
94+
# Run tests in a specific browser
95+
yarn playwright test --project=chromium
96+
yarn playwright test --project=firefox
97+
yarn playwright test --project=webkit
98+
```
99+
100+
### Playwright Test Structure
101+
102+
Tests are located in `playwright/tests/`:
103+
104+
- `basic-react-components.spec.ts` - Component rendering and interactions
105+
- `turbolinks-integration.spec.ts` - Turbolinks/Turbo integration
106+
- `error-handling.spec.ts` - Error monitoring and handling
107+
- `performance.spec.ts` - Performance and memory testing
108+
109+
Configuration is in `playwright.config.ts`. Test helpers are in `playwright/fixtures/`.
110+
111+
### Writing New Playwright Tests
112+
113+
Create new test files in `playwright/tests/`:
114+
115+
```typescript
116+
import { test, expect } from '@playwright/test';
117+
118+
test('my new test', async ({ page }) => {
119+
await page.goto('/');
120+
121+
// Test React on Rails component
122+
const component = page.locator('#MyComponent-react-component-0');
123+
await expect(component).toBeVisible();
124+
125+
// Interact with component
126+
await component.locator('button').click();
127+
await expect(component.locator('.result')).toHaveText('Success');
128+
});
129+
```
130+
131+
For more details, see the [Playwright README](playwright/README.md).

0 commit comments

Comments
 (0)