skills.rest
Collins1892
Collins1892COMMUNITY
Explore all skills by this author →
GitHub

playwright-test-writer

Writes Playwright end-to-end tests for a React TypeScript client using page objects.

Updated May 21, 2026
Search Tags:#typescript#test automation#react#playwright#e2e testing#page object#chromium
One-click install
npx skills add https://github.com/Collins1892/radar-practice --skill playwright-test-writer-collins1892
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-test-writer
Source: https://github.com/Collins1892/radar-practice/tree/main/.claude/skills/playwright-test-writer
Command: npx skills add https://github.com/Collins1892/radar-practice --skill playwright-test-writer-collins1892

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? Writing consistent Playwright e2e tests for a multi-API React app requires knowing the repo's conventions, webServer setup, page object patterns, and journey catalog — this Skill encodes all of that so each test follows the established structure without re-deriving it. ## Core Features & Use Cases - Convention-driven test authoring: Enforces one test per request, Arrange/Act/Assert comments, behaviour-sentence naming, accessible locators, and TypeScript rules (explicit return types, no any). - Page object and journey patterns: Provides boilerplate for page classes under client/e2e/pages/, journey specs under client/e2e/journeys/, and API seeding helpers via e2e/support/api.ts. - Full-stack test orchestration: Documents the four-process Playwright webServer setup (ItemsApi, IncidentsApi, AuditsApi, Vite) and requires running npm run e2e to confirm the suite passes. - Use Case: Ask for a new audits soft-delete journey, and the Skill seeds an audit via the API helper, drives the UI delete flow, asserts the row disappears, and runs the Chromium suite to verify. ## Quick Start Write a Playwright e2e test that adds an item and verifies it appears in the list, then run the suite from client/.

Frequently Asked Questions about playwright-test-writer

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

FAQPage Schema
How do I write a Playwright e2e test for a React app?▼

Create one test per request inside a test.describe block under client/e2e/journeys/, using Arrange/Act/Assert comments and accessible locators like getByRole and getByLabel. Run npm run e2e from client/ to verify the suite passes.

How to use the page object pattern in Playwright?▼

Create one class per file under client/e2e/pages/ with readonly locator fields initialized in the constructor from Page. Page objects expose locators and small actions like goto() and submit(), while specs hold all expect assertions.

Does Playwright start the backend APIs automatically?▼

Yes, the webServer array in playwright.config.ts starts ItemsApi on 5133, IncidentsApi on 5134, AuditsApi on 5135, and Vite on 5173. Manual dotnet run is only needed when debugging API startup outside Playwright.

How do I seed test data for Playwright journey tests?▼

Use the createIncident and createAudit helpers in client/e2e/support/api.ts for soft-delete journeys, then perform the delete through the UI. Prefer UI-driven setup for items and incidents when no seeding is required.

Why is my Playwright test failing with Radix Select components?▼

Radix Select renders aria attributes on the SelectTrigger with combobox role, not on Select.Root. Click the labelled combobox first, then select the value with getByRole('option', { name: '...' }).

Does Playwright run in CI for pull requests?▼

No, the ci.yml workflow runs only dotnet test and Vitest on PR builds. Playwright e2e runs nightly via nightly-e2e.yml using the same four-server webServer configuration.

Related Skills

Explore More Software Engineering Skills→
organvm-i-theoriaorganvm-i-theoria

testing-patterns

Write unit, integration, E2E, and visual regression tests using Vitest, Testing Library, and Playwright.

Official
Intermediate
apacheapache
2.9k

test-fixer

Runs, reviews, and triages Gradle test failures across grails-core modules.

Official
Intermediate
gzp79gzp79

vitest-testing

Validate Svelte component props, state, and UI interactions with Vitest.

Community
Intermediate
ReadyStateChangeReadyStateChange

javascript-testing-expert

Implement deterministic JavaScript unit and component tests with Vitest and fast-check.

Official
Advanced