e2e-testing-patterns

Build stable end-to-end test suites for Playwright and Cypress workflows.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/Jhabbig/Habbig --skill e2e-testing-patterns-jhabbig
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e2e-testing-patterns
Source: https://github.com/Jhabbig/Habbig/tree/main/.claude/plugins/wshobson/developer-essentials/skills/e2e-testing-patterns
Command: npx skills add https://github.com/Jhabbig/Habbig --skill e2e-testing-patterns-jhabbig

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams replace flaky, brittle end-to-end tests with reliable workflows that catch regressions before release and increase confidence in shipping changes.

Core Features & Use Cases

  • Playwright and Cypress Guidance: Set up maintainable E2E suites with solid configuration, browser coverage, and CI-friendly defaults.
  • Reliable Test Design: Use page objects, fixtures, stable selectors, and proper waiting strategies to avoid false failures.
  • Debugging and Quality Checks: Diagnose flaky tests, mock network calls, validate accessibility, and add visual regression coverage for critical user flows.

Quick Start

Use this skill to design a stable end-to-end test for a critical user journey such as login, checkout, or signup.

Frequently Asked Questions about e2e-testing-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix flaky end-to-end tests in Playwright and Cypress?

Fix flaky end-to-end tests by implementing deterministic selectors, explicit waiting strategies, and network mocking. Replacing brittle selectors with stable page objects and fixtures ensures tests wait for actual application state rather than arbitrary timeouts, reducing false failures.

What is the best way to structure E2E test automation for critical user journeys?

Structure E2E test automation using page objects and fixtures to encapsulate multi-step flows like login and checkout. This modular approach separates test logic from UI implementation, making workflows maintainable and ensuring regressions in critical paths are caught reliably.

Does this approach support adding accessibility checks and visual regression to Cypress workflows?

Yes, this approach supports integrating accessibility checks and visual regression coverage into Cypress workflows. By mocking network calls and validating critical user flows, you can detect UI anomalies and compliance issues alongside functional regressions during test execution.

How do I debug flaky tests during CI-friendly parallel execution?

Debug flaky tests during parallel execution by isolating non-deterministic behaviors through network mocking and explicit waiting strategies. Validating cross-browser execution and reviewing fixture data helps identify race conditions and state leakage causing intermittent CI failures.

Can I use Playwright for cross-browser validation in multi-step forms?

Yes, Playwright supports cross-browser validation for multi-step forms. By utilizing stable selectors and proper waiting strategies, you can ensure deterministic test execution across different browsers, validating complex user journeys reliably without false failures.

When should I use network mocking in end-to-end testing?

Use network mocking in end-to-end testing when you need to isolate critical user journeys from backend instability. Mocking network calls creates deterministic test environments, preventing flaky tests caused by slow or unreliable external API responses during parallel execution.