playwright-expert_skill

Overview

This skill is a Playwright E2E testing expert focused on browser automation, cross-browser testing, visual regression, network interception, and CI integration. It helps set up Playwright, design robust tests for Vue and Electron apps, and troubleshoot flaky or environment-dependent failures. Use it to build maintainable E2E suites and integrate tests into CI pipelines for reliable releases.

How this skill works

I inspect your project for existing Playwright configuration, test files, and typical anti-patterns, then recommend a tailored setup and test architecture. I provide configuration snippets (playwright.config.ts), Page Object Model examples, network interception patterns, and visual regression test templates. I also suggest CI settings, retry/backoff strategies for flakiness, and a code-review checklist to keep tests stable and fast.

When to use it

• Setting up Playwright for a new Vue, Nuxt, or Electron project
• Adding cross-browser projects (chromium, firefox, webkit) and device presets
• Debugging flaky tests or CI-only failures
• Mocking network responses or simulating backend failures
• Adding visual regression checks or screenshot baselines

Best practices

• Use data-testid attributes and Page Object Model for stable selectors
• Configure screenshot on failure, traces on first retry, and retries in CI
• Avoid hardcoded waits; prefer toHave* assertions and waitForLoadState
• Mock network requests for predictable test data and faster runs
• Run tests in parallel locally but limit workers in CI to reduce flakiness

Example use cases

• Create E2E tests for the login and dashboard flows of a Vue-based database editor
• Intercept API calls to simulate PostgreSQL responses during UI tests
• Add cross-browser coverage to ensure features work in Chromium, Firefox, and Safari
• Implement visual regression for the main editor screen to detect UI regressions
• Reduce flakiness by adding retries, traces, and targeted slow-timeouts for flaky network tests