# Sketch Playwright QA

> 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.

- Skill: `majiayu000/sketch-playwright-qa` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/sketch-playwright-qa`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/sketch-playwright-qa/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/sketch-playwright-qa

---


# 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.