Day 15: Comprehensive E2E testing with Playwright Agents

Day 15 was about scaling the Playwright E2E suite we set up yesterday. Instead of writing everything by hand, we leaned on a tight “agent loop” (Planner → Generator → Healer) so we could plan coverage, generate new specs quickly, and iterate until things were stable in CI.

Update

  • Planned coverage with Playwright Planner (full plan + /book plan docs).
  • Generated new E2E specs for the assessment flows + hardened them for reliability.
  • Added accessibility-focused E2E checks for the assessment page (plus notes/todos).
  • Improved navigation/mobile menu E2E stability via shared helpers.
  • Added and refined a GitHub Actions workflow to run Playwright in CI.
  • Tuned Playwright/Vitest config and tightened URL validation tests.

What Shipped

1) More E2E Coverage (Assessment + Book)

Key new specs in shikadigital.co.jp:

  • Assessment happy paths: src/__tests__/e2e/assessment/*-happy-path.spec.ts
  • Assessment validation: src/__tests__/e2e/assessment/validation.spec.ts
  • Assessment accessibility: src/__tests__/e2e/assessment/accessibility.spec.ts
  • Book page calendar embed: src/__tests__/e2e/book/calendar-embed-desktop.spec.ts
  • Shared helpers + stability work: src/__tests__/e2e/helpers.ts

2) Documentation for Iteration + Results

  • Planner outputs: docs/e2e-test-plan.md, docs/e2e-vs-existing-tests-comparison.md
  • Book page plan: docs/book-page.plan.md
  • Navigation + accessibility notes: docs/phase-2.2-navigation-tests-complete.md, docs/phase-3.1-accessibility-tests-results.md, docs/accessibility-tests-todo.md

3) CI Workflow for Playwright

To make sure the suite runs on every change:

  • Workflow: .github/workflows/playwright.yml
  • Runbook: docs/playwright-ci-workflow.md
  • CI-specific tuning: playwright.config.ts (web server command adjustments)

4) The Agent Loop (Planner → Generator → Healer)

We wired Playwright-specific agents into Claude Code so the workflow is repeatable:

  • Agent prompts: .claude/agents/playwright-test-*.md
  • End result: faster expansion of coverage with less manual boilerplate and quicker fixes when tests flake.

Next Steps

With the foundation in place, in the future we can change the site with more confidence that we wouldn’t break things.

The Playwright Agents also almost achieve the perfect cycle of tests creation automation, while it plans and generates the tests, it also heals them when they break.