skills.rest
biztechprogramming
biztechprogrammingCOMMUNITY
Explore all skills by this author →
GitHub

visual-ui-test

Capture and compare Playwright UI screenshots to detect visual regressions.

2|Updated Feb 19, 2026
Search Tags:#automation#frontend#playwright#screenshot#visual-testing#ui-regression
One-click install
npx skills add https://github.com/biztechprogramming/bond --skill visual-ui-test
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-ui-test
Source: https://github.com/biztechprogramming/bond/tree/main/skills/visual-ui-test
Command: npx skills add https://github.com/biztechprogramming/bond --skill visual-ui-test

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, Pillow, and includes scripts (resource) components.

What problem does it solve?

Visually verify UI/CSS/layout changes using Playwright screenshots. Use when making any frontend change that affects layout, styling, scrolling, overflow, or visual appearance. Triggers on UI fixes, CSS changes, component layout work, "verify the UI", "take a screenshot", "check how it looks". Required before committing any visual change.

Core Features & Use Cases

  • Take screenshots of the Bond frontend to verify UI/CSS/layout changes work correctly.
  • Workflow includes starting the dev environment, capturing before/after screenshots, and optionally comparing diffs to validate changes.
  • Use case: verify responsive layouts and visual regressions in frontend after changes.

Quick Start

Start the visual UI test by running scripts/start-dev-env.sh and then capture before/after screenshots to compare changes.

Frequently Asked Questions about visual-ui-test

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

FAQPage Schema
How do I detect visual regressions in frontend UI after CSS changes?▼

Detect visual regressions by capturing before and after Playwright screenshots of your frontend UI, then comparing the diff visualization to validate layout and styling consistency. This automated visual testing ensures component appearance remains unchanged after modifications.

Can I capture element-specific screenshots instead of full-page UI captures?▼

Yes, screenshot capture supports both full-page and element-specific UI captures. You can configure Playwright viewport sizes and use wait-for selectors to target specific components, ensuring precise visual regression testing for localized frontend changes.

What's the best way to automate UI regression testing across multiple viewport sizes?▼

Automate UI regression testing by running Playwright screenshot workflows with configurable viewport sizes. Capture baseline and updated frontend screenshots across different screen dimensions, then generate diff visualizations to identify responsive layout failures.

Do I need Playwright and Pillow to run automated visual testing workflows?▼

Yes, Playwright and Pillow are required dependencies for running automated visual testing workflows. Playwright handles browser automation and screenshot capture, while Pillow supports image processing for generating the visual diff visualization.

When should I run a visual UI test during frontend development iteration?▼

Run a visual UI test when making any frontend change affecting layout, styling, scrolling, overflow, or visual appearance. Trigger automated screenshot capture during UI fixes, CSS changes, component layout work, and before committing any visual modification.

Related Skills

Explore More Software Engineering Skills→
yeeehaoooyeeehaooo

webapp-testing

Automate local web app testing workflows with Playwright Python scripts and a server helper orchestrator.

Community
Intermediate
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced
Spectra29115Spectra29115

testing

Execute automated end-to-end UI tests with Playwright and capture screenshots.

Community
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced