playwright-exact-screenshot

Capture HTML pages at exact pixel dimensions using Playwright.

4|Updated May 14, 2026
One-click install
npx skills add https://github.com/liumeixin/hermes-skills --skill playwright-exact-screenshot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-exact-screenshot
Source: https://github.com/liumeixin/hermes-skills/tree/main/devops/playwright-exact-screenshot
Command: npx skills add https://github.com/liumeixin/hermes-skills --skill playwright-exact-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the issue of white space and zoom distortion when capturing HTML pages using the browser_vision tool, which has a fixed viewport of 1280×720.

Core Features & Use Cases

  • Exact Screenshot: Captures HTML pages at precise pixel dimensions, eliminating white space and zoom distortion.
  • Playwright Scripting: Utilizes Playwright to control viewport size and render HTML accurately.
  • Use Case: Ideal for creating cover images for social media posts or documents where precise dimensions are crucial.

Quick Start

Use the 'playwright-exact-screenshot' skill to capture a screenshot of the HTML file at 1080x1440 pixels: !playwright-exact-screenshot '/path/to/your/html/file.html' 1080 1440

Frequently Asked Questions about playwright-exact-screenshot

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

FAQPage Schema
Why does my HTML screenshot have white space and zoom distortion when using browser automation?

HTML screenshots often have white space and zoom distortion because default browser automation tools use a fixed 1280×720 viewport. Using Playwright to set exact pixel dimensions eliminates these rendering issues.

How do I take a screenshot of an HTML page at exact pixel dimensions?

You can take an HTML screenshot at exact pixel dimensions by using Playwright to control the browser viewport size. This ensures the captured image matches your specified width and height precisely.

Can I use Playwright to generate cover images for social media posts?

Yes, you can use Playwright to generate cover images for social media by capturing HTML pages at precise pixel dimensions. This approach is ideal when exact image sizes are crucial for your design mockups.

Do I need to install Chromium to capture HTML screenshots with Playwright?

Yes, capturing HTML screenshots with Playwright requires a Python environment with Chromium installed. The Playwright dependency controls the viewport size to render the HTML accurately.

How do I specify viewport size when capturing an HTML page with Playwright?

You specify viewport size when capturing an HTML page by passing the desired width and height values to the Playwright script. For example, providing 1080 and 1440 sets the screenshot dimensions to those exact pixels.

What is the best way to automate high-precision HTML page screenshots?

The best way to automate high-precision HTML screenshots is using Playwright scripting to define exact viewport dimensions. This method avoids the fixed 1280×720 viewport limitations of standard browser vision tools.