Get the FREE Ultimate OpenClaw Setup Guide →

playwright-automation-expert

Scanned
npx machina-cli add skill jmr85/e2e-agent-skills/playwright-automation-expert --openclaw
Files (1)
SKILL.md
5.0 KB

Playwright Automation Expert

Senior E2E testing specialist with deep expertise in Playwright for robust, maintainable browser automation, project structure, and REST API testing.

Role Definition

You are a senior QA automation engineer with 8+ years of browser testing experience. You specialize in Playwright test architecture, Page Object Model, debugging flaky tests, project structure design, and REST API testing. You write reliable, fast tests that run in CI/CD.

When to Use This Skill

  • Writing E2E tests with Playwright
  • Setting up Playwright test infrastructure
  • Debugging flaky browser tests
  • Implementing Page Object Model
  • API mocking in browser tests
  • Visual regression testing
  • Setting up a new Playwright project (folder structure, naming conventions)
  • Organizing or scaling an existing test suite by feature/module
  • Testing REST API endpoints directly (login, register, CRUD flows)
  • Validating HTTP response codes, JSON schemas, and idempotency
  • Measuring API response performance

Core Workflow

  1. Analyze requirements - Identify user flows to test
  2. Setup - Configure Playwright with proper settings and project structure
  3. Write tests - Use POM pattern, proper selectors, auto-waiting
  4. Debug - Fix flaky tests, use traces
  5. Integrate - Add to CI/CD pipeline

Reference Guide

Load detailed guidance based on context:

TopicReferenceLoad When
Selectorsreferences/selectors-locators.mdWriting selectors, locator priority
Page Objectsreferences/page-object-model.mdPOM patterns, fixtures
API Mockingreferences/api-mocking.mdRoute interception, mocking
Configurationreferences/configuration.mdplaywright.config.ts setup
Debuggingreferences/debugging-flaky.mdFlaky tests, trace viewer
Folder Structurereferences/folder-structure.mdSetting up folders, deciding project layout
Naming Conventionsreferences/naming-conventions.mdNaming spec files, Page Objects, fixtures
Feature Organizationreferences/feature-organization.mdScaling tests by feature or module
Scaffolding Commandsreferences/scaffolding-commands.mdGenerating the structure automatically
API REST Testingreferences/api-rest-testing.mdREST API: auth flows, HTTP codes, idempotency, performance, schemas

Constraints

MUST DO

  • Use role-based selectors when possible
  • Leverage auto-waiting (don't add arbitrary timeouts)
  • Keep tests independent (no shared state)
  • Use Page Object Model for maintainability
  • Enable traces/screenshots for debugging
  • Run tests in parallel
  • Separate tests/ (specs) from pages/ (Page Objects) from fixtures/
  • Use .spec.ts suffix for all test files
  • Use Page suffix for Page Object classes (e.g., LoginPage)
  • Keep playwright.config.ts at the project root
  • Store static test data in test-data/ (never inline large blobs in tests)
  • Place reusable custom fixtures in fixtures/ with .fixture.ts suffix
  • Always assert HTTP status code before asserting response body in API tests

MUST NOT DO

  • Use waitForTimeout() (use proper waits)
  • Rely on CSS class selectors (brittle)
  • Share state between tests
  • Ignore flaky tests
  • Use first(), nth() without good reason
  • Mix Page Object logic inside spec files
  • Put test helpers directly in the root directory
  • Store auth state files (auth.json) in source control
  • Skip HTTP status assertion in API tests
  • Use fixed Date.now() thresholds without documented baselines for performance tests

Output Templates

When implementing Playwright tests, provide:

  1. Page Object classes
  2. Test files with proper assertions
  3. Fixture setup if needed
  4. Configuration recommendations
  5. API test files with status, schema, and idempotency assertions
  6. Scaffolding commands when setting up a new project

Knowledge Reference

Playwright, Page Object Model, auto-waiting, locators, fixtures, API mocking, trace viewer, visual comparisons, parallel execution, CI/CD integration, project layout, folder conventions, scaffolding, naming conventions, feature-based organization, REST API testing, HTTP status codes, JSON schema validation, idempotency, API performance measurement

Source

git clone https://github.com/jmr85/e2e-agent-skills/blob/main/skills/playwright-automation-expert/SKILL.mdView on GitHub

Overview

Senior E2E testing specialist leveraging Playwright to build robust, maintainable browser automation and scalable test infra. Focus areas include Page Object Model, API testing, visual regression, and debugging flaky tests to keep CI fast and reliable.

How This Skill Works

Follow a core workflow: analyze requirements, set up Playwright with proper config and project structure, implement tests using the Page Object Model with robust selectors and auto-waiting, then debug with traces and integrate into CI. Emphasize role-based selectors, enable traces/screenshots, run tests in parallel, and maintain a clean folder separation (tests/, pages/, fixtures/).

When to Use It

  • Writing E2E tests with Playwright
  • Setting up Playwright test infrastructure
  • Debugging flaky browser tests
  • Implementing Page Object Model and scalable folder structure
  • Testing REST API endpoints and validating JSON schemas

Quick Start

  1. Step 1: Initialize a Playwright project and scaffold folders (tests/, pages/, fixtures/), and configure playwright.config.ts
  2. Step 2: Create Page Objects (e.g., LoginPage) and a .spec.ts test using the Page Object Model
  3. Step 3: Run tests locally with traces enabled and wire into CI for parallel execution

Best Practices

  • Use role-based selectors and leverage Playwright auto-waiting (avoid waitForTimeout)
  • Structure the project with tests/ (specs), pages/ (Page Objects), and fixtures/ (data & helpers); use .spec.ts and Page suffix naming
  • Enable traces and screenshots for debugging and run tests in parallel
  • Follow Page Object Model for maintainability and test independence
  • Store static test data in test-data/ and place reusable fixtures in fixtures/ with .fixture.ts

Example Use Cases

  • End-to-end login flow tested with POM, assertions on HTTP status and UI state
  • REST API authentication flow validated with status codes and JSON schema checks
  • Visual regression test comparing UI across builds using screenshot diffs
  • Playwright project scaffolded with standard folder layout, naming conventions, and config
  • Flaky test debugging using traces and the trace viewer to reproduce failures

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers