skills.rest
mizchi
mizchiCOMMUNITY
Explore all skills by this author →
Website𝕏@mizchiGitHub

spec-to-playwright

Generates deterministic Playwright tests from natural-language specs with VRT baselines and self-healing.

22|1|Updated Mar 30, 2026
Search Tags:#test generation#playwright#vite#e2e testing#self-healing tests#visual regression testing#ci automation
One-click install
npx skills add https://github.com/mizchi/vlmkit --skill spec-to-playwright-mizchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spec-to-playwright
Source: https://github.com/mizchi/vlmkit/tree/main/.apm/skills/vlmkit/workflows/spec-to-playwright
Command: npx skills add https://github.com/mizchi/vlmkit --skill spec-to-playwright-mizchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mizchi/vlmkit-heal, @playwright/test, tsx, and includes assets (resource) components.

What problem does it solve? Writing Playwright tests from a product spec is slow, and visual regression tests are notoriously flaky across environments. This Skill turns a natural-language spec into reproducible Playwright tests with byte-stable screenshot baselines, CI-driven baseline management, and a bounded self-healing loop for tests that drift from the UI. ## Core Features & Use Cases - Spec-to-test pipeline: Uses the official Playwright planner/generator agents (or the vlmkit-plan/vlmkit-generate CLIs) to explore the live app and author tests that follow strict generation rules (role/testid selectors, gotoApp() helper, screenshot checkpoints). - Deterministic VRT layer: Ships a playwright.config preset, _helpers.ts, and CI workflows that fix viewport, locale, timezone, and fonts, with CI as the single source of truth for baselines via an update-baselines workflow. - Bounded heal loop: @mizchi/vlmkit-heal classifies failures as intentional change vs regression using a reasoning VLM, updates baselines only on verified accepts, and caps cost with a USD budget and tiered models. - Use Case: You have a user story for a checkout flow. The Skill plans the scenario against the running app, generates tests/checkout.spec.ts, renders baselines in CI, verifies two consecutive green runs, and later auto-heals the test when the UI intentionally changes. ## Quick Start Ask the agent to turn your user story into a deterministic Playwright test by planning against the running app, generating the spec, and verifying it passes twice in CI.

Frequently Asked Questions about spec-to-playwright

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

FAQPage Schema
How do I generate Playwright tests from a natural-language spec?▼

Run the Playwright planner agent with your user story and a seed test so it explores the live app and writes a spec file, then invoke the generator agent to produce the test following the generation rules. Alternatively use the vlmkit-plan and vlmkit-generate CLIs with a provider like Anthropic.

How do I make Playwright toHaveScreenshot tests deterministic?▼

Fix viewport, deviceScaleFactor, colorScheme, locale, and timezone in the config, disable animations and caret via a gotoApp helper, wait for fonts, and serve the app with vite build plus preview instead of the dev server. Render baselines only in CI so they match one OS and architecture.

Why do my Playwright VRT snapshots fail locally but pass in CI?▼

Pixel baselines are tied to the OS and architecture that rendered them, so locally rendered snapshots (e.g. macOS) will not match CI-rendered Linux baselines. Do not commit local snapshots; run the update-baselines workflow in CI when a change is intentional.

Can I use this pipeline without the official Playwright test agents?▼

Yes. Use the vlmkit-plan and vlmkit-generate CLIs, which produce the same planner- and generator-shaped artifacts with diagnostics-driven retries. You can also perform the same steps by hand: explore the app, write the spec, adjust the seed test, and author the test following the generation rules.

How does the self-healing loop decide between regression and intentional change?▼

The heal engine uses a reasoning VLM to judge the VRT diff against git context or an explicit expectedChange declaration. Accepts above the confidence threshold trigger a baseline update, and a stronger model re-confirms accepts by default before any baseline is touched.

What are the limitations of this spec-to-test pipeline?▼

It assumes a Vite app served via build and preview, requires Node 24 and Playwright, and needs an OpenRouter, Anthropic, or Gemini API key for heal and VRT review features. It is not intended for one-off edits to a single existing test.

Related Skills

Explore More Software Engineering Skills→
etewiahetewiah
635

e2e-testing

Automate Playwright E2E tests and Lighthouse audits in CI/CD.

Community
Intermediate
FradSerFradSer
588

review-pr

Reviews pull requests and monitors CI and reviewer comments until merge-ready.

Community
Advanced
scsm-unrestrictscsm-unrestrict
1

design-to-code

Converts design mockups and screenshots into HTML/CSS or framework component code.

Community
Intermediate
pnewsampnewsam
1

setup-browser-testing

Initialize or repair Playwright or Cypress browser-test infrastructure for Node projects.

Community
Advanced