skills.rest
potatsukki
potatsukkiCOMMUNITY
Explore all skills by this author →
GitHub

playwright-browser-testing

Verify UI changes in a browser with Playwright MCP after each code change.

2|Updated Feb 16, 2026
Search Tags:#automation#frontend#regression#playwright#visual-testing#ui-verification
One-click install
npx skills add https://github.com/potatsukki/rmv-web --skill playwright-browser-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-browser-testing
Source: https://github.com/potatsukki/rmv-web/tree/main/.agents/skills/playwright-browser-testing
Command: npx skills add https://github.com/potatsukki/rmv-web --skill playwright-browser-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually verify UI changes in the browser after every code change to ensure the UI matches expectations and to eliminate the need for manual screenshot checks.

Core Features & Use Cases

  • Visual browser verification: Use Playwright MCP to navigate, inspect, and verify the UI in a real browser after each change.
  • Regression and quality checks: Detect visual drift across routes and components during feature development and bug fixes.
  • Accessibility awareness: Surface basic accessibility issues during automated visual tests.

Quick Start

After every code change, run the Playwright browser test workflow to visually verify the UI in the browser.

Frequently Asked Questions about playwright-browser-testing

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

FAQPage Schema
How do I visually verify UI changes in the browser after every commit?▼

Visual UI verification uses Playwright to navigate, inspect, interact, and capture screenshots in a real browser after each code change, ensuring the interface matches expectations without manual screenshot checks.

What's the best way to automate regression checks and detect visual drift during frontend development?▼

Automated regression checks detect visual drift across routes and components by using Playwright to interact with and capture the UI during feature work and bug fixes, surfacing unintended visual changes.

Can I run accessibility scanning alongside automated visual tests?▼

Accessibility scanning runs alongside visual browser verification to surface basic accessibility issues during automated tests, helping identify compliance gaps during feature development and bug fixes.

How does visual browser verification work with Playwright for deterministic tasks?▼

Visual browser verification uses Playwright MCP to navigate, inspect, interact, and capture screenshots for deterministic tasks, applying to frontend web UI development to verify changes after every code modification.

Do I need to manually capture screenshots when checking for visual drift across UI routes?▼

Manual screenshot checks are eliminated; the workflow uses Playwright to automatically navigate and capture the UI across routes and components, detecting visual drift during feature development and bug fixes.

Related Skills

Explore More Software Engineering Skills→
ThedouglerThedougler

webapp-testing

Automate local web app testing with Playwright in Node.js.

Community
Intermediate
JeremiahEllingtonJeremiahEllington

design-review

Audit live sites for visual inconsistencies and fix them with atomic commits.

Community
Advanced
cosmicstack-labscosmicstack-labs
364

e2e-testing

Write stable end-to-end tests for web apps using Playwright and Cypress.

Official
Intermediate
everrunseverruns
42

ui-screenshots

Capture web page screenshots with agent-browser for visual verification.

Official
Intermediate