Visual Testing Advanced

What it does

This skill, Visual Testing Advanced, automates complex visual regression tests for UI elements. It captures baseline screenshots, compares new screenshots against these baselines using pixel-by-pixel or AI comparison methods, and masks dynamic content like timestamps to improve accuracy. The tool is designed to identify subtle rendering differences across various devices and viewports (desktop, tablet, mobile).

When to use it

Here are some scenarios where this skill would be beneficial:

• After UI component changes have been made.
• When CSS or styling modifications are implemented.
• During responsive design validation to ensure proper display on different screen sizes.
• To check for cross-browser consistency in visual rendering.

Key capabilities

• Baseline Screenshot Capture: Automatically establishes baseline screenshots during the initial run.
• Screenshot Comparison: Compares new screenshots against baselines using pixel-by-pixel or AI algorithms.
• Dynamic Content Masking: Masks dynamic elements (e.g., timestamps, ads) to avoid false positives in comparisons.
• Cross-Device Testing: Supports testing across desktop, tablet, and mobile viewports.
• Comparison Algorithms: Offers pixel diff, structural similarity, and AI semantic comparison algorithms.

Example prompts

Here are some examples of how you might instruct an agent using this skill:

• "Create a baseline visual test for the homepage."
• "Compare the feature branch against the main branch's visual baselines."
• "Run a visual regression test on the login page, masking the timestamp element."

Tips & gotchas

• Baseline Setup: The first run establishes the baseline screenshots. Ensure your UI is in a stable state during this initial setup.
• Integration with qe-browser: Most visual regression testing should be performed through the qe-browser skill, which leverages Vibium (WebDriver BiDi) for pixel-diff comparisons and threshold enforcement. Refer to the qe-browser skill documentation for detailed usage instructions.