Security Visual Testing

What it does

This skill enables AI agents to perform security-aware visual testing of web pages. It leverages the qe-browser toolchain and the Vibium engine for browser automation, incorporating checks for prompt injection vulnerabilities before screenshots are stored and performing typed assertions including detection of data-leak requests. The goal is to identify and mitigate potential security risks while ensuring visual consistency across different viewports.

When to use it

• Testing login pages: These pages often contain sensitive information like passwords and emails that require careful handling.
• Running a visual regression suite: This skill facilitates parallel viewport testing and baseline comparison for detecting visual regressions.
• Testing payment forms: Payment forms frequently involve credit card data, necessitating masking of sensitive information before screenshots are saved.
• Auditing public marketing pages: Use when there's a possibility of sensitive data being displayed on publicly accessible web pages.
• Not suitable for API-only testing: For security testing of APIs, use the dedicated "security-testing" skill instead.

Key capabilities

• URL Validation: Blocks malicious URLs before navigation by preventing javascript:, data:, and file: schemes.
• PII Detection: Identifies and flags over six types of sensitive Personally Identifiable Information (PII).
• Parallel Viewports: Tests web pages across four different viewport sizes simultaneously for faster testing.
• Visual Regression: Performs pixel-by-pixel comparisons with a configurable threshold to detect visual changes.
• Accessibility Audit: Evaluates compliance with WCAG 2.1 accessibility guidelines (A/AA/AAA).
• Prompt Injection Scanning: Scans page content for prompt injection patterns before screenshots are stored using check-injection.js.

Example prompts

• "Run a security visual audit on https://example.com, including accessibility checks."
• "Perform visual regression testing with baseline comparison for the login page."
• "Test the payment form and ensure credit card data is masked before taking screenshots."

Tips & gotchas

• PII Masking: Always mask PII (like emails, phone numbers, or credit card details) before storing any screenshots.
• Viewport Coverage: Ensure testing covers all target viewports to catch visual issues across different devices.
• Baseline Management: Store baselines in version control for reliable regression testing.