skills.rest
Srajangpt1
Srajangpt1COMMUNITY
Explore all skills by this author →
GitHub

test-ui

Test BrowserOS agent extension UI for visual and interaction regressions.

Updated Apr 12, 2026
Search Tags:#automation#extension#devtools#cdp#ui-testing#snapshot#browseros
One-click install
npx skills add https://github.com/Srajangpt1/dataeye --skill test-ui-srajangpt1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-ui
Source: https://github.com/Srajangpt1/dataeye/tree/main/packages/browseros-agent/.claude/skills/test-ui
Command: npx skills add https://github.com/Srajangpt1/dataeye --skill test-ui-srajangpt1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a repeatable workflow to visually verify UI changes in the BrowserOS agent extension so developers can catch rendering, navigation, and interaction regressions before merging code.

Core Features & Use Cases

  • Start the BrowserOS development environment with a fresh profile and randomized ports to avoid conflicts and reproduce first-run behavior.
  • Discover extension and page targets via the CDP inspector, and use snapshot versus screenshot strategies to rapidly validate DOM structure, text, and visual layout.
  • Interact programmatically with the new tab page and the right side panel (click, fill, press_key, scroll, hover) and verify results using snapshot assertions or screenshots for final visual checks.
  • Use cases include verifying new settings pages, ensuring hot-reload updates re-render correctly, testing chat side panel interactions, and diagnosing API or console errors during UI changes.

Quick Start

Start the dev environment with bun run dev:watch -- --new, extract and export the CDP port shown in the output, then run the scripts/dev/inspect-ui.ts inspector to snapshot app.html and sidepanel and verify your UI changes.

Frequently Asked Questions about test-ui

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

FAQPage Schema
How do I test BrowserOS agent extension UI for visual regressions?▼

You can verify UI rendering and interactions by running the scripts/dev/inspect-ui.ts utility, which discovers extension and page targets via the CDP inspector to validate DOM structure, text, and visual layout across the new tab and side panel.

How do I verify DOM structure and visual layout using CDP snapshots and screenshots?▼

You can verify UI rendering and interactions by running the scripts/dev/inspect-ui.ts utility, which discovers extension and page targets via the CDP inspector to validate DOM structure, text, and visual layout across the new tab and side panel.

What's the best way to programmatically interact with the BrowserOS side panel during development?▼

You need BrowserOS.app installed at /Applications/BrowserOS.app, Go and Bun tooling available, the scripts/dev/inspect-ui.ts utility present, and access to randomized CDP and server ports to run the UI testing workflow.

Do I need Go and Bun installed to run the BrowserOS UI testing workflow?▼

Start the dev environment with bun run dev:watch -- --new, extract and export the randomized CDP port shown in the output, then run the inspector to snapshot app.html and sidepanel for verifying your UI changes.

How do I start a BrowserOS dev environment with randomized ports to test UI changes?▼

Use cases include verifying new settings pages, ensuring hot-reload updates re-render correctly, testing chat side panel interactions, and diagnosing API or console errors that occur during UI changes.

When do I need to use snapshot versus screenshot strategies for UI testing?▼

Use snapshot strategies to rapidly validate DOM structure and text content, and use screenshots for final visual layout checks when verifying rendering, navigation, and interaction regressions in the BrowserOS extension.

Related Skills

Explore More Software Engineering Skills→
Sridhar-RanganaboinaSridhar-Ranganaboina

test-ui

Automate BrowserOS dev-environment startup and CDP-based visual UI checks.

Community
Intermediate
emdash-cmsemdash-cms
11.6k

agent-browser

Automate browser interactions to verify UI changes and capture screenshots.

Official
Intermediate
whywaitawhywaita

agent-browser

Automate browser navigation, element interaction, and data extraction via CDP.

Community
Advanced
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate