skills.rest
joelklabo
joelklaboCOMMUNITY
Explore all skills by this author →
Website𝕏@joelklaboGitHub

sketch-playwright-qa

Standardize Playwright QA runs for mobile flows and visual baselines.

Updated Dec 31, 2025
Search Tags:#qa#playwright#e2e testing#visual regression#snapshots#test-results#port conflicts
One-click install
npx skills add https://github.com/joelklabo/markdowntown-cli --skill sketch-playwright-qa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch-playwright-qa
Source: https://github.com/joelklabo/markdowntown-cli/tree/main/codex/skills/sketch-playwright-qa
Command: npx skills add https://github.com/joelklabo/markdowntown-cli --skill sketch-playwright-qa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill documents a reproducible Playwright QA workflow to stabilize mobile flow and visual baseline tests, reduce flakiness caused by port conflicts or timing issues, and make snapshot updates and trace review consistent and auditable.

Core Features & Use Cases

  • Deterministic test invocation: Guidance on selecting a clean PLAYWRIGHT_PORT and running the correct e2e spec to avoid conflicting dev servers.
  • Failure investigation: Steps to locate and review traces, videos, and screenshots in test-results for flaky WebKit/Chromium runs.
  • Snapshot management: Advice on when and how to update visual snapshots and capture evidence in the standard qa-verification format.
  • Use Case: Reproduce a mobile-flow failure on an isolated port, gather trace and video artifacts, and update visual baselines after a vetted UI change.

Quick Start

Start a clean Playwright run by setting PLAYWRIGHT_PORT to an unused port and executing the e2e test for the desired spec.

Frequently Asked Questions about sketch-playwright-qa

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

FAQPage Schema
How do I fix Playwright port conflicts during e2e test runs?▼

Playwright port conflicts occur when multiple dev servers target the same port. Selecting a dedicated, unused PLAYWRIGHT_PORT before executing your e2e spec ensures the test runs against an isolated server instance.

How do I update Playwright visual snapshots after a UI change?▼

Update Playwright visual snapshots by re-running the e2e spec with the --update-snapshots flag after vetting the UI change. This captures new visual baselines for your regression suite.

Where are Playwright trace and video artifacts stored for flaky test debugging?▼

Playwright trace, video, and screenshot artifacts are stored in the test-results directory. Inspecting these artifacts helps diagnose flaky WebKit or Chromium runs during failure investigation.

What is the best way to reproduce a flaky mobile flow test in Playwright?▼

Reproduce flaky mobile flow tests by assigning a clean PLAYWRIGHT_PORT and executing the specific e2e spec. This isolates the run from conflicting dev servers to ensure deterministic test invocation.

When should I update visual baselines in Playwright?▼

Update visual baselines when intentional UI changes occur. Run the e2e spec with --update-snapshots and capture evidence in the standard qa-verification format to maintain auditable regression tests.

Does this Playwright QA workflow support both WebKit and Chromium debugging?▼

Yes, the workflow supports reviewing failure artifacts for both WebKit and Chromium runs. You can inspect traces, videos, and screenshots under test-results to debug flaky tests across browsers.

Related Skills

Explore More Software Engineering Skills→
first-flukefirst-fluke
218

backend-development

Build Python backends with FastAPI, PostgreSQL, and Redis.

Official
Intermediate
rwc9urwc9u

debug-ci-failure

Diagnose CircleCI failures using Datadog test visibility data.

Community
Advanced
cartridge-ggcartridge-gg
80

update-storybook-snapshots

Update Storybook visual regression snapshots after intentional UI changes.

Official
Intermediate
LambdaTestLambdaTest
350

playwright-skill

Generate Playwright E2E tests in TypeScript, JavaScript, Python, Java, or C#.

Official
Advanced