Lesson 05 · ~20 minutes · The finale

Make It Run Automatically

The last rung: tests that start your app themselves and re-run on every push. Testing stops being something you remember to do and becomes something that just happens.

Why this, why now → Your mission ends at "Claude verifies my app as I build — without me babysitting it." A test you have to remember to run is still babysitting. This lesson removes the last two manual steps: starting the app and remembering to run the suite. After this, the core arc is complete.

1. Two bits of manual toil left

Right now, before tests pass you must: (1) hand-start the app (python3 -m http.server 8000), and (2) remember to run npx playwright test. We automate both:

webServer config→ kills (1) GitHub Actions→ kills (2)

All snippets are in your new CI & Automation Cheat Sheet — keep it open.

2. Let Playwright start the app (5 min)

Add a webServer block (and a baseURL) to playwright.config.ts. With this, the test runner boots your app before tests and shuts it down after.¹

export default defineConfig({
  use: { baseURL: 'http://localhost:8000' },
  webServer: {
    command: 'python3 -m http.server 8000',
    cwd: 'practice-app',
    url: 'http://localhost:8000',
    reuseExistingServer: !process.env.CI,
  },
});

Because you set baseURL, simplify the test: page.goto('/') instead of the full URL. Have Claude make both edits:

Prompt to Claude

Add a webServer block to playwright.config.ts that runs python3 -m http.server 8000 from the practice-app folder, with url: 'http://localhost:8000' and reuseExistingServer: !process.env.CI. Also set use.baseURL to that URL and change signup.spec.ts to use page.goto('/').

Now the proof — stop any server you started manually, then run:

npx playwright test

It still passes. Playwright started the app for you. Manual step (1): gone.¹

3. Re-run on every push: GitHub Actions (8 min)

Playwright can scaffold the CI workflow, or Claude can write it. The file is .github/workflows/playwright.yml:²

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: actions/setup-node@v5
        with: { node-version: lts/* }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with: { name: playwright-report, path: playwright-report/ }

Prompt to Claude

Create .github/workflows/playwright.yml that runs my Playwright tests on every push and pull request: checkout, setup-node (lts), npm ci, npx playwright install --with-deps, npx playwright test, then upload the playwright-report/ as an artifact.

Push it to GitHub. On the next commit, the Actions tab shows your suite running on a fresh Linux box — headless, because CI has no display.² A failure marks the commit red and attaches the HTML report (with screenshots) for download.

No GitHub repo yet? That's fine The webServer half (section 2) is the bigger day-to-day win and needs no GitHub. Do that now; add the CI workflow whenever your code lands in a repo. The YAML is waiting in your cheat sheet.

4. The full picture, automated

git push→ fresh Linux box→ install deps + browsers→ webServer starts app→ tests run headless→ red / green + report

You did nothing but push. That's the whole mission realized: your app gets verified automatically as you build.

5. Your turn

Kill every manual server, run npx playwright test, confirm webServer starts it.
Break a validation rule, push, and watch CI turn the commit red (or run locally if no repo yet).
Download the report artifact from a failed CI run and find the failure screenshot.
Add one more test case to the suite — now CI guards it forever, on every future commit.

🏆

✓ Core mission complete You can install browser control, drive your own app, target elements durably, persist checks as real tests, and have them run automatically. Claude — and your CI — now verify your app as you build, without babysitting. That was the whole goal.

Your teacher is in the room. Ask me anything — "how do I test a flow that needs login?" (answer: save auth state once, reuse it), "how do I keep tests from getting flaky?", or "set this up for my real Next.js / Rails app" — that's a great next move now that the fundamentals are yours.

6. Beyond the core arc

The mission is met. Natural next directions when you want them:

Your real app. Point all of this at your actual project — just swap the webServer.command for your dev command. This is the highest-value next step.
Authentication. Test flows behind a login by saving and reusing browser auth state.
Taming flakiness. Web-first assertions, avoiding fixed waits, test isolation.
Wisdom. Take a real question to the Playwright Discord or r/ClaudeAI — the fastest way to level past the basics is feedback from people doing this daily. (See RESOURCES.md.)

Tell me which, and we'll start a new lesson.

References

Playwright — Web Server & baseURL config (auto-start the app, page.goto('/')). playwright.dev/docs/test-webserver
Playwright — Continuous Integration (GitHub Actions workflow, headless in CI, report artifact). playwright.dev/docs/ci-intro