nodefony-browser

Inspect and measure web pages in a Playwright-driven browser with WCAG, performance, and WebSocket probes.

Updated Dec 19, 2023
One-click install
npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-browser-nodefony
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nodefony-browser
Source: https://github.com/nodefony/nodefony-core/tree/main/.claude/skills/nodefony-browser
Command: npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-browser-nodefony

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Verifying what a web page actually renders and measures—contrast ratios, console errors, network failures, WebSocket traffic—requires a real browser, and guessing from code or screenshots leads to false conclusions. This Skill drives a real browser (locally or in a container) to observe and measure pages objectively, including authenticated pages and real-time socket traffic. ## Core Features & Use Cases - Page inspection with measurement: Renders a page and returns computed contrast ratios with WCAG verdicts, console errors, served scripts, and timestamped screenshots via inspect.mjs. - Probe families: Optional audits for accessibility (axe-core), rendering overflow, network, Web Vitals performance, storage, and responsive breakpoints, each returning bounded OK/ALERTE verdicts. - Real-time observation: watch.mjs records WebSocket frames and HTTP errors over time; socket.mjs drives an application socket end-to-end from within the page with its real cookies and origin; audit.mjs runs Lighthouse including an agentic-browsing category. - Use Case: After fixing a color palette in an admin console, run the inspection script against the page in both light and dark themes to confirm the contrast ratio meets WCAG AA before shipping. ## Quick Start Ask the agent to open the page at /nodefony/login in a driven browser and report its console errors, contrast measurements, and a screenshot.

Frequently Asked Questions about nodefony-browser

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

FAQPage Schema
How do I measure WCAG contrast on a web page with Playwright?

Run the inspect.mjs script against the target page; it computes contrast ratios from rendered styles and returns a WCAG verdict that accounts for font size thresholds. For a full audit, enable the axe family, which runs axe-core against all visible text.

How to test WebSocket traffic from a real browser page?

Use the socket.mjs script, which executes the scenario inside the page so it carries real cookies and Origin headers. It reports the handshake, channel subscriptions, RPC actions, median round-trip latency, and reconnection behavior.

Does Playwright need to download a browser to run inspections?

Not necessarily. The probes try an existing chromium, then chrome, then msedge already installed on the machine before requiring npx playwright install chromium. The browserName field in the output reports which engine was used.

Why do I get 401 errors when inspecting a page from a Docker container?

The session cookie is marked secure, so it is discarded on non-localhost HTTP origins. Access the application over HTTPS on port 5152 and reach the host via host.docker.internal, which must also be listed in trustedHosts.

When should I use the Docker container instead of local browser inspection?

Use the container only for comparable measurements over time (pinned image), CI environments without a display, or sessions with sensitive credentials. For everyday fix-and-verify loops, local execution is far faster.

Why does a Lighthouse performance score look bad on a dev server?

Development servers serve unminified modules one by one with hot reload, so performance scores are meaningless there. Only measure performance against a built production bundle, and check the decor field for throttling context.