skills.rest
telum-ai
telum-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-testing-extension

Capture extension UI screenshots with Puppeteer and Playwright for visual regression testing.

2|Updated Dec 21, 2025
Search Tags:#regression testing#playwright#visual testing#puppeteer#ui validation#browser extension
One-click install
npx skills add https://github.com/telum-ai/speck --skill visual-testing-extension
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-testing-extension
Source: https://github.com/telum-ai/speck/tree/main/.cursor/skills/visual-testing-extension
Command: npx skills add https://github.com/telum-ai/speck --skill visual-testing-extension

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the visual validation of browser extensions, ensuring their user interfaces function correctly across different contexts like popups and options pages.

Core Features & Use Cases

  • Automated Visual Testing: Captures screenshots of extension UI elements (popup, options page) for comparison against baselines.
  • Context Handling: Provides patterns for testing extension components within their specific browser environments using Puppeteer and Playwright.
  • Use Case: After updating the UI of your Chrome extension's popup, use this Skill to automatically generate screenshots of the new UI and compare them to ensure no visual regressions have occurred.

Quick Start

Run visual tests for the extension's popup and options page using the provided Puppeteer scripts.

Frequently Asked Questions about visual-testing-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing for a browser extension popup?▼

Automate visual regression testing for browser extension popups by capturing screenshots of the UI elements using provided Puppeteer and Playwright code patterns to compare against baseline images.

Can I test extension UI elements across Chrome, Firefox, and Edge?▼

Yes, you can test extension UI elements across Chrome, Firefox, and Edge. The Skill provides code patterns to handle rendering and validate extension components within their specific browser environments.

How does Playwright handle screenshot capture of extension options pages?▼

Playwright handles screenshot capture of extension options pages by utilizing specific code patterns that address the challenges of accessing and rendering extension-specific UI elements for visual validation.

What's the best way to validate content script visuals with Puppeteer?▼

The best way to validate content script visuals with Puppeteer is using the Skill's provided automation patterns to capture screenshots of the rendered extension contexts and compare them for visual regressions.

Why does testing extension visual contexts fail with standard UI automation?▼

Standard UI automation fails because accessing and rendering extension-specific UI elements, such as popups and options pages, presents unique challenges that require dedicated Puppeteer and Playwright patterns to properly load and screenshot.

Related Skills

Explore More Software Engineering Skills→
Sake-TeamSake-Team

browser-qa

Automate visual testing and UI interaction verification with browser automation tools.

Official
Advanced
EvolutionAPIEvolutionAPI
520

dev-visual-verdict

Compare before and after screenshots to detect visual regressions in UI components.

Official
Intermediate
drgaciwdrgaciw

gitlab-ci-patterns

Generate GitLab CI/CD pipeline configurations for testing, building, and deployment.

Community
Intermediate
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced