skills.rest
kevintsai1202
kevintsai1202COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-visual-verification

Detects UI issues via automated scrensing of Bootstrap-based pages.

47|10|Updated May 14, 2026
Search Tags:#automation#playwright#ui-testing#verify#visual-regression#cross-viewport
One-click install
npx skills add https://github.com/kevintsai1202/teaching-site-skills --skill web-visual-verification
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-visual-verification
Source: https://github.com/kevintsai1202/teaching-site-skills/tree/main/web-visual-verification
Command: npx skills add https://github.com/kevintsai1202/teaching-site-skills --skill web-visual-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve?

This skill helps ensure web user interfaces behave correctly by automating runtime verification across multiple viewports, catching runtime errors, and collecting evidence (screenshots and console logs) for regression review.

Core Features & Use Cases

  • Playwright-based runtime verification: drives automated interactions, asserts state, and captures screenshots across devices.
  • Four script roles: Verify, Capture, Diagnose, and Probe to support regression testing, evidence gathering, and quick checks.
  • Multi-viewport testing: validates layout and behavior across desktop, tablet, and mobile sizes, with guidance for CI integration.
  • Evidence and triage: aggregates console errors and DOM snapshots to aid debugging after changes.

Quick Start

Install the skill, configure the target URL, and run the verify suite to start multi-viewport UI checks.

Frequently Asked Questions about web-visual-verification

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

FAQPage Schema
How do I automate visual regression testing across multiple viewport sizes?▼

Automate visual regression testing by running Playwright scripts that interact with your web UI, capture screenshots, and record console errors across desktop, tablet, and mobile viewports.

What is the best way to capture UI evidence and console errors during Playwright automation?▼

Capture UI evidence by executing dedicated Playwright capture scripts that interact with the site, take screenshots, and aggregate console logs alongside DOM snapshots for regression triage.

Does this visual verification approach work with dynamic web UIs and CI integration?▼

Yes, this visual verification approach works with dynamic web UIs by driving automated interactions and asserting state, with explicit guidance for integrating multi-viewport checks into CI.

How do I diagnose UI regressions after capturing screenshots and console logs?▼

Diagnose UI regressions by running specific Playwright diagnose scripts that analyze captured screenshots, console errors, and DOM snapshots to isolate layout and behavior failures.

Can I perform quick UI checks without running a full regression suite?▼

Yes, you can perform quick UI checks by executing probe scripts that run targeted Playwright interactions to verify specific layout and visual states without a full regression suite.

Related Skills

Explore More Software Engineering Skills→
mattleonard16mattleonard16

playwright-browser-automation

Generates Playwright scripts to automate browser testing and UI validation across multiple viewports.

Community
Intermediate
cyalcalacyalcala
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP.

Community
Intermediate
heaptracetechnologyheaptracetechnology
13

visual-regression

Capture and compare UI screenshots against baselines to detect visual regressions.

Community
Advanced
zivtechzivtech

webapp-testing

Automate local web app testing with Playwright and server lifecycle management.

Official
Intermediate