playwright

Generate Playwright E2E tests using page object patterns and role-based selectors.

Updated May 17, 2026
One-click install
npx skills add https://github.com/cheetah-alo/NegritaOS --skill playwright-cheetah-alo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/cheetah-alo/NegritaOS/tree/main/.codex/skills/playwright
Command: npx skills add https://github.com/cheetah-alo/NegritaOS --skill playwright-cheetah-alo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Playwright E2E test suites often become flaky and expensive when selectors are guessed, page flows aren’t validated end-to-end, and duplicated page-object logic grows uncontrollably.

Core Features & Use Cases

  • MCP-first UI exploration: Uses Playwright MCP tools (when available) to navigate, snapshot structure, interact with the real flow, capture screenshots, and derive selectors from actual UI state.
  • Deterministic Page Object Model: Enforces a consistent file structure with a BasePage, shared helpers, and per-page page objects plus a single spec per page.
  • Selector reliability rules: Prioritizes robust queries like getByRole and getByLabel, uses getByText only for static content, and falls back to getByTestId when necessary.
  • Scope control and suite behavior: Asks for clarification when the user intent is ambiguous (single test vs full suite), preventing accidental over-generation.

Quick Start

Generate a Playwright E2E test for the user sign-up flow, using the Playwright MCP exploration workflow if available and creating only the single most relevant test in the existing spec.

Frequently Asked Questions about playwright

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

FAQPage Schema
How do I write stable Playwright E2E tests that don't flake?

Stable Playwright E2E tests require prioritizing robust selectors like getByRole and getByLabel over CSS classes, applying page object patterns, and validating complete user flows to reduce flakiness. Use getByText only for static content and getByTestId as a fallback.

What is the best way to structure a Playwright page object model?

A deterministic Playwright page object model enforces a consistent file structure with a BasePage, shared helpers, and per-page page objects, consolidating tests into a single spec file per page to prevent duplicated logic and uncontrolled growth.

How do I generate Playwright tests for authenticated navigation and form submissions?

Generating Playwright tests for authenticated navigation and form submissions involves applying end-to-end flow verification across single-page or multi-step user journeys, specifically targeting frontend UI testing scenarios including validation and error states.

Does Playwright MCP exploration help derive better UI selectors?

Playwright MCP exploration helps derive better UI selectors by navigating, snapshotting structure, interacting with real flows, and capturing screenshots to derive selectors from actual UI state rather than guessing, resulting in more reliable frontend automation tests.

Why does my Playwright test suite generate too many tests accidentally?

Playwright test suites generate too many tests accidentally when user intent is ambiguous, so scope control asks for clarification between a single test and a full suite, preventing accidental over-generation and keeping the spec file focused.