New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Visual Testing Advanced

by proffesor-for-testing in proffesor-for-testing/agentic-qe

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency.

MITAuto-check passedTesting & QA

Install Visual Testing Advanced

skills CLI
$ npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install proffesor-for-testing/agentic-qe visual-testing-advanced --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/proffesor-for-testing/agentic-qe.git skills-src && mkdir -p .claude/skills && cp -r skills-src/assets/skills/visual-testing-advanced .claude/skills/visual-testing-advanced && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
visual-testing-advanced
GitHub stars
494
Token cost
~2k tokens
SKILL.md length
382 words
Files
4 (incl. scripts)
Skills in repo
95
Repo updated
First seen
Licence
MIT

At a glance

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency.

  • Works in 5 steps: CAPTURE baseline screenshots (first run… → COMPARE new screenshots against baseline… → MASK dynamic content (timestamps, ads,… → …
  • Detecting UI regressions
  • SKILL.md covers Quick Reference Card, PRIMARY PATH: qe-browser…, LEGACY: Visual Regression with… and Handling Dynamic Content, plus 6 more sections
  • Calls node

What it does

Visual Testing Advanced is an agent skill from proffesor-for-testing/agentic-qe. Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts (for example `evals/visual-testing-advanced.yaml`, `schemas/output.json` and `scripts/validate-config.json`).

It sits in Testing & QA, covering Visual regression testing. It works with Playwright. The repository describes itself as: Agentic QE Fleet is an open-source AI-powered QA/QE platform designed for use with Coding Agents (works best with Claude Code) featuring specialized agents and skills to support… The licence is MIT.

When your agent uses it

  • Detecting UI regressions
  • Validating designs
  • Ensuring visual consistency

Example prompts

  • “/visual-testing-advanced”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. CAPTURE baseline screenshots (first run establishes baseline)
  2. COMPARE new screenshots against baseline (pixel-by-pixel or AI)
  3. MASK dynamic content (timestamps, ads, user counts)
  4. TEST across devices (desktop, tablet, mobile viewports)
  5. REVIEW and approve intentional changes, fail on regressions

What it can do on your machine

Read from SKILL.md and the folder at commit 829d030. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Visual Testing Advanced loads about 2k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 382 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from proffesor-for-testing/agentic-qe at commit 829d030, republished under its MIT licence (© proffesor-for-testing). 382 words, ~2,032 tokens.

Download SKILL.mdSave it as .claude/skills/visual-testing-advanced/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
visual-testing-advanced
description
Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency.
category
specialized-testing
priority
high
tokenEstimate
900
agents
qe-visual-tester, qe-test-executor, qe-quality-gate
implementation_status
optimized
optimization_version
1
last_optimized
2025-12-02
quick_reference_card
true
tags
visual, regression, screenshot, pixel-diff, percy, playwright, responsive
trust_tier
3

Advanced Visual Testing

<default_to_action> When detecting visual regressions or validating UI:

  1. CAPTURE baseline screenshots (first run establishes baseline)
  2. COMPARE new screenshots against baseline (pixel-by-pixel or AI)
  3. MASK dynamic content (timestamps, ads, user counts)
  4. TEST across devices (desktop, tablet, mobile viewports)
  5. REVIEW and approve intentional changes, fail on regressions

Quick Visual Testing Steps:

  • Set up baseline on main branch
  • Compare feature branch against baseline
  • Mask dynamic elements (timestamps, avatars)
  • Use AI-powered comparison to reduce false positives
  • Integrate in CI/CD to block visual regressions

Critical Success Factors:

  • Functional tests don't catch visual bugs
  • AI-powered tools reduce false positives
  • Review diffs, don't just auto-approve </default_to_action>

Quick Reference Card

When to Use
  • UI component changes
  • CSS/styling modifications
  • Responsive design validation
  • Cross-browser consistency checks
Visual Bug Types
Bug TypeDescription
Layout shiftElements moved position
Color changeUnintended color modification
Font renderingTypography issues
AlignmentSpacing/alignment problems
Missing imagesBroken image paths
OverflowContent clipping
Comparison Algorithms
AlgorithmBest For
Pixel diffExact match requirement
Structural similarityHandle anti-aliasing
AI semanticIgnore insignificant changes

PRIMARY PATH: qe-browser visual-diff

Most visual regression work should go through the qe-browser fleet skill. It wraps Vibium (WebDriver BiDi) and provides pixel-diff against stored baselines with threshold enforcement and diff-image output. See .claude/skills/qe-browser/SKILL.md.

bash
# Navigate
vibium go https://example.com
vibium wait load

# First run — creates baseline in .aqe/visual-baselines/homepage.png
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage

# Subsequent runs — compare, non-zero exit on mismatch
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage --threshold 0.02

# Scope to a single region
node .claude/skills/qe-browser/scripts/visual-diff.js --name hero --selector "#hero"

# Responsive — run diff at each breakpoint
for viewport in "375 667" "768 1024" "1920 1080"; do
  read w h <<< "$viewport"
  vibium viewport $w $h
  node .claude/skills/qe-browser/scripts/visual-diff.js --name "homepage-${w}x${h}"
done

# Reset baseline after an intentional design change
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage --update-baseline

Baselines live in .aqe/visual-baselines/. The script uses pixelmatch when installed, with a hash-based exact-match fallback otherwise. Non-zero exit when similarity < 1 - threshold, so CI gating is $?-based.

Show full SKILL.md (147 more words)Show less
When to keep Playwright visual regression

Use the Playwright recipe below only when you need:

  • AI semantic comparison (Percy, Applitools) to ignore insignificant pixel drift
  • Cross-browser rendering checks in Firefox/WebKit (Vibium is Chrome-only today)
  • Tight integration with an existing Playwright test suite

LEGACY: Visual Regression with Playwright (fallback)

javascript
import { test, expect } from '@playwright/test';

test('homepage visual regression', async ({ page }) => {
  await page.goto('https://example.com');

  // Capture and compare screenshot
  await expect(page).toHaveScreenshot('homepage.png');
  // First run: saves baseline
  // Subsequent runs: compares to baseline
});

test('responsive design', async ({ page }) => {
  // Mobile viewport
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('homepage-mobile.png');

  // Tablet viewport
  await page.setViewportSize({ width: 768, height: 1024 });
  await expect(page).toHaveScreenshot('homepage-tablet.png');
});

Handling Dynamic Content

javascript
test('mask dynamic elements', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page).toHaveScreenshot({
    mask: [
      page.locator('.timestamp'),     // Dynamic time
      page.locator('.user-count'),    // Live counter
      page.locator('.advertisement'), // Ads
      page.locator('.avatar')         // User avatars
    ]
  });
});

AI-Powered Visual Testing (Percy)

javascript
import percySnapshot from '@percy/playwright';

test('AI-powered visual test', async ({ page }) => {
  await page.goto('https://example.com');

  // Percy uses AI to ignore anti-aliasing, minor font differences
  await percySnapshot(page, 'Homepage');
});

test('component visual test', async ({ page }) => {
  await page.goto('https://example.com/components');

  // Snapshot specific component
  const button = page.locator('.primary-button');
  await percySnapshot(page, 'Primary Button', {
    scope: button
  });
});

Playwright Configuration

javascript
// playwright.config.js
export default {
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 100,      // Allow 100 pixel difference
      maxDiffPixelRatio: 0.01, // Or 1% of image
      threshold: 0.2,          // Color similarity threshold
      animations: 'disabled',  // Disable animations
      caret: 'hide'            // Hide cursor
    }
  }
};

Agent-Driven Visual Testing

typescript
// Comprehensive visual regression
await Task("Visual Regression Suite", {
  baseline: 'main-branch',
  current: 'feature-branch',
  pages: ['homepage', 'product', 'checkout'],
  devices: ['desktop', 'tablet', 'mobile'],
  browsers: ['chrome', 'firefox', 'safari'],
  threshold: 0.01
}, "qe-visual-tester");

// Returns:
// {
//   comparisons: 27,  // 3 pages × 3 devices × 3 browsers
//   differences: 2,
//   report: 'visual-regression-report.html'
// }

Agent Coordination Hints

Memory Namespace
aqe/visual-testing/
├── baselines/*          - Baseline screenshots
├── comparisons/*        - Diff results
├── components/*         - Component snapshots
└── reports/*            - Visual regression reports
Fleet Coordination
typescript
const visualFleet = await FleetManager.coordinate({
  strategy: 'visual-testing',
  agents: [
    'qe-visual-tester',   // Screenshot comparison
    'qe-test-executor',   // Cross-browser execution
    'qe-quality-gate'     // Block on visual regressions
  ],
  topology: 'parallel'
});

Remember

Functional tests don't catch visual bugs. Layout shifts, color changes, font rendering, alignment issues - all invisible to functional tests but visible to users.

AI-powered tools reduce false positives. Percy, Applitools use AI to ignore insignificant differences (anti-aliasing, minor font rendering).

With Agents: qe-visual-tester automates visual regression across browsers and devices, uses AI to filter noise, and generates visual diff reports. Catches UI regressions before users see them.

© proffesor-for-testing, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (scripts) in assets/skills/visual-testing-advanced of proffesor-for-testing/agentic-qe.

  • SKILL.md
  • evals/visual-testing-advanced.yaml
  • schemas/output.json
  • scripts/validate-config.json

Open the folder on GitHubat commit 829d030

Compare with similar skills

Visual Testing Advanced next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Visual Testing Advanced compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Visual Testing Advanced this skillproffesor-for-testing/agentic-qe494—~2kAutomated safety check: PassMIT
Handsontable Visual Test Demoshandsontable/handsontable22k—~1.3kAutomated safety check: PassCustom licence
Kc Screenshotimran31415/kube-coder388—~870Automated safety check: NotesMIT
Visual Diff Screenshot Comparisonkeybase/client9.3k—~740Automated safety check: PassBSD-3-Clause
Handsontable Visual Testinghandsontable/handsontable22k—~2.3kAutomated safety check: PassCustom licence
UI Visual DebuggingNangoHQ/nango13k—~1.3kAutomated safety check: PassCustom licence

Similar skills

  • Handsontable Visual Test Demos

    handsontable/handsontable

    Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.

    22k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Kc Screenshot

    imran31415/kube-coder

    Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.

    388 GitHub stars~870 tokensUpdated today
    Testing & QAAuto-check: notes

  • Visual Diff Screenshot Comparison

    keybase/client

    Captures baseline and current screenshots of the Keybase desktop app and compares them with ImageMagick to find pixel-level regressions between branches or edits.

    9.3k GitHub stars~740 tokensUpdated today
    Testing & QAAuto-check passed

  • Handsontable Visual Testing

    handsontable/handsontable

    Guide to Playwright visual regression tests in Handsontable: when a screenshot is justified, the tablePage fixture, naming, reg-suit comparison and demo routes.

    22k GitHub stars~2.3k tokensUpdated today
    Testing & QAAuto-check passed

  • UI Visual Debugging

    NangoHQ/nango

    A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.

    13k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Computed Styles

    bitovi/ai-enablement-prompts

    Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.

    121 GitHub stars~2.4k tokensUpdated 27 days ago
    Testing & QAAuto-check passed

More from proffesor-for-testing/agentic-qe

All 95 skills in this repo

  • Contract Testing

    proffesor-for-testing/agentic-qe

    Consumer-driven contract testing for microservices using Pact, schema validation, API versioning, and backward compatibility testing.

    494 GitHub stars~1.8k tokensUpdated 3 days ago
    Auto-check passed

  • Mutation Testing

    proffesor-for-testing/agentic-qe

    Test quality validation through mutation testing, assessing test suite effectiveness by introducing code mutations and measuring kill rate.

    494 GitHub stars~1.7k tokensUpdated 3 days ago
    Auto-check passed

  • Performance Testing

    proffesor-for-testing/agentic-qe

    Profiles application performance under load using k6, Artillery, or JMeter to measure latency, throughput, and error rates.

    494 GitHub stars~2.4k tokensUpdated 3 days ago
    Auto-check passed

  • Code Review Quality

    proffesor-for-testing/agentic-qe

    Conduct context-driven code reviews focusing on quality, testability, and maintainability.

    494 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Security Testing

    proffesor-for-testing/agentic-qe

    Scans for security vulnerabilities including XSS, SQL injection, CSRF, and auth flaws using OWASP Top 10 methodology.

    494 GitHub stars~2.7k tokensUpdated 3 days ago
    Auto-check: notes

  • Database Testing

    proffesor-for-testing/agentic-qe

    Database schema validation, data integrity testing, migration testing, transaction isolation, and query performance.

    494 GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed

Works with

Categories

Questions about Visual Testing Advanced

What does Visual Testing Advanced do?

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Visual Testing Advanced is an agent skill from proffesor-for-testing/agentic-qe. Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency.

When should I use Visual Testing Advanced?

Visual Testing Advanced fits situations like: detecting UI regressions; validating designs; ensuring visual consistency.

How do I install Visual Testing Advanced in Claude Code?

Run `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -a claude-code`. Or copy the skill folder (assets/skills/visual-testing-advanced in proffesor-for-testing/agentic-qe) into .claude/skills/visual-testing-advanced in your project. Claude Code loads it when a task matches its description.

How do I install Visual Testing Advanced in Codex?

Run `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -a codex`. Or copy the skill folder (assets/skills/visual-testing-advanced in proffesor-for-testing/agentic-qe) into .agents/skills/visual-testing-advanced in your project. Codex loads it when a task matches its description.

Can I use Visual Testing Advanced in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-testing-advanced, .gemini/skills/visual-testing-advanced, .github/skills/visual-testing-advanced and .opencode/skills/visual-testing-advanced in your project.

What does Visual Testing Advanced need to run?

Going by SKILL.md and its folder, Visual Testing Advanced needs the command-line tools its instructions call (node).

Does Visual Testing Advanced access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Visual Testing Advanced safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Visual Testing Advanced use?

Visual Testing Advanced is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Visual Testing Advanced use?

About 2k tokens (SKILL.md is roughly 8.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Visual Testing Advanced?

Skills that share tags, products or a category with Visual Testing Advanced: Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Kc Screenshot (imran31415/kube-coder, 388 stars), Visual Diff Screenshot Comparison (keybase/client, 9.3k stars) and Handsontable Visual Testing (handsontable/handsontable, 22k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual Testing Advanced?

proffesor-for-testing (a GitHub user) maintains it in proffesor-for-testing/agentic-qe, which has 494 GitHub stars. The repository holds 95 skills in this directory. The repository was last updated on October 4, 2026.

Source: proffesor-for-testing/agentic-qe on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.