How should I name my visual test screenshots?

Follow the pattern of - - , such as 'login-form-error' or 'homepage-mobile', to ensure they are descriptive, consistent, and easy to sort.

How can I prevent flaky visual tests caused by dynamic content?

The skill recommends waiting for network idle, mocking dates/timestamps, and using CSS overrides to disable animations and transitions before capturing the screenshot.

What is the core philosophy of Vizzly visual testing?

Vizzly focuses on capturing the 'real thing' by taking screenshots during actual functional tests, ensuring integration issues are caught in the same environment users experience.

What is the recommended visual comparison threshold?

Most projects should use a threshold between 0.05% and 0.1% to catch real changes while ignoring minor rendering noise and anti-aliasing artifacts.

Vizzly Visual Testing Philosophy

Name: Vizzly Visual Testing Philosophy
Author: vizzly-testing

byvizzly-testing

•

Security & Testing

Provides expert guidance and best practices for implementing stable, meaningful visual regression tests using Vizzly.

About

This skill equips Claude with the core philosophy and technical best practices for visual testing using the Vizzly CLI. It helps developers identify high-value screenshot opportunities, implement consistent naming conventions, and ensure test stability by handling dynamic content and animations. By focusing on capturing visual states during real functional tests, the skill promotes a robust TDD workflow that catches UI regressions before code is committed, ensuring that what the user sees remains consistent across every deployment.

Key Features

Guidance on identifying high-value screenshot opportunities in user flows
Standardized naming conventions for organized and searchable test suites
7 GitHub stars
Recommendations for setting optimal pixel comparison thresholds
Technical strategies for stabilizing screenshots by mocking dynamic data
Best practices for disabling animations to prevent flakiness

Use Cases

Debugging and fixing flaky visual tests in a CI/CD pipeline
Integrating visual regression checks into existing functional test suites
Establishing a visual testing TDD workflow for frontend development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vizzly-testing/cli visual-testing-philosophy

For use in Claude.ai and ChatGPT

Download Skill

GitHub