skills.rest
HazAT
HazATCOMMUNITY
Explore all skills by this author →
Website𝕏@DanielGriGitHub

visual-tester

Visually test web UIs via Chrome CDP for layout, interaction, and responsive issues.

437|40|Updated Jan 31, 2026
Search Tags:#web development#responsive design#qa#visual testing#ui testing#chrome cdp
One-click install
npx skills add https://github.com/HazAT/pi-config --skill visual-tester-hazat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-tester
Source: https://github.com/HazAT/pi-config/tree/main/skills/visual-tester
Command: npx skills add https://github.com/HazAT/pi-config --skill visual-tester-hazat

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps identify visual defects and inconsistencies in web user interfaces by systematically testing layouts, interactions, and responsiveness across different viewports and states.

Core Features & Use Cases

  • Visual Regression Testing: Capture screenshots to detect unintended visual changes.
  • Cross-Browser/Device Testing: Simulate various screen sizes and device metrics.
  • Interaction Testing: Verify UI behavior after user actions like clicks and form submissions.
  • Use Case: Before releasing a new feature, use this Skill to perform a visual QA pass on the staging environment, ensuring the UI looks and behaves as expected on mobile, tablet, and desktop.

Quick Start

Use the visual-tester skill to take a screenshot of the current tab and save it to /tmp/screenshot.png.

Frequently Asked Questions about visual-tester

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

FAQPage Schema
How do I visually test web UIs for responsive design problems?▼

You can visually test web UIs by using Chrome CDP to capture screenshots, analyze accessibility snapshots, and simulate interactions across different viewports to identify layout issues and interaction bugs.

What is visual regression testing and how does it detect unintended UI changes?▼

Visual regression testing captures screenshots of web user interfaces to detect unintended visual changes, systematically testing layouts, interactions, and responsiveness across different viewports and states.

Do I need Chrome with remote debugging enabled to test web user interfaces?▼

Yes, testing web user interfaces requires Chrome with remote debugging enabled and a specific target tab to be specified, allowing the tool to analyze UI elements through Chrome CDP.

Can I simulate various screen sizes and device metrics for cross-device testing?▼

Yes, cross-device testing simulates various screen sizes and device metrics to verify UI behavior after user actions like clicks and form submissions across mobile, tablet, and desktop viewports.

What's the best way to perform a visual QA pass on a staging environment?▼

Perform a visual QA pass on staging by capturing screenshots to detect visual defects, simulating user interactions, and verifying responsive design across mobile, tablet, and desktop viewports before releasing.

Why does visual testing require a specific target tab in Chrome?▼

Visual testing requires a specific target tab because Chrome CDP needs a designated target to connect to, enabling it to capture screenshots, analyze accessibility snapshots, and simulate interactions.

Related Skills

Explore More Software Engineering Skills→
liutao96liutao96

chrome-cdp

Control a local Chrome session via CDP for debugging and automation.

Community
Advanced
viably-labsviably-labs

playwright-screenshot-inspector

Analyze Playwright screenshots to validate UI rendering accuracy semantically.

Official
Advanced
CivicActionsCivicActions
2

responsive-design

Validate responsive web components against project-specific design system breakpoints.

Official
Intermediate
NVIDIA-OmniverseNVIDIA-Omniverse
51

omniverse-ui-inspector

Inspect and automate standalone ovui applications via a FastAPI inspector.

Official
Advanced