test(landing): add Playwright E2E tests (Phase 2)

[JeremyDev87]

Parent

E2E test infrastructure initiative.

Problem

The landing page (apps/landing-page/) has 220+ unit test files at 90% coverage but zero browser E2E tests. Broken links, JS errors, scroll behavior regressions, and responsive layout issues would only be caught by manual inspection.

Scope

New directory: apps/landing-page/tests/e2e/

Core flow tests (~4 tests)

• Homepage loads without console errors
• Scroll to each major section (Hero → Features → Agent Gallery → Install Guide)
• Agent Gallery filter interaction (click category → grid updates)
• Install guide copy button works

Responsive tests (~3 tests)

• Mobile viewport (375px): navigation menu, hero layout
• Tablet viewport (768px): grid layout adapts
• Desktop viewport (1440px): full layout renders

SEO & Accessibility (~3 tests)

• Meta tags present (title, description, og:image)
• Structured data (JSON-LD) is valid
• axe-core accessibility scan — no critical violations

Link validation (~2 tests)

• All internal links resolve (no 404)
• External links have correct href (GitHub, npm)

Technical approach

• Framework: Playwright (@playwright/test)
• Config: playwright.config.ts with 3 viewport projects (mobile/tablet/desktop)
• Dev server: Playwright starts Next.js dev server automatically
• CI: .github/workflows/e2e-landing.yml with Playwright container
• Accessibility: @axe-core/playwright integration

Test commands

yarn workspace landing-page test:e2e          # Run all Playwright tests
yarn workspace landing-page test:e2e --ui     # Playwright UI mode (local dev)

Acceptance criteria

• Playwright installed and configured in apps/landing-page/
• ≥10 E2E tests covering core flows, responsive, SEO, a11y
• playwright.config.ts with 3 viewport projects
• test:e2e script in package.json
• CI workflow with Playwright container
• axe-core scan passes with 0 critical violations
• Screenshot artifacts on failure (uploaded to CI)

Out of scope

• Visual regression testing (pixel comparison)
• Server-side rendering verification
• Performance metrics (Core Web Vitals — separate initiative)

[m13v]

having 220+ unit tests at 90% coverage but zero E2E is actually a really common pattern. the coverage number gives false confidence because unit tests can not catch broken scroll behaviors, missing meta tags, or console errors from bad imports. for the axe-core accessibility scan, run it inside each viewport project separately because mobile viewports often trigger different accessibility violations (focus trapping, touch target sizes) than desktop. the multi-viewport config with 3 projects is the right approach but watch out for parallel workers clobbering each other if they share the same dev server port. use a webServer config with reuseExistingServer: true and let Playwright manage the server lifecycle. for the SEO tests, validate og:image by actually fetching the URL and checking the response status, not just asserting the tag exists. we had cases where the tag was present but pointed to a broken path.

[m13v]

fwiw we built an open-source framework that auto-discovers test scenarios by crawling your running app and generates standard Playwright specs. handles the viewport matrix and accessibility scanning out of the box. the test discovery engine: https://github.com/assrt-ai/assrt-freestyle/blob/main/src/core/freestyle.ts and the browser lifecycle management (viewport configs, parallel workers, cleanup): https://github.com/assrt-ai/assrt-freestyle/blob/main/src/core/browser.ts