skills.rest
CMiller838
CMiller838COMMUNITY
Explore all skills by this author →
GitHub

browser-check

Runs static web pages in headless Chrome to verify tests, screenshots, and console errors.

Updated Sep 3, 2026
Search Tags:#playwright#pwa#browser testing#screenshot#console errors#headless chrome#javascript verification
One-click install
npx skills add https://github.com/CMiller838/meal-planner --skill browser-check-cmiller838
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-check
Source: https://github.com/CMiller838/meal-planner/tree/main/.claude/skills/browser-check
Command: npx skills add https://github.com/CMiller838/meal-planner --skill browser-check-cmiller838

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Reading a diff cannot prove a UI or JavaScript change actually works. This Skill executes the project's static pages in a real headless Chrome so you can confirm test results, rendered layout, and runtime errors instead of guessing from source code. ## Core Features & Use Cases - Test execution: Loads test.html in headless Chrome and reports the real pass/fail summary plus any FAIL lines after editing any .js or .html file. - Screenshots: Renders any page (index, discover, plan, shopping) after its JS runs and saves a PNG at a phone-sized 430x900 viewport for UI and layout review. - Console and DOM inspection: Surfaces console output, CORS, and network errors from page load, or dumps the fully rendered DOM to verify element state. - Use Case: After fixing a bug in discover.html, run the test mode to confirm all assertions pass, then screenshot the page and read the PNG to verify the layout before telling the user the fix works. ## Quick Start Run the browser-check script in test mode against test.html to verify my latest JavaScript change actually passes in a real browser.

Frequently Asked Questions about browser-check

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

FAQPage Schema
How do I test JavaScript changes in a headless browser without npm?▼

Run the browser_check.sh script in test mode against test.html. It serves the repo over a throwaway python3 http.server and drives a cached Chrome-for-Testing binary, returning the real pass/fail summary and any FAIL lines without npm or a build step.

How to screenshot a web page after JavaScript runs?▼

Use screenshot mode with a page path and output PNG, for example browser_check.sh screenshot discover.html /tmp/discover.png. Chrome renders the page after its JS executes and saves the image at a default 430x900 phone-sized viewport, which you can then read back.

Where does the headless Chrome binary come from?▼

The script finds chrome-headless-shell under ~/.cache/ms-playwright, cached by a prior Playwright install. If it is missing, run npx playwright install chromium once with network access to fetch it.

Why do CORS or network errors appear when testing pages that call external APIs?▼

The sandbox blocks outbound network access, so calls to third-party APIs like TheMealDB fail and appear as CORS errors in console mode. This is expected behavior, not a page bug; judge functionality from test.html assertions and the rendered DOM instead.

Can headless Chrome simulate clicks, taps, or swipe gestures?▼

No. The --dump-dom and --screenshot flags perform a single page load, not an interactive session. For interaction logic, rely on test.html assertions over extracted pure functions plus a screenshot of the resulting state.

Related Skills

Explore More Software Engineering Skills→
storyblokstoryblok
60

qa-engineer-unit

Write focused Vitest unit tests for JavaScript/TypeScript logic.

Official
Intermediate
brainbrewlabsbrainbrewlabs
7

project-management

Track implementation progress and identify blockers across project plan phases.

Official
Intermediate
imankhaimankha

lint

Run static analysis on frontend JS/JSX code with ESLint.

Community
Intermediate
Ledger-Wallet-LLCLedger-Wallet-LLC

e2e-desktop-add-or-update

Automate end-to-end test creation for Ledger Live desktop coin support.

Official
Intermediate