Day 14: Add Playwright for E2E Testing

Day 14 was all about putting a real end-to-end testing foundation under the rebuild of shikadigital.co.jp. We integrated Playwright, wrote an initial suite covering key user journeys, and set ourselves up to scale test coverage quickly with Playwright-specific “agents” inside Claude Code.

Update

  • Added Playwright as the E2E framework and wired it to run against the local Astro dev server.
  • Implemented an initial E2E suite (landing, navigation, responsive/mobile) plus shared helpers for stable selectors and flows.
  • Gitignored Playwright artifacts (test-results/, reports, traces) to keep the repo clean.
  • Installed Playwright Planner / Generator / Healer agent prompts for Claude Code to accelerate E2E iteration.
  • Generated a comprehensive E2E test plan document and a comparison doc vs the existing test approach.

What Shipped

1) Playwright E2E Infrastructure + First Suite

We added Playwright configuration (multi-browser + mobile device profiles) and an E2E test harness that boots the local dev server automatically. Initial coverage focused on high-signal flows:

  • Homepage render + key sections present
  • Navigation across primary pages (including mobile menu behavior)
  • Mobile responsiveness checks (viewport, overflow, touch targets)

Key additions:

  • playwright.config.ts
  • src/__tests__/e2e/helpers.ts
  • src/__tests__/e2e/*.spec.ts
  • src/__tests__/e2e/README.md (runbook: bun test:e2e, bun test:e2e:ui, bun test:e2e:debug)

2) Keep Test Artifacts Out of Git

Playwright produces a lot of useful, but noisy, artifacts (reports, traces, screenshots/videos). We added ignores to avoid accidental commits while keeping failures easy to inspect locally.

3) Playwright Agents in Claude Code

To speed up the test-writing loop, we installed a small set of Playwright-focused agent prompts (planner/generator/healer) plus the required config, so we can:

  • plan coverage per page/flow,
  • generate new specs based on the plan,
  • automatically iterate on failing/flaky tests.

4) A Full E2E Test Plan

We used the planner agent to generate a detailed E2E plan with scenarios broken down into small, verifiable specs, plus a comparison doc to clarify what E2E should cover vs unit/property tests.

Next Step

  • Tomorrow we will start to add more E2E coverage, with the help from the Playwright agents.