e2e-debugging-workflow

Debug Playwright E2E test failures with local execution and debugging flags.

1|Updated Feb 7, 2016
One-click install
npx skills add https://github.com/ynotradio/site --skill e2e-debugging-workflow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e2e-debugging-workflow
Source: https://github.com/ynotradio/site/tree/main/.claude/skills/e2e-debugging-workflow
Command: npx skills add https://github.com/ynotradio/site --skill e2e-debugging-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured workflow to efficiently debug failing Playwright End-to-End (E2E) tests locally, reducing time spent in CI and improving test reliability.

Core Features & Use Cases

  • Local Test Execution: Run specific E2E tests with debugging flags (--debug, --headed, --trace on).
  • Environment Setup: Guides through starting the necessary local development environment (Docker, Payload CMS).
  • Failure Analysis: Offers common failure patterns (selector timeouts, date picker issues, PHP page verification) with specific debugging steps and fixes.
  • Use Case: When a Playwright E2E test fails in CI, use this Skill to replicate the failure locally, identify the root cause (e.g., a flaky selector), fix it, and verify the solution before committing.

Quick Start

To debug a failing E2E test, start your local environment, seed data, and then run the specific test file using yarn playwright test path/to/your/test.spec.ts --debug.

Frequently Asked Questions about e2e-debugging-workflow

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

FAQPage Schema
How do I debug a failing Playwright E2E test locally?

To debug a failing Playwright E2E test locally, start your local environment, seed necessary data, and run the specific test file using `yarn playwright test path/to/your/test.spec.ts --debug` to identify the root cause.

Why does my Playwright E2E test fail with a selector timeout?

Playwright E2E tests often fail with selector timeouts due to flaky selectors or missing data. Use local debugging flags like `--trace on` to inspect the DOM state and verify your environment setup and data seeding before re-running.

What is the best way to replicate a CI Playwright test failure on my machine?

The best way to replicate a CI Playwright test failure locally is to start your local development environment, seed the required data, and execute the failing test with the `--headed` or `--debug` flag to observe the exact failure point.

How do I fix date picker inconsistencies in Playwright E2E tests?

Fix date picker inconsistencies in Playwright E2E tests by running the test locally with debugging tools enabled. This workflow helps you inspect the date picker component behavior and verify data seeding to ensure reliable test execution.

Do I need Docker to debug Playwright E2E tests locally?

Yes, you typically need Docker to debug Playwright E2E tests locally. The workflow requires starting your local development environment, which includes Docker and Payload CMS, to properly replicate the conditions needed for data seeding and test execution.

What are common limitations when debugging Playwright authentication session errors locally?

When debugging Playwright authentication session errors locally, limitations often arise from improper environment setup or incomplete data seeding. This workflow addresses these by providing specific debugging steps to ensure session states are correctly replicated before testing.