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

playwright-generate-test

Generates Playwright end-to-end TypeScript tests by exploring web flows via Playwright MCP.

Updated Sep 10, 2026
Search Tags:#typescript#test generation#MCP#Next.js#browser automation#Playwright#e2e testing
One-click install
npx skills add https://github.com/serpro-workshop-fortaleza/datacorp-sifap-modernization-team-kit --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/datacorp-sifap-modernization-team-kit/tree/main/.github/skills/playwright-generate-test
Command: npx skills add https://github.com/serpro-workshop-fortaleza/datacorp-sifap-modernization-team-kit --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 specs with guessed selectors. 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: Observes the live page through 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. - Requirement traceability: Adds inline // REQ-NNN comments when a flow traces back to a business requirement. - Use Case: Ask for a regression test of the payment approval flow in the SIFAP 2.0 Next.js 15 interface; the Skill explores the flow, writes payment-approval.spec.ts in the interface tests/ directory, and iterates until npx playwright test passes. ## Quick Start Generate a Playwright end-to-end test for the login and dashboard flow of the running web 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 flow is explored step by step with Playwright MCP tools, then a @playwright/test TypeScript spec is generated, saved as <feature>.spec.ts in the tests directory, and run until it passes.

What locators should Playwright tests use for web elements?▼

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

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

Playwright covers browser-level end-to-end regression flows, while Vitest with Testing Library handles component and interaction tests. Pure unit logic stays in Vitest for the interface or JUnit 5 for the server layer.

Does this approach require the Playwright MCP server?▼

Yes, the Playwright MCP server must be installed and running against an accessible interface. Tests are never written manually from the scenario alone; the real DOM is observed through MCP first.

Why should credentials not be hardcoded in Playwright specs?▼

Hardcoded secrets and environment-specific data leak into version control and break across environments. Base URLs and credentials should be read from environment variables or the Playwright configuration instead.

Related Skills

Explore More Software Engineering Skills→
serpro-workshop-fortalezaserpro-workshop-fortaleza

playwright-generate-test

Generates Playwright end-to-end TypeScript tests by exploring web flows via Playwright MCP.

Official
Intermediate
LllooogggLlloooggg
26

test

Run project test suites with coverage and output pass/fail results.

Community
Basic
JenilRevaliyaJenilRevaliya

webapp-testing

Implements full-stack web application testing strategies using Vitest, React Testing Library, MSW, and Playwright.

Community
Intermediate
organvm-i-theoriaorganvm-i-theoria

testing-patterns

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

Official
Intermediate