skills.rest
Jimmy1987s
Jimmy1987sCOMMUNITY
Explore all skills by this author →
GitHub

browser-screenshot

Capture and compare Playwright browser screenshots for visual regression testing.

Updated Aug 23, 2026
Search Tags:#reporting#regression testing#playwright#visual testing#web automation#screenshot
One-click install
npx skills add https://github.com/Jimmy1987s/EC-Claude-Skills --skill browser-screenshot-jimmy1987s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-screenshot
Source: https://github.com/Jimmy1987s/EC-Claude-Skills/tree/main/skills/browser-screenshot
Command: npx skills add https://github.com/Jimmy1987s/EC-Claude-Skills --skill browser-screenshot-jimmy1987s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of capturing, organizing, and analyzing web page screenshots for visual testing, documentation, and debugging.

Core Features & Use Cases

  • Automated Screenshots: Capture full-page or specific element screenshots of web pages.
  • Organized Storage: Automatically saves screenshots with a structured naming convention (sequence number, date, description) into domain-specific folders.
  • Visual Testing: Facilitates comparison of screenshots to detect visual regressions.
  • Report Generation: Creates detailed HTML and Markdown reports for visual test results, including step-by-step captures and console logs.
  • Use Case: When developing a new feature for your e-commerce site, use this Skill to capture screenshots at key stages (e.g., before and after adding an item to the cart) to ensure the UI remains consistent and to document the user flow.

Quick Start

Use the browser-screenshot skill to capture a screenshot of https://www.example.com and save it with the description "Example Domain Homepage".

Frequently Asked Questions about browser-screenshot

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

FAQPage Schema
How do I automate web page screenshots for visual regression testing?▼

Automate web page screenshots for visual regression testing by using Playwright to capture, archive, and compare web page visuals. The skill structures captures into domain-specific directories and generates detailed test reports to detect UI changes.

What is the best way to organize and index captured web automation screenshots?▼

Organize captured web automation screenshots using a structured file system with domain-specific directories and an index.json file. This metadata index enables efficient querying, automatic archiving, and retrieval of screenshots based on sequence, date, and description.

Does Playwright support capturing full-page screenshots and generating test reports?▼

Playwright supports capturing full-page or specific element screenshots and generating test reports. The skill creates detailed HTML and Markdown reports for visual test results, including step-by-step captures and console logs for debugging.

How do I compare browser screenshots to detect visual regressions?▼

Compare browser screenshots to detect visual regressions by querying the indexed metadata and utilizing the built-in visual testing features. The skill facilitates direct comparison of archived screenshots to identify inconsistencies in the web page UI.

Can I integrate web automation screenshot captures into my development workflow?▼

You can integrate web automation screenshot captures into your development workflow to document user flows and ensure UI consistency. Capture screenshots at key stages, automatically archive them with structured naming conventions, and generate reports for analysis.

Related Skills

Explore More Software Engineering Skills→
aktsmmaktsmm
24

browser-max-automation

Automate browser interactions and UI testing via Playwright MCP.

Community
Intermediate
semicolon-devteamsemicolon-devteam

iteration-tracker

Track test iterations and outcomes for GitHub issues via issue comments.

Official
Advanced
CrumbgrabberCrumbgrabber
3

webapp-testing

Automate local web application testing with Python Playwright scripts.

Community
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate