skills.rest
xiaoweidotnet
xiaoweidotnetCOMMUNITY
Explore all skills by this author →
GitHub

page-to-e2e

Generates Playwright E2E suites by analyzing frontend source code and profiles.

22|4|Updated Feb 18, 2026
Search Tags:#automation#testing#frontend#e2e#qa#playwright
One-click install
npx skills add https://github.com/xiaoweidotnet/suifeng-skills --skill page-to-e2e
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-to-e2e
Source: https://github.com/xiaoweidotnet/suifeng-skills/tree/main/skills/page-to-e2e
Command: npx skills add https://github.com/xiaoweidotnet/suifeng-skills --skill page-to-e2e

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of manually writing comprehensive end-to-end tests by automatically analyzing component source code and generating Playwright test suites that cover all visible UI interactions and functional requirements.

Core Features & Use Cases

  • Automated Test Generation: Scans page source code to identify interactive elements like buttons, forms, and tables, generating specific test cases for each.
  • Flexible Data Modes: Supports testing against real APIs, mocked data, or hybrid modes to ensure CI stability and backend validation.
  • Use Case: When refactoring a complex customer management dashboard, use this skill to generate a full suite of E2E tests that verify search filters, pagination, and modal interactions without writing a single line of test code manually.

Quick Start

Use the page-to-e2e skill to generate a full test suite for the customer list page located at /customer/list.

Frequently Asked Questions about page-to-e2e

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

FAQPage Schema
How do I generate Playwright E2E tests from frontend component source code?▼

To generate Playwright E2E tests, analyze your frontend component source code and project configurations to automatically produce test suites covering UI interactions and functional requirements without manual coding.

What is the best way to automate E2E test creation for complex web applications?▼

Automating E2E test creation involves scanning page source code to identify interactive elements like buttons and forms, then generating specific Playwright test cases for each component to verify functional requirements.

Can I use mocked data sources instead of real APIs for Playwright E2E testing?▼

Yes, Playwright E2E testing supports flexible data modes including real APIs, mocked data, or hybrid modes to ensure CI stability and perform backend validation without relying on live external services.

Does automated E2E test generation work with existing project testing conventions?▼

Automated E2E test generation adheres to existing project testing conventions by analyzing project-specific configuration profiles alongside component source code to produce compatible Playwright test suites.

How do I ensure high test coverage when refactoring UI components?▼

To ensure high test coverage during UI refactoring, generate comprehensive E2E test suites that verify all visible interactions, search filters, pagination, and modal behaviors directly from your page source code.

Related Skills

Explore More Software Engineering Skills→
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced
eng-vmessiaheng-vmessiah
2

ai-regression-testing

Automate regression tests validating API response shapes and state integrity.

Community
Intermediate
wanghaishengwanghaisheng

implementing-figma-designs

Translate Figma designs into React UIs using the OneKey component library.

Community
Intermediate
forgivesam168forgivesam168
2

webapp-testing

Automate local web app testing with Playwright across multiple viewports.

Community
Intermediate