skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

playwright-best-practices

Guides writing, debugging, and maintaining Playwright tests in TypeScript.

3|Updated Apr 20, 2026
Search Tags:#typescript#ci/cd#test automation#accessibility#flaky tests#playwright#e2e testing
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill playwright-best-practices-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.agents/skills/playwright-best-practices
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill playwright-best-practices-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Playwright test suites often suffer from flaky tests, brittle selectors, and inconsistent patterns. This Skill routes the AI to the right reference document for the task at hand, so tests follow proven practices for locators, assertions, fixtures, and CI/CD instead of ad-hoc guesses. ## Core Features & Use Cases - Activity-based reference routing: Maps 57 reference documents across 8 categories (core, debugging, testing patterns, advanced, browser APIs, architecture, frameworks, infrastructure/CI-CD) to the user's current task. - Broad scenario coverage: E2E, component, API, visual regression, accessibility (axe-core), security, performance, mobile, i18n, Electron, and browser extension testing. - Debugging and flakiness guidance: Trace viewer usage, flaky test diagnosis, race conditions, console error monitoring, and test isolation. - Use Case: Ask the AI to fix a flaky login test or add accessibility checks to a checkout flow, and it loads the relevant references (e.g., flaky-tests.md, accessibility.md) to produce robust, auto-waiting test code. ## Quick Start Ask the AI to write or fix a Playwright test, such as fixing a flaky login test or adding accessibility tests to the checkout page.

Frequently Asked Questions about playwright-best-practices

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

FAQPage Schema
How do I fix flaky Playwright tests?▼

Flaky Playwright tests are diagnosed using the flaky-tests and debugging references, which cover race conditions, state leaks between tests, and improper waits. Replace arbitrary sleeps with web-first assertions and ensure test isolation through fixtures.

How to write accessibility tests with Playwright and axe-core?▼

Accessibility testing uses the @axe-core/playwright integration to run AxeBuilder analysis on pages or scoped components. The accessibility reference covers WCAG-tagged rules, keyboard navigation, ARIA states, focus management, and violation reporting.

Should I use Page Object Model or fixtures in Playwright?▼

The pom-vs-fixtures reference explains the trade-offs between Page Object Model and fixture-based patterns. Fixtures handle setup and teardown well, while POM encapsulates page interactions; the architecture references help choose per project.

Does Playwright support testing Electron apps and browser extensions?▼

Yes, the skill includes dedicated references for Electron desktop apps covering IPC and main/renderer processes, and for browser extensions covering popups, background scripts, and content scripts.

How do I set up Playwright in CI/CD pipelines?▼

The infrastructure-ci-cd references cover GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, and Docker setups. They also address sharding, parallel execution, reporting, and test coverage configuration.

Why do Playwright tests pass locally but fail in CI?▼

CI failures typically stem from environment differences, missing environment variables, or database state. The references recommend using process.env for secrets, globalSetup for seeds, and unique identifiers for test data.

Related Skills

Explore More Software Engineering Skills→
naviktnavikt
2

sif-playwright

Bootstrap Playwright end-to-end testing frameworks with configs and axe accessibility checks.

Official
Advanced
OM-bit-hubOM-bit-hub

ci-test-pipeline

Automate CI/CD pipeline setup with parallel test runs and coverage reporting.

Community
Advanced
adryanmoldokkr32-pixeladryanmoldokkr32-pixel

health

Compute a weighted 0-10 repository health score from type checks, linting, tests, dead code detection, and shell linting.

Community
Advanced
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced