Page 18 - Testing/E2E

Cypress tests that pass reliably on your local machine often fail unexpectedly in CI due to resource limits, mismatched viewports, and timing differences on shared runners. This article shows how to run Cypress headless in GitLab CI and GitHub Actions, capture video and screenshot artifacts on failure, cache node_modules and the Cypress binary, and parallelize test runs across multiple jobs.

A snapshot test saves a Bash script's output once as a reference and automatically compares it against the current result on every subsequent test run. Normalize volatile values like timestamps, process IDs, or generated UUIDs before comparing, and you get a safety net against unintended changes in scripts that are otherwise hard to test with classic assertions.

Snapshot testing promises quick protection against unintended changes to Vue components, but in practice it often tips into meaningless green checkmarks. Unstable snapshots, thoughtless updates, and missing reviews turn a sensible tool into a facade that lets real regressions through unnoticed.

A GraphQL schema is already a machine-readable contract between frontend and backend. A mock schema makes that contract executable: frontend teams build against realistic test data long before the backend is finished, and breaking changes surface automatically instead of in production.

Playwright's page.route() API lets you intercept every single network request a page makes before it actually reaches the server, and either answer it with your own, controlled response, let the actual request pass through unchanged, or block it entirely. This capability makes route mocking one of the most effective tools against the most common cause of flaky E2E tests: dependence on a real, possibly slow or inconsistent backend system.

Statically typed frontends often trust handwritten interfaces blindly while the API underneath keeps evolving. TypeScript types generated from a single OpenAPI specification, combined with runtime validation through zod, close exactly that gap and keep backend and headless frontend in sync for good across Magento and PWA projects.

A new developer's first contact with a test suite grown over years often decides whether tests get perceived from then on as a trustworthy tool or a burdensome obstacle, an impression that's hard to fully correct months later. Thoughtful onboarding into a project's test suite therefore deserves the same deliberate planning as onboarding into the actual production architecture, but in practice frequently gets left to chance.

A CSS refactor can leave a component functionally unchanged and still silently break the layout. Unit and component tests check behavior, not appearance. Visual regression testing closes exactly this gap by comparing screenshots against a baseline, surfacing every pixel deviation before it reaches production.

Teams that lean on end-to-end tests with Cypress or Playwright as their main safety net pay for it with slow test runs, high flakiness, and expensive maintenance. The test pyramid explains why most test coverage should come from fast, cheap unit and integration tests, while E2E tests deliberately secure only the most critical user paths end to end, building confidence without dragging down the continuous integration pipeline.

Subagents delegate focused subtasks to a separate Claude Code context with its own context window and its own system prompt. This helps with parallel codebase research and isolated review passes, but it adds coordination overhead that is not worth it for simple tasks, where a single agent often remains the better choice.