sketch-playwright-qa

joelklabo's avatarfrom joelklabo

Playwright QA workflow for Sketch Magic. Use when running mobile flow tests, visual baselines, snapshot updates, or debugging flaky WebKit/Chromium runs and port conflicts.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026⬇️1downloads
[Testing and QA]

When & Why to Use This Skill

This Claude skill provides a standardized Playwright QA workflow designed for Sketch Magic, streamlining end-to-end (E2E) testing processes. It automates mobile flow validation, visual regression testing, and snapshot management, while offering structured guidance for debugging flaky WebKit/Chromium runs and resolving environment-specific port conflicts.

Use Cases

  • Mobile Flow Validation: Running automated E2E tests specifically for mobile user journeys to ensure functional consistency across devices.
  • Visual Regression Testing: Establishing and maintaining visual baselines to detect unintended UI changes and ensure design integrity.
  • Automated Snapshot Updates: Efficiently updating test snapshots during intentional UI refactors using standardized command-line flags.
  • Flakiness Debugging: Analyzing trace files and video artifacts from failed runs to identify and fix timing issues or animation-related test failures.
  • Environment Conflict Resolution: Managing specific port assignments (e.g., 3020-3030) to prevent interference between concurrent test suites.
namesketch-playwright-qa
descriptionPlaywright QA workflow for Sketch Magic. Use when running mobile flow tests, visual baselines, snapshot updates, or debugging flaky WebKit/Chromium runs and port conflicts.

Sketch Playwright QA

Overview

Standardize Playwright test runs for mobile flow and visual baselines, including snapshot updates and trace review.

Quick Start

  • Mobile flow: PLAYWRIGHT_PORT=3020 pnpm test:e2e tests/e2e/mobile-flow.spec.ts
  • Visual baselines: PLAYWRIGHT_PORT=3021 pnpm test:e2e tests/e2e/visual.spec.ts
  • Update snapshots: append --update-snapshots

Workflow

1) Pick a port

  • Use a clean port (e.g., 3020–3030) to avoid conflicts.
  • Set PLAYWRIGHT_PORT in the command.

2) Run required suites

  • Mobile flow: tests/e2e/mobile-flow.spec.ts
  • Visual baselines: tests/e2e/visual.spec.ts

3) Handle failures

  • Review trace/video artifacts under test-results/.
  • If a snapshot mismatch is expected, re-run with --update-snapshots.
  • If flakiness appears, check animations or timing.

4) Record evidence

  • Keep a short log of commands + ports used.
  • Capture failing screenshots/videos when needed.
  • Use qa-verification for the standard evidence format.

References

  • references/playwright-workflow.md — exact commands, snapshot guidance, and troubleshooting.