playwright▌

Playwright E2E testing specialist for writing maintainable browser tests, debugging flaky tests, and CI/CD integration. \n \n Emphasizes role-based selectors and auto-waiting to avoid brittle tests and arbitrary timeouts \n Provides Page Object Model patterns for test organization, fixture setup, and configuration guidance \n Includes debugging workflow using trace viewer, screenshots, and retry strategies to identify and fix flaky tests \n Covers API mocking, visual regression testing, and para

IMPORTANT - Path Resolution: This skill can be installed in different locations (plugin system, manual installation, global, or project-specific). Before executing any commands, determine the skill directory based on where you loaded this SKILL.md file, and use that path in all commands below. Replace $SKILL_DIR with the actual discovered path.

Guide for extending Playwright with new APIs, MCP tools, CLI commands, and vendored dependencies. \n \n Covers monorepo structure, build/test/lint workflows, and coding conventions via CLAUDE.md reference \n Includes detailed walkthroughs for implementing client/server APIs, writing tests, and modifying protocol layers \n Explains how to add MCP tools, CLI commands, and configuration options within the Playwright ecosystem \n Documents the vendoring process for bundling third-party npm packages

Automated website exploration and test case generation using Playwright. \n \n Navigates to provided URLs and systematically identifies 3-5 core features and user flows \n Documents UI elements, their locators, and expected outcomes for each interaction \n Generates test cases based on exploration findings for immediate use in testing workflows \n Manages browser context lifecycle automatically, closing sessions upon completion \n

Automate form filling with Playwright MCP, including text input, date/time selection, and file uploads. \n \n Supports multiple form field types: text inputs, date pickers, time selectors, and file uploads \n Navigates to specified URLs and populates forms with provided data without automatic submission \n Includes review checkpoint before form submission to allow manual verification of filled fields \n

Comprehensive reference guide for writing, debugging, and maintaining Playwright tests across all testing types and scenarios. \n \n Covers 50+ testing patterns including E2E, component, API, GraphQL, visual regression, accessibility, security, mobile, and Electron app testing \n Includes activity-based lookup tables for writing new tests, debugging failures, fixing flaky tests, and infrastructure setup \n Provides decision trees for test type selection, architecture patterns (POM vs fixtures),

Opinionated, production-tested Playwright guidance — every pattern includes when (and when not) to use it.

Drive a real browser from the terminal using playwright-cli. Prefer the bundled wrapper script so the CLI works even when it is not globally installed. Treat this skill as CLI-first automation. Do not pivot to @playwright/test unless the user explicitly asks for test files.

Use this skill when:

Hyvä replaces Luma's KnockoutJS/RequireJS/jQuery with Alpine.js + Tailwind CSS. Playwright's strict mode (rejects locators matching multiple elements) conflicts with Alpine.js DOM patterns where hidden elements exist throughout the page. This skill documents pitfalls and solutions discovered while writing Playwright tests for Hyvä storefronts.