skills.rest
bruno-garcia
bruno-garciaCOMMUNITY
Explore all skills by this author →
Website𝕏@brungarcGitHub

visual-tester

Test web UIs with Playwright and generate severity-ranked visual reports.

1|1|Updated Feb 14, 2026
Search Tags:#web development#screenshots#qa#playwright#visual testing#ui testing
One-click install
npx skills add https://github.com/bruno-garcia/pi-config --skill visual-tester
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-tester
Source: https://github.com/bruno-garcia/pi-config/tree/main/skills/visual-tester
Command: npx skills add https://github.com/bruno-garcia/pi-config --skill visual-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of visually verifying web UI correctness and identifying layout, interaction, and responsiveness issues that automated functional tests might miss.

Core Features & Use Cases

  • Automated Visual QA: Uses Playwright to navigate web pages, take labeled screenshots, and interact with elements to spot visual defects.
  • Comprehensive Reporting: Generates structured reports detailing findings categorized by severity (P0-P3).
  • Use Case: A developer can use this skill to perform a quick visual sanity check on a new feature before merging, ensuring no unexpected visual regressions have been introduced.

Quick Start

Use the visual-tester skill to take a labeled screenshot of the current page.

Frequently Asked Questions about visual-tester

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

FAQPage Schema
How do I automate visual testing for web UIs using Playwright?▼

Automate visual testing by using Playwright to navigate web pages, interact with elements, and capture labeled screenshots to identify layout anomalies and visual regressions. It generates detailed quality assurance reports.

What is automated visual testing and when do I need it for web development?▼

Automated visual testing verifies web UI correctness by capturing screenshots across viewports to catch layout and interaction bugs that functional tests miss. You need it to prevent unexpected visual regressions before merging features.

Can I detect responsive design flaws across different viewports with visual testing?▼

Yes, visual testing leverages Playwright browser automation to capture screenshots across various viewports, identifying responsive design flaws and layout anomalies to ensure consistent rendering on all screen sizes.

How are visual defects categorized in automated UI testing reports?▼

Visual defects are categorized by severity in structured quality assurance reports, ranked from P0 to P3. This helps developers prioritize layout anomalies and interaction bugs found during the screenshotting process.

Does visual testing find interaction bugs or only layout anomalies?▼

Visual testing finds both layout anomalies and interaction bugs. By leveraging Playwright for interaction analysis alongside screenshotting, it identifies responsive design flaws and unexpected visual regressions during web UI verification.

What's the best way to perform a visual sanity check before merging a new feature?▼

Perform a visual sanity check by automating Playwright to navigate the new feature, take labeled screenshots, and analyze interactions. This identifies any unexpected visual regressions introduced before merging the code.

Related Skills

Explore More Software Engineering Skills→
JamesPrialJamesPrial
1

playwright-mcp

Control browsers programmatically via Playwright MCP for automation and testing.

Community
Intermediate
cslsoftwarescslsoftwares

quality-bug-triage

Convert informal bug reports into structured tickets with severity and reproduction steps.

Community
Intermediate
JesusFigueroa25JesusFigueroa25

e2e-testing

Automate end-to-end web application testing with Playwright, including visual regression and CI/CD integration.

Community
Advanced
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced