playwright-codegen

Record browser interactions with Playwright codegen and generate structured test suites.

2|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/hideki5123/agent-skill-set --skill playwright-codegen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-codegen
Source: https://github.com/hideki5123/agent-skill-set/tree/main/playwright-codegen
Command: npx skills add https://github.com/hideki5123/agent-skill-set --skill playwright-codegen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill transforms raw browser recordings into production-ready Playwright test suites, addressing the limitations of basic codegen output like brittle selectors and missing assertions.

Core Features & Use Cases

  • Guided Recording: Step-by-step process for capturing user interactions in the browser.
  • Test Enhancement: Automatically refines selectors, adds essential assertions, and structures tests for maintainability.
  • Use Case: You need to create an end-to-end test for a new user registration flow. Use this Skill to record the process, then have it automatically generate a robust, assertion-rich Playwright test file.

Quick Start

Use the playwright-codegen skill to record a new test for the login page at 'https://example.com/login'.

Frequently Asked Questions about playwright-codegen

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

FAQPage Schema
How do I turn Playwright codegen recordings into maintainable test suites?

Playwright codegen recordings can be transformed into maintainable test suites by refining raw browser captures with robust selectors, essential assertions, and structured page objects. This enhancement addresses brittle output and structures tests for long-term production quality.

What is the process for recording browser interactions with Playwright codegen?

Recording browser interactions with Playwright codegen involves a guided, step-by-step process to capture user actions in the browser. You plan the recording session, launch codegen, and capture interactions to bootstrap a complete e2e test suite for a web application.

How do I add assertions to existing Playwright codegen output?

Assertions can be added to Playwright codegen output by enhancing the captured actions during the transformation phase. This automatically refines selectors and integrates essential assertions to ensure the generated e2e tests validate application behavior effectively.

Can I bootstrap a full e2e testing suite from a browser recording?

You can bootstrap a full e2e testing suite from a browser recording by capturing user interactions with Playwright codegen and scaffolding the configuration. The raw output is then structured into production-ready specs with maintainable page objects.

Why are my raw Playwright codegen tests failing in production?

Raw Playwright codegen tests often fail in production due to limitations like brittle selectors and missing assertions. Transforming the output into production-ready test suites refines selectors and adds necessary validations to prevent failures.