Enhance Playwright E2E testing configuration

- Add GitHub Actions workflow for automated E2E testing in CI
- Enable webServer auto-start in playwright.config.js (Rails on port 5017)
- Configure conditional reporters (GitHub annotations in CI, HTML locally)
- Add npm scripts for running Playwright tests (test:e2e, test:e2e:ui, etc.)
- Fix undefined Post model reference in basic scenario
- Update CLAUDE.md with CI integration details and improved commands

These improvements address the review feedback and make Playwright testing
more production-ready with proper CI integration and better developer experience.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

.github/workflows/playwright.yml

@@ -0,0 +1,46 @@
+name: Playwright E2E Tests
+
+on:
+  pull_request:
+  push:
+    branches: [master]
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: spec/dummy
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.3'
+          bundler-cache: true
+          working-directory: spec/dummy
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: spec/dummy/yarn.lock
+
+      - name: Install dependencies
+        run: |
+          bundle install
+          yarn install
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: yarn playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: spec/dummy/playwright-report/
+          retention-days: 30

CLAUDE.md

@@ -249,23 +249,28 @@ yarn playwright install --with-deps
 
 ### Running Playwright Tests
 
+**Note:** Playwright will automatically start the Rails server on port 5017 before running tests. You don't need to manually start the server.
+
 ```bash
 cd spec/dummy
 
-# Run all tests
-yarn playwright test
+# Run all tests (Rails server auto-starts)
+yarn test:e2e
 
 # Run tests in UI mode (interactive debugging)
-yarn playwright test --ui
+yarn test:e2e:ui
 
 # Run tests with visible browser
-yarn playwright test --headed
+yarn test:e2e:headed
 
 # Debug a specific test
-yarn playwright test --debug
+yarn test:e2e:debug
+
+# View test report
+yarn test:e2e:report
 
 # Run specific test file
-yarn playwright test e2e/playwright/e2e/react_on_rails/basic_components.spec.js
+yarn test:e2e e2e/playwright/e2e/react_on_rails/basic_components.spec.js
 ```
 
 ### Writing Tests
@@ -358,11 +363,19 @@ spec/dummy/e2e/
 
 ### Debugging
 
-- Run in UI mode: `yarn playwright test --ui`
+- Run in UI mode: `yarn test:e2e:ui`
 - Use `page.pause()` to pause execution
 - Check `playwright-report/` for detailed results after test failures
 - Enable debug logging in `playwright.config.js`
 
+### CI Integration
+
+Playwright E2E tests run automatically in CI via GitHub Actions (`.github/workflows/playwright.yml`). The workflow:
+- Runs on all PRs and pushes to master
+- Uses GitHub Actions annotations for test failures
+- Uploads HTML reports as artifacts (available for 30 days)
+- Auto-starts Rails server before running tests
+
 ## IDE Configuration
 
 Exclude these directories to prevent IDE slowdowns:

spec/dummy/e2e/playwright.config.js

@@ -21,7 +21,7 @@ module.exports = defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI ? [['github'], ['html']] : [['html', { open: 'never' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -70,9 +70,12 @@ module.exports = defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'RAILS_ENV=test bundle exec rails server -p 5017',
+    url: 'http://127.0.0.1:5017',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  },
 });

spec/dummy/e2e/playwright/app_commands/scenarios/basic.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 # You can setup your Rails state here
+# This is an example scenario - customize for your app's models
 # MyModel.create name: 'something'
-Post.create(title: "I am a Postman")

spec/dummy/package.json

@@ -73,6 +73,11 @@
     "format": "cd ../.. && yarn run nps format",
     "test:js": "yarn run jest ./tests",
     "test": "yarn run build:test && yarn run lint && bin/rspec",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report",
     "build:test": "rm -rf public/webpack/test && yarn build:rescript && RAILS_ENV=test NODE_ENV=test bin/shakapacker",
     "build:dev": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/shakapacker",
     "build:dev:server": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/shakapacker --watch",