Generate Playwright e2e specs from page component source and run them.
npx skills add https://github.com/tonehq/tone --skill generate-tests-tonehq
Please help me install this Agent Skill. Skill: generate-tests Source: https://github.com/tonehq/tone/tree/main/frontend/.claude/skills/generate-tests Command: npx skills add https://github.com/tonehq/tone --skill generate-tests-tonehq
## What problem does it solve? Manually writing Playwright end-to-end tests for new page components is time-consuming and error-prone; this Skill automates the process by generating a complete e2e spec from a component source and then executing it.
## Core Features & Use Cases
Provide a target page or component to generate tests for and run the resulting spec locally.
High-intent search queries and answers about installing and using this skill.
You can generate Playwright e2e tests by having the tool read a page component's source and scaffold a new spec file automatically. This eliminates boilerplate by analyzing the code to produce tests covering rendering, navigation, and interactions.
Yes, auto-generating Playwright specs works with Next.js and React apps using Material-UI. The generated tests apply the project's existing e2e testing patterns to ensure accurate element targeting and real backend coverage.
To run a generated e2e test against a real dev server, the tool executes the newly created spec locally after scaffolding it. This validates end-to-end behavior by checking page rendering and user interactions against your active backend.
Yes, you can create e2e tests for pages with no existing spec. The tool specifically targets page components lacking tests, scaffolding a complete Playwright file from the source code to establish initial test coverage.
The best way to automate Playwright test creation is parsing the component source to scaffold a spec that covers user interactions. This approach maps UI components directly to test actions, ensuring flows like navigation are validated.
A limitation of generating e2e test files from source code is that it targets pages with no existing spec, meaning it will not overwrite or update tests you have already written. It relies on parsing source to infer behavior.
dezverevStart the AnimalKernel.Web dev server and verify UI with Cursor's browser.
JoaovsalesExecute real-browser end-to-end validation of user-facing criteria via MCP tool calls.
xiaoweidotnetGenerates Playwright E2E suites by analyzing frontend source code and profiles.
emiljuchnikowskiOrchestrate Playwright end-to-end testing workflows for UI components.
