skills.rest
cockroachdb
cockroachdbOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-visual-regression

Compare screenshots and network requests between UI branches using roachprod, playwright-cli, and ImageMagick.

32.4k|4.1k|Updated Feb 6, 2014
Search Tags:#ci/cd#playwright#ui testing#automated testing#visual regression#cockroachdb
One-click install
npx skills add https://github.com/cockroachdb/cockroach --skill ui-visual-regression-cockroachdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-visual-regression
Source: https://github.com/cockroachdb/cockroach/tree/main/pkg/ui/.claude/skills/ui-visual-regression
Command: npx skills add https://github.com/cockroachdb/cockroach --skill ui-visual-regression-cockroachdb

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prevents unintended visual or behavioral regressions in the CockroachDB UI by automating visual comparison tests against a baseline.

Core Features & Use Cases

  • Automated Visual Testing: Captures screenshots of UI components and compares them against a previous version.
  • Network Request Diffing: Analyzes differences in API calls made by the UI.
  • Use Case: After a developer makes changes to the database console, this Skill can be run to ensure that no UI elements have broken visually or that critical data fetching requests are still functioning as expected.

Quick Start

Run the ui-visual-regression skill to test UI changes against the merge base.

Frequently Asked Questions about ui-visual-regression

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

FAQPage Schema
How do I automate visual regression testing for UI changes?▼

Automate visual regression testing by capturing screenshots of UI components and comparing them against a previous version to detect unintended visual or behavioral regressions automatically.

What is visual regression testing and when do I need it for my database console?▼

Visual regression testing is the process of comparing current UI screenshots against a baseline to catch visual breaks. You need it after making changes to the database console to ensure UI elements remain visually intact.

Can I compare network requests and API calls during automated UI testing?▼

Yes, you can compare network requests during automated UI testing by analyzing differences in API calls made by the UI between the current branch and its merge base.

Does Playwright work with ImageMagick for visual comparison in CI/CD pipelines?▼

Playwright works with ImageMagick in CI/CD pipelines by using Playwright to capture UI screenshots and ImageMagick to process and compare those images for visual regression detection.

What's the best way to prevent unintended visual regressions in CockroachDB UI updates?▼

The best way to prevent unintended visual regressions is to run automated visual comparison tests that capture screenshots and validate network requests against the merge base before merging changes.

Why does my database console UI break visually after making code changes?▼

Your database console UI breaks visually because code changes can alter component rendering. Running automated visual regression testing compares current screenshots against a baseline to detect these breaks immediately.

Related Skills

Explore More Software Engineering Skills→
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate
jmaglyjmagly
175

regression-visual

Detect visual and UI regressions via automated screenshot comparison and pixel-diff analysis.

Community
Advanced
shirulotshirulot

playwright

Automate browser interactions and UI workflows via a terminal-based CLI.

Community
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate