playwright-e2e-test-generator

Name: playwright-e2e-test-generator
Availability: InStock
Author: jacksonlee-tw

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

Ready to run

npx skills add https://github.com/jacksonlee-tw/mystock-vue --skill playwright-e2e-test-generator-jacksonlee-tw

💬 Prompt for ChatGPT / Claude Chat▼

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.