headless-browser-verify

Verify keystone.guru pages with headless Chrome to catch errors and take screenshots.

66|10|Updated Aug 12, 2018
One-click install
npx skills add https://github.com/RaiderIO/keystone.guru --skill headless-browser-verify
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: headless-browser-verify
Source: https://github.com/RaiderIO/keystone.guru/tree/main/.claude/skills/headless-browser-verify
Command: npx skills add https://github.com/RaiderIO/keystone.guru --skill headless-browser-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill allows for the verification of keystone.guru pages using a real headless Chrome browser, enabling reproduction of rendering and JavaScript issues, measurement of layout, error catching, and screenshot taking for analysis.

Core Features & Use Cases

  • Real Headless Chrome: Runs keystone.guru pages in a real headless Chrome environment to reproduce rendering and JavaScript issues.
  • Layout Measurement: Measures layout and catches page errors.
  • Screenshot Taking: Takes screenshots that can be viewed with the Read tool for further analysis.
  • Use Case: When curl or static reasoning is not enough, use this Skill to verify the rendering and behavior of keystone.guru pages, especially for JavaScript-driven UI elements and layout issues.

Quick Start

Run the headless-browser-verify skill to verify the search page of keystone.guru by executing the following command: docker compose exec -T app sh -c 'cd /var/www && node .chrome-tmp/browse.js http://nginx/search --screenshot /var/www/.chrome-tmp/shot.png --click ".affixselect.bootstrap-select button" --eval "document.querySelectorAll(\".dropdown-menu.show li\").length"

Frequently Asked Questions about headless-browser-verify

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

FAQPage Schema
How do I verify web page rendering and JavaScript issues using headless Chrome?

Headless Chrome verifies web page rendering by running pages in a real browser environment to reproduce JavaScript issues, measure layout, catch page errors, and take screenshots for analysis.

What is the best way to test layout issues when curl or static reasoning is not enough?

Testing layout issues when curl is insufficient requires a real headless Chrome browser to execute JavaScript-driven UI elements, accurately measure layout, and capture screenshots for visual analysis.

How do I take screenshots of web pages in a Docker environment?

To take screenshots in Docker, execute a Node script within the container to navigate the target URL and save the output as a PNG file, which can then be viewed for analysis.

Do I need Docker to run headless Chrome for web verification?

Yes, Docker is required to run the headless Chrome web verification process, utilizing specific Node scripts within the container to navigate pages, click elements, and capture screenshots.

Can I measure dynamic UI elements like dropdown menus with headless Chrome?

Yes, headless Chrome can measure dynamic UI elements by executing scripts to click specific selectors and evaluate JavaScript expressions to count or inspect the rendered dropdown menu items.