headless-web-viewer

Render JavaScript-heavy webpages and extract visible text with Playwright.

50|3|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/okwinds/miscellany --skill headless-web-viewer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: headless-web-viewer
Source: https://github.com/okwinds/miscellany/tree/main/agent/skills/headless-web-viewer
Command: npx skills add https://github.com/okwinds/miscellany --skill headless-web-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill renders JavaScript-heavy webpages using a headless browser to extract the visible DOM text, enabling analysis of pages that rely on client-side rendering.

Core Features & Use Cases

  • Render pages with a headless browser to obtain the final DOM and visible text.
  • Extract visible text and optionally save a full-page screenshot for visual verification.
  • Use cases include content auditing, data collection from SPA sites, and automated UI testing.

Quick Start

Run the renderer: node agent/skills/headless-web-viewer/scripts/render_url_playwright.mjs '<URL>' --out-html /tmp/page.html --out-text /tmp/page.txt --out-screenshot /tmp/page.png

Frequently Asked Questions about headless-web-viewer

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

FAQPage Schema
How do I extract visible text from a JavaScript rendered webpage?

To extract visible text from a JavaScript rendered webpage, you can use a headless browser to load the page and retrieve the final DOM. This Skill uses Playwright to render client-side content and output the extracted text.

Can I take full-page screenshots of SPA sites for automated UI testing?

Yes, you can take full-page screenshots of SPA sites for automated UI testing. The Skill renders the page using a headless browser and optionally saves a full-page PNG screenshot for visual verification alongside the extracted text.

Do I need Node.js and Playwright to render headless webpages and save HTML?

Yes, you need a Node.js environment with Playwright (playwright-core) installed to render headless webpages. The Skill relies on these dependencies to execute its scripts and output the rendered DOM to HTML files.

What is the best way to automate content auditing for client-side rendered sites?

The best way to automate content auditing for client-side rendered sites is using a headless browser to capture the fully loaded DOM. This approach ensures you analyze the actual rendered content rather than the raw, incomplete source HTML.

Why does extracting text from a dynamic webpage return empty or incomplete content?

Extracting text from a dynamic webpage returns incomplete content when the page relies on JavaScript to render elements. Using a headless browser like Playwright waits for the client-side scripts to execute, capturing the final visible text.

How do I run a script to render a URL and extract text to a file?

To render a URL and extract text to a file, run the provided Node.js script with the target URL and output file paths as arguments. The script uses Playwright to generate HTML, text, and PNG artifacts for the specified webpage.