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

•

보안 및 테스팅

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

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.

주요 기능

01Guidance on identifying high-value screenshot opportunities in user flows

02Standardized naming conventions for organized and searchable test suites

037 GitHub stars

04Recommendations for setting optimal pixel comparison thresholds

05Technical strategies for stabilizing screenshots by mocking dynamic data

06Best practices for disabling animations to prevent flakiness

사용 사례

01Debugging and fixing flaky visual tests in a CI/CD pipeline

02Integrating visual regression checks into existing functional test suites

03Establishing 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

주요 기능

01Guidance on identifying high-value screenshot opportunities in user flows

02Standardized naming conventions for organized and searchable test suites

037 GitHub stars

04Recommendations for setting optimal pixel comparison thresholds

05Technical strategies for stabilizing screenshots by mocking dynamic data

06Best practices for disabling animations to prevent flakiness

사용 사례

01Debugging and fixing flaky visual tests in a CI/CD pipeline

02Integrating visual regression checks into existing functional test suites

03Establishing 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