skills.rest
jacksonlee-tw
jacksonlee-twCOMMUNITY
Explore all skills by this author →
GitHub

playwright-e2e-test-generator

Generates Playwright E2E tests, Page Objects, and fixtures from Use Case documents and Vue pages.

Updated Aug 15, 2026
Search Tags:#test generation#playwright#e2e testing#ui automation#page object model#vue 3#primevue
One-click install
npx skills add https://github.com/jacksonlee-tw/mystock-vue --skill playwright-e2e-test-generator-jacksonlee-tw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-e2e-test-generator
Source: https://github.com/jacksonlee-tw/mystock-vue/tree/main/mystock-analysis/.github/skills/playwright-e2e-test-generator
Command: npx skills add https://github.com/jacksonlee-tw/mystock-vue --skill playwright-e2e-test-generator-jacksonlee-tw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? Writing end-to-end UI tests manually is slow and error-prone, especially when translating business requirements into stable selectors for Vue 3 + PrimeVue 4 components. This Skill automates the conversion of Use Case documents and Vue page source code into complete Playwright test suites. ## Core Features & Use Cases - Page Object Generation: Scans .vue files and produces typed Page Object classes with stable PrimeVue 4 selectors (data-testid, role, aria-label). - Test Case Matrix: Maps Use Case main flows, alternate flows, and field validations into a standard test matrix covering happy paths, form validation, DataTable operations, and dialog CRUD. - Fixtures & Config: Generates test fixtures (including authenticated sessions) and a playwright.config.ts when one does not exist. - Use Case: Given a Use Case document for a manual card creation page and its Vue source, produce e2e/pages/manualCard.page.ts, e2e/tests/manualCard.spec.ts, and fixtures covering create, validation, and delete-confirmation flows. ## Quick Start Generate Playwright E2E tests for the manual card page using its Use Case document and Vue source file.

Frequently Asked Questions about playwright-e2e-test-generator

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

FAQPage Schema
How do I generate Playwright E2E tests from a Vue page?▼

Provide the Use Case document and the .vue source file. The Skill scans the page for PrimeVue components, builds a Page Object with stable selectors, then maps Use Case flows into test cases in a spec file under e2e/tests/.

What selectors should I use for PrimeVue 4 components in Playwright?▼

Prefer data-testid attributes first, then getByRole or getByLabel using PrimeVue's built-in accessibility attributes. Component classes like .p-select, .p-datatable, and .p-dialog are fallbacks; plain CSS classes are the last resort.

Does this work with Vue 3 and PrimeVue 4?▼

Yes, the generated selectors target PrimeVue 4 specifically, including renamed classes such as p-select for Dropdown and p-datepicker for Calendar. It reads the actual .vue source to match the real component structure.

What files does the Playwright test generator create?▼

It creates a Page Object in e2e/pages/, a test fixture in e2e/fixtures/, a spec file in e2e/tests/, and a playwright.config.ts if none exists. Test results and HTML reports go to gitignored output folders.

How do I handle login and authentication in generated Playwright tests?▼

The generated fixture includes an authenticatedPage fixture that performs the login flow (fill credentials, submit, wait for redirect) before navigating to the target page. You can extend it for different user roles defined in the Use Case.

Related Skills

Explore More Software Engineering Skills→
manhthien2005manhthien2005

business-analyst

Extracts complexity signals and dependencies from Use Case documents for story point estimation.

Community
Basic
haidonglethqbhaidonglethqb

ck:test

Automate unit, integration, e2e, and UI tests with coverage analysis.

Community
Advanced
ConductionNLConductionNL
1

journeydoc-instrument

Injects data-testid attributes into Vue components and verifies with Vitest.

Official
Intermediate
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced