e2e-testing-patterns

Design end-to-end test suites for Playwright and Cypress with deterministic fixtures and stable selectors.

Updated Dec 20, 2023
One-click install
npx skills add https://github.com/Thiago-Cruz-eng/Hibrygame --skill e2e-testing-patterns-thiago-cruz-eng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e2e-testing-patterns
Source: https://github.com/Thiago-Cruz-eng/Hibrygame/tree/main/.claude/skills/e2e-testing-patterns
Command: npx skills add https://github.com/Thiago-Cruz-eng/Hibrygame --skill e2e-testing-patterns-thiago-cruz-eng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill helps teams create end-to-end tests that are fast, stable, and trustworthy, instead of flaky suites that waste time and block releases.

Core Features & Use Cases

  • Playwright patterns: Use Page Object Model, fixtures for deterministic data, smart waiting strategies, network mocking/interception, parallelization, visual regression, and accessibility scanning.
  • Cypress patterns: Define custom commands for repeatable actions and use intercepts to mock, modify, and simulate slow or failing APIs.
  • Test quality guardrails: Emphasize user-behavior assertions, stable selectors (data-testid/data-cy), test independence, and cleanup of test data to reduce brittleness.

Example: When a login flow breaks after a UI change, apply stable selectors, deterministic fixtures, and network interception so the suite reliably catches the regression in CI across multiple browsers.

Quick Start

Use the e2e-testing-patterns skill to design your next E2E test suite with Playwright or Cypress using deterministic data, reliable waits, and network mocking so CI failures are actionable instead of flaky.

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 E2E tests in Playwright and Cypress?

Fix flaky E2E tests by applying deterministic fixtures, condition-based waits, and stable selectors like data-testid or data-cy. This Skill establishes test independence and data cleanup patterns to reduce brittleness and ensure reliable CI execution across browsers.

What is the best way to mock network requests in Cypress and Playwright?

Mock network requests using Cypress intercepts and Playwright network interception to simulate slow or failing APIs. This Skill helps you apply network mocking patterns to isolate frontend behavior, ensure deterministic test execution, and verify critical workflows without relying on live backend availability.

How do I structure a Playwright test suite using the Page Object Model?

Structure your Playwright test suite using the Page Object Model alongside custom commands for repeatable actions. This Skill guides you in organizing test code, applying fixtures for deterministic data, and implementing smart waiting strategies to maintain scalable and trustworthy end-to-end tests.

Do I need stable selectors to reduce test flakiness in Cypress and Playwright?

Yes, stable selectors like data-testid and data-cy are required to reduce test flakiness. This Skill enforces test quality guardrails by emphasizing user-behavior assertions and stable selector strategies, ensuring tests remain resilient to UI changes and reliably catch regressions in CI.

Can I run Playwright and Cypress tests in CI/CD with network mocking?

Yes, you can run E2E tests in CI/CD with network mocking. This Skill applies cross-browser execution and parallelization patterns, allowing you to intercept and simulate API failures safely while ensuring CI test failures are actionable rather than flaky during automated releases.