visual-testing-advanced

The visual-testing-advanced skill provides a robust framework for automated UI verification, designed for quality engineers and frontend developers who need to detect layout shifts, styling regressions, and component rendering issues. By moving beyond basic functional assertions, this tool creates a visual contract for your application, allowing agents to identify subtle bugs like font rendering errors, unexpected padding changes, or broken image assets that automated test suites often miss. It is specifically engineered to handle complex frontend environments where responsive design, dynamic content, and cross-browser discrepancies are common.

The toolchain supports two primary workflows: a fast, lightweight pixel-diff engine using WebDriver BiDi for Chrome, and a fallback to Playwright for more complex requirements like AI-powered semantic analysis, cross-browser testing (Firefox/WebKit), or deep integration into existing Playwright test suites. The agent can automatically manage baseline storage, mask dynamic elements such as timestamps or user-specific content to reduce false positives, and validate multiple viewports in a single execution. This creates a reliable visual gating mechanism for CI/CD pipelines.

• Automated baseline creation and management in .aqe/visual-baselines/.
• Precise pixel-by-pixel comparison with threshold configuration for sensitivity tuning.
• AI-powered semantic comparison via Percy or Applitools to ignore anti-aliasing and font-rendering drift.
• Intelligent masking capabilities for dynamic DOM elements like advertisements, user counters, or live timestamps.
• Cross-device validation supporting desktop, tablet, and mobile viewports.
• Native support for integrating into CI/CD workflows, providing non-zero exit codes upon visual regression detection.
• Flexible configuration options for maxDiffPixels, maxDiffPixelRatio, and color similarity thresholds.
• Use as a specialized tool for validating responsive design, CSS modifications, and UI component consistency across browser engines.
• Input typically involves target URLs, specific CSS selectors for component-level testing, and viewport dimensions.
• Output generates detailed diff images and test reports, facilitating quick triaging of visual bugs compared to previous verified baselines.