skills.rest
serpro-workshop-fortaleza
serpro-workshop-fortalezaOFFICIAL
Explore all skills by this author →
GitHub

playwright-generate-test

Generates Playwright TypeScript end-to-end tests by exploring web flows through the Playwright MCP server.

Updated Sep 10, 2026
Search Tags:#typescript#test generation#browser automation#next.js#mcp#playwright#e2e testing
One-click install
npx skills add https://github.com/serpro-workshop-fortaleza/sifap-modernization-paula --skill playwright-generate-test-serpro-workshop-fortaleza
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-generate-test
Source: https://github.com/serpro-workshop-fortaleza/sifap-modernization-paula/tree/main/.github/skills/playwright-generate-test
Command: npx skills add https://github.com/serpro-workshop-fortaleza/sifap-modernization-paula --skill playwright-generate-test-serpro-workshop-fortaleza

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? Writing browser E2E tests from a scenario description alone produces fragile selectors and failing specs. This Skill drives the Playwright MCP server to explore the real DOM step by step before generating a @playwright/test specification, then runs it until it passes. ## Core Features & Use Cases - Explore-then-generate workflow: Walks the described user flow one action at a time via Playwright MCP tools (navigate, click, fill, verify) before writing any test code. - Accessible locators: Selects elements by role, label, or text (getByRole, getByLabel) instead of fragile CSS selectors, matching Testing Library conventions. - Run-until-green execution: Saves the spec as <feature>.spec.ts in the UI tests/ directory and iterates with npx playwright test until it passes reliably. - Use Case: Ask for a regression test of a payment approval flow; the Skill explores the running Next.js UI, records the interactions, and produces a passing TypeScript spec with a // REQ-NNN traceability comment. ## Quick Start Generate a Playwright end-to-end test for the payment approval flow against the running SIFAP interface.

Frequently Asked Questions about playwright-generate-test

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

FAQPage Schema
How do I generate a Playwright E2E test from a user scenario?▼

Describe the user flow and confirm the base URL of the running interface. The Skill explores the flow step by step through the Playwright MCP server, then generates a @playwright/test TypeScript spec and runs it until it passes.

What locators should Playwright tests use for web UIs?▼

Prefer accessible locators such as getByRole and getByLabel over fragile CSS selectors or data-testid attributes. This matches Testing Library conventions and makes specs resilient to markup changes.

Playwright vs Vitest for testing a Next.js app?▼

Playwright covers browser-level end-to-end flows, while Vitest with Testing Library handles component and interaction tests, and Vitest or JUnit 5 covers unit logic. This Skill only produces the Playwright E2E layer.

Why does the Playwright test generation fail to start?▼

The Skill requires the Playwright MCP server to be installed and running against an accessible interface. If the MCP server is unavailable, install and start it first; the test is never written from the scenario description alone.

Can Playwright specs include credentials or environment URLs?▼

No. Secrets and environment-specific values must come from environment variables or the Playwright configuration, never hardcoded into the spec. This keeps generated tests safe to commit.

Related Skills

Explore More Software Engineering Skills→
mmahalwymmahalwy

playwright-explore-website

Explore website user flows and capture UI element locators via Playwright MCP.

Community
Intermediate
cosmicstack-labscosmicstack-labs
364

e2e-testing

Write stable end-to-end tests for web apps using Playwright and Cypress.

Official
Intermediate
organvm-i-theoriaorganvm-i-theoria

testing-patterns

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

Official
Intermediate
gzp79gzp79

vitest-testing

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

Community
Intermediate