Playwright UI Flow Verification and Test Repair
Verify browser flows with Playwright, diagnose failures from evidence, and repair tests without hiding application bugs.
Before & after
Same prompt, same agent — the only difference is the skill.
Testing checkout end-to-end is really important but also complex—lots of edge cases and payment flows to handle. You could use Playwright, Cypress, or Selenium depending on your stack. Do you have a testing framework already? What's your tech stack—React, Vue, something else? Are you testing against a staging environment or production-like setup? Once I know more, I can help you design the test strategy.
PLAYWRIGHT TEST SUITE: Checkout Flow TEST COVERAGE (14 scenarios) ✓ Happy path: Add item → enter shipping → enter payment → confirm ✓ Promo code: Apply 20% off, verify total updates ✓ Cart persistence: Close browser, reopen, cart intact ✓ Validation: Missing email → error shown, submit blocked ✓ Payment: Visa, Amex, Apple Pay (3 methods) ✓ Shipping: Standard vs Express, cost updates ✓ Region: US, EU (VAT applied), CA (GST applied) ✓ Inventory: Item sells out mid-flow → flash error ✓ Mobile: Responsive layout on 375x812 viewport ✓ Accessibility: Form labels present, ARIA roles correct ✓ Performance: Checkout loads <2s, no Core Web Vitals breach ✓ Errors: Network 500, payment decline, retry logic ✓ Security: No XSS (payment form isolated), CSRF token present ✓ Race: Simultaneous add to cart from two tabs TEST COMMAND Playwright ran 14 tests across Chromium, Firefox, Safari Result: All green Execution time: 47 seconds Last run: 2 hours ago (auto re-run on main branch) IF FAILURES DETECTED → Playwright screenshots diff before/after → Video recording of failed step (available in CI artifact) → Retry once (network flake handling) → If still failing: block merge until fixed CI INTEGRATION GitHub Actions: test on push to main + PRs Block merge: any test failure Notification: Slack to eng-team on failure
About this skill
Your test timed out, but is the selector stale, the page still loading, or the feature actually broken? This skill uses Playwright to exercise a concrete user journey, collect failure evidence, and make the smallest justified repair while preserving what the test was supposed to prove.
What it does
- Turns a feature request or bug report into browser actions with explicit success conditions.
- Selects scoped, stable locators and waits for observable application state.
- Separates locator failures, timing problems, shared test data, environment failures, and application defects.
- Checks persistence after navigation or reload when a flow claims to save something.
- Repairs tests without removing assertions, masking exceptions, or retrying failures into a green result.
- Reports exactly which flows, browser projects, and repeat runs were executed, with remaining gaps.
What you get
A focused browser verification result, a runnable Playwright test or targeted patch when appropriate, and an evidence-based explanation of any failure. If execution is unavailable, you get the test and exact verification steps, clearly marked as unexecuted.
Best for
Developers checking a UI change before shipping, solo builders adding coverage to a critical flow, and teams investigating broken or intermittent Playwright tests.
SKILL.md preview
---
name: playwright-ui-flow-verification-and-test-repair
description: >-
Verifies concrete user journeys with Playwright and repairs failing tests by inspecting browser evidence, classifying the failure, and preserving meaningful assertions. Use when the user says "check this flow in the browser", "verify checkout still works", "write a Playwright test for this feature", "fix this failing browser test", "my test keeps timing out", "this passes locally but fails in CI", or "reproduce this UI bug".
---
# Playwright UI Flow Verification and Test Repair
… (sign up to view the full skill)More development skills
View all Development skills →React and Next.js Regression Test Coverage
Generate React and Next.js tests with Jest, Testing Library, MSW, and Playwright, prioritized by regression risk.
Playwright E2E Tests and Flake Repair
Build reliable Playwright tests, repair flakes from evidence, migrate suites, and configure faster, diagnosable CI.
Pre-Ship Verification for Code Changes
Before calling a code change done, Claude grades every claim by evidence, tries to break it, and reports what's verified vs assumed.
TestRail Case and CI Result Sync
Sync automated tests to TestRail cases and scoped runs with stable mappings, retry handling, and verified result counts.