playwright-capture

Capture screenshots and HTML at multiple viewports with Playwright.

Updated Jan 26, 2026
One-click install
npx skills add https://github.com/thehivegroup-ai/ai-development --skill playwright-capture
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-capture
Source: https://github.com/thehivegroup-ai/ai-development/tree/main/modules/stack-authorities/testing/visual-parity/skills/playwright-capture
Command: npx skills add https://github.com/thehivegroup-ai/ai-development --skill playwright-capture

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of capturing screenshots and HTML at multiple viewports, aiding in visual parity testing and comparison of rendered output between environments.

Core Features & Use Cases

  • Automated Screenshot Capture: Take screenshots of web pages using Playwright, capturing both the visual and HTML output.
  • Multi-Viewport Support: Customize captures for different devices and screen sizes.
  • Use Case: For teams working on web applications, this Skill can automate the process of capturing and comparing screenshots across different environments to ensure visual consistency.

Quick Start

Use the playwright-capture skill to take a full-page screenshot of the example.com homepage at desktop and mobile viewports.

Frequently Asked Questions about playwright-capture

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

FAQPage Schema
How do I automate visual parity testing across multiple viewports?

Automating visual parity testing involves capturing screenshots and HTML at multiple viewports using Playwright to compare rendered output across different environments. This skill automates generating and comparing those captures for visual consistency.

How do I capture screenshots of web pages at different screen sizes?

You can capture screenshots of web pages at different screen sizes by using Playwright to automate multi-viewport support. This skill customizes visual and HTML output captures for various devices to ensure consistent rendering.

Do I need Playwright installed to capture web page screenshots for cross-environment testing?

Yes, you need Playwright and its related browser binaries installed to capture web page screenshots for cross-environment testing. This skill requires the Playwright dependency to automate the rendering comparison process.

What is cross-environment rendering comparison used for?

Cross-environment rendering comparison is used to ensure visual consistency of web applications by capturing and comparing screenshots across different environments. It helps teams automate visual parity testing to detect rendering discrepancies.

Can I capture both the visual output and HTML when taking browser testing screenshots?

Yes, you can capture both the visual output and HTML when taking browser testing screenshots. This skill uses Playwright to automate the process of generating both visual captures and HTML output for comprehensive visual parity comparison.

What is the best way to ensure visual consistency across different devices in web applications?

The best way to ensure visual consistency across different devices is to automate visual parity testing with Playwright screenshots at multiple viewports. This skill automates capturing and comparing rendered output to verify visual consistency across environments.