browser-automation

Automate browser tasks for testing, design-to-code, accessibility auditing, and visual debugging.

13.1k|2.2k|Updated Mar 22, 2024
One-click install
npx skills add https://github.com/BasedHardware/omi --skill browser-automation-basedhardware
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-automation
Source: https://github.com/BasedHardware/omi/tree/main/.cursor/skills/browser-automation
Command: npx skills add https://github.com/BasedHardware/omi --skill browser-automation-basedhardware

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Browser Automation Skill enables teams to automate repetitive browser tasks for testing, design-to-code, accessibility auditing, and visual debugging, reducing manual work and accelerating web delivery.

Core Features & Use Cases

  • Testing: Navigate to URLs, click elements, type in inputs, scroll pages, capture screenshots, read console output, and monitor network traffic.
  • Design to Code: Analyze design mockups and generate HTML/CSS code that matches layouts, spacing, and typography.
  • Accessibility Auditing: Check WCAG compliance, color contrast verification, semantic HTML validation, and keyboard navigation testing.
  • Visual Debugging: Identify and fix visual regressions across pages and layouts.

Quick Start

Use the browser-automation skill to validate a login flow: Navigate to /login, fill in credentials, submit, and verify the dashboard loads.

Frequently Asked Questions about browser-automation

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

FAQPage Schema
How do I automate browser testing for login flows?

Automate browser testing by navigating to the login URL, typing credentials into inputs, submitting the form, and verifying the dashboard loads. This skill handles navigation, interaction, and console output monitoring for web QA workflows.

Can I convert design mockups to HTML and CSS code?

Yes, you can convert design mockups to HTML and CSS code. This skill analyzes design layouts, matching spacing and typography to generate semantic code directly from the visual input for web development.

How do I audit web accessibility and WCAG compliance?

Audit web accessibility by checking WCAG compliance, verifying color contrast, validating semantic HTML, and testing keyboard navigation. This skill automates these checks to identify accessibility issues in web pages.

What is the best way to debug visual regressions in web layouts?

Debug visual regressions by capturing screenshots and analyzing page layouts to identify styling shifts. This skill automates visual debugging across pages to pinpoint and help fix layout regressions.

Does browser automation require manual approval for impactful actions?

Yes, browser automation requires manual approval for potentially impactful actions. The skill provides safety prompts before executing sensitive tasks to ensure secure QA workflows and prevent unintended changes.

Can I monitor network traffic and console output during web testing?

Yes, you can monitor network traffic and read console output during web testing. This skill captures network requests and logs browser console messages to validate application behavior and identify errors.