skills.rest
metabench
metabenchCOMMUNITY
Explore all skills by this author →
GitHub

browser-verification

Launch demo servers and verify UI rendering in live browsers.

Updated Aug 25, 2018
Search Tags:#html#rendering#browser testing#screenshot#ui verification#console errors
One-click install
npx skills add https://github.com/metabench/jsgui3-html --skill browser-verification-metabench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-verification
Source: https://github.com/metabench/jsgui3-html/tree/main/docs/agi/skills/browser-verification
Command: npx skills add https://github.com/metabench/jsgui3-html --skill browser-verification-metabench

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that server-side rendered HTML components actually render correctly and function as expected in a live browser environment, catching issues missed by server-side tests.

Core Features & Use Cases

  • UI Rendering Verification: Launches demo servers and navigates browsers to check visual output.
  • Evidence Capture: Takes screenshots and recordings for documentation and debugging.
  • DOM & Console Inspection: Verifies DOM structure, CSS styles, and checks for console errors.
  • Use Case: After deploying a new UI component, use this Skill to confirm it appears correctly and without JavaScript errors in a real browser, preventing visual bugs from reaching users.

Quick Start

Navigate to http://localhost:3456 and verify the component renders visibly without console errors, then take a screenshot.

Frequently Asked Questions about browser-verification

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

FAQPage Schema
How do I verify HTML rendering in a browser after server-side deployment?▼

To verify HTML rendering, you can launch a demo server, navigate to the specified localhost URL, and inspect the DOM and CSS styles to ensure UI components render visibly and correctly.

Can I capture screenshots of UI components during browser testing?▼

Yes, capturing screenshots is supported during browser testing to provide visual evidence for documentation and debugging, ensuring the rendered HTML component appears correctly without visual bugs.

How do I check for JavaScript console errors during UI verification?▼

UI verification includes inspecting the browser console output to check for JavaScript errors, ensuring that server-side rendered components function properly without runtime issues in the live browser environment.

What is the best way to automate browser testing for visual integrity?▼

Automating browser testing for visual integrity involves using subagents to launch demo servers, navigate to specified URLs, inspect the DOM, and capture visual evidence like screenshots and recordings to catch display discrepancies.

Does UI verification work without setting up a local demo server?▼

No, UI verification requires launching a demo server first. The Skill navigates a live browser environment to the specified localhost URL to validate that server-side rendered HTML components actually render correctly.

Why does server-side rendered HTML look different in the actual browser?▼

Server-side rendered HTML can look different due to JavaScript execution or CSS styling issues in the actual browser. Browser verification inspects the live DOM and console output to catch these visual discrepancies.

Related Skills

Explore More Software Engineering Skills→
iludeilude
8

multi-agent-ai-projects

Coordinate multi-agent AI learning projects with STATUS.md progress tracking.

Community
Intermediate
udecodeudecode
240

reproduce-bug

Reproduce software bugs from GitHub issues using Playwright and log analysis.

Official
Advanced
miptah21miptah21
2

webapp-testing

Automates deterministic browser-based testing of local web applications with Python and Playwright.

Community
Intermediate
yigitkonuryigitkonur
11

run-agent-browser

Drives browser automation via agent-browser CLI for navigation, DOM interaction, sessions, tabs, screenshots, and data extraction.

Community
Intermediate