testing-e2e

Guide end-to-end testing with ARIA selectors and auto-retriable assertions.

Updated Jul 1, 2025
One-click install
npx skills add https://github.com/agdev/claude-code --skill testing-e2e
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: testing-e2e
Source: https://github.com/agdev/claude-code/tree/main/skills/testing-e2e
Command: npx skills add https://github.com/agdev/claude-code --skill testing-e2e

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

End-to-end (E2E) tests are critical but often flaky and hard to maintain due to UI changes and complex system interactions. This Skill provides expert guidance for writing resilient E2E tests that reliably simulate user behavior, reducing test failures and maintenance overhead.

Core Features & Use Cases

  • Self-Contained Tests: Enforces isolated test states and dedicated data for reliable execution, preventing inter-test dependencies.
  • User-Facing Locators: Guides on using ARIA-based selectors (getByRole, getByLabel) for UI resilience, making tests less prone to breaking from cosmetic changes.
  • Smart Waiting Strategies: Eliminates arbitrary timeouts, leveraging auto-retriable assertions for stability and faster test execution.
  • Use Case: Refactor an existing E2E test suite to replace fragile CSS selectors with resilient ARIA-based locators and implement semantic helper functions for clearer, more maintainable user journeys.

Quick Start

Review the attached login.e2e.test.ts file and refactor it to use only getByRole or getByLabel selectors, removing any CSS or XPath locators.

Frequently Asked Questions about testing-e2e

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

FAQPage Schema
How do I replace CSS selectors with ARIA-based locators in my E2E tests?

ARIA-based selectors like `getByRole` and `getByLabel` make E2E tests resilient to UI changes by targeting semantic elements rather than styling classes. Replace CSS selectors with these user-facing locators to reduce maintenance overhead and prevent test breakage from cosmetic updates.

What makes E2E tests flaky and how do I fix it?

E2E test flakiness stems from arbitrary timeouts, fragile selectors, and inter-test dependencies. Use auto-retriable assertions, semantic waiting strategies, and self-contained tests with dedicated data factories to ensure reliable execution across complex system interactions.

How do I write self-contained E2E tests that don't depend on other tests?

Self-contained E2E tests isolate state and use dedicated data factories so each test runs independently without relying on prior test execution. This eliminates cascading failures and makes your test suite predictable and maintainable.

Can I use Playwright for testing real user journeys across multiple processes?

Yes, Playwright supports E2E testing that spans multiple processes and simulates real user behavior. Combine ARIA-based selectors, semantic helper functions, and resilient waiting strategies to verify complete user journeys reliably.

What's the best approach to refactor legacy E2E test suites?

Refactor systematically: replace fragile XPath and CSS locators with ARIA-based selectors, extract semantic helper functions for clarity, implement auto-retriable assertions, and enforce self-contained test design to reduce flakiness and improve maintainability.

Why should I use semantic helper functions in E2E tests?

Semantic helper functions abstract complex interactions into readable, reusable steps that mirror real user behavior. They make tests clearer, easier to maintain, and reduce duplication across your E2E test suite.