skills.rest
Klimabevaegelsen
KlimabevaegelsenOFFICIAL
Explore all skills by this author →
WebsiteGitHub

playwright-testing

Guide writing and debugging Playwright E2E tests with data-testid selectors.

39|15|Updated Nov 16, 2024
Search Tags:#debugging#playwright#e2e-testing#data-testid#test-automation#mock-api#locator
One-click install
npx skills add https://github.com/Klimabevaegelsen/landbruget.dk --skill playwright-testing-klimabevaegelsen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-testing
Source: https://github.com/Klimabevaegelsen/landbruget.dk/tree/main/.claude/skills/playwright-testing
Command: npx skills add https://github.com/Klimabevaegelsen/landbruget.dk --skill playwright-testing-klimabevaegelsen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guidance for developers to write and debug Playwright E2E tests, ensuring reliable, maintainable test suites.

Core Features & Use Cases

  • Guidance for writing reliable Playwright tests, including locator strategies and data-testid conventions.
  • Debugging tips for flaky tests, timeouts, and asynchronous flows.
  • Techniques for mocking API responses and validating UI behavior across modes (headed, headless, interactive UI).

Quick Start

Write a basic Playwright test file under frontend/e2e and run npm test to verify setup.

Frequently Asked Questions about playwright-testing

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

FAQPage Schema
How do I fix flaky Playwright E2E tests caused by asynchronous timeouts?▼

Fix flaky Playwright E2E tests by applying robust waiting strategies and proper async handling to handle timeouts. Debugging these asynchronous flows ensures reliable test execution across headed, headless, and interactive UI test modes.

What is the best way to locate elements for reliable Playwright test automation?▼

The best way to locate elements for reliable Playwright test automation is using data-testid selectors. Establishing strict data-testid conventions prevents flaky failures caused by dynamic UI changes and ensures maintainable tests.

How do I mock API responses in Playwright tests to validate UI behavior?▼

Mock API responses in Playwright tests by configuring API mocking techniques to intercept network requests and return controlled data. This isolates UI behavior validation and stabilizes E2E tests against backend variability.

Can I configure Playwright to run in headed, headless, and interactive UI modes?▼

Yes, you can configure Playwright to run in headed, headless, and interactive UI modes to diagnose flaky tests. Utilizing these different test modes helps developers debug E2E test failures and verify setup across UI testing scenarios.

How do I set up my first Playwright test file to verify my environment configuration?▼

Set up a basic Playwright test file under the frontend/e2e directory and run npm test to verify your configuration. This quick start approach validates the test environment and ensures the Playwright setup is correctly initialized.

Related Skills

Explore More Software Engineering Skills→
JHaugaardJHaugaard

test-orchestrator

Analyze a project's tech stack and configure testing frameworks with scaffolding.

Community
Intermediate
cbbkrd-techcbbkrd-tech

ln-514-regression-checker

Automates execution of pytest, jest, vitest and go test suites to detect regressions.

Community
Intermediate
nirukk52nirukk52
1

e2e-testing

Automate ScreenGraph end-to-end UI validation with Playwright and .env configuration.

Community
Intermediate
mbt1909432mbt1909432

playwright-e2e-testing

Automate end-to-end web application tests across Chromium, Firefox, and WebKit.

Community
Advanced