skills.rest
yaklang
yaklangOFFICIAL
Explore all skills by this author →
GitHub

how-to-use-browser

Automates browser interactions including navigation, form filling, and JavaScript evaluation via headless Chrome.

632|86|Updated Apr 29, 2023
Search Tags:#browser automation#web scraping#form filling#cdp#spa#headless chrome#javascript evaluation
One-click install
npx skills add https://github.com/yaklang/yaklang --skill how-to-use-browser-yaklang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: how-to-use-browser
Source: https://github.com/yaklang/yaklang/tree/main/common/ai/aid/aireact/skills/how-to-use-browser
Command: npx skills add https://github.com/yaklang/yaklang --skill how-to-use-browser-yaklang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Automating web page interaction is difficult when pages are dynamic: SPA frameworks render content asynchronously, accessibility snapshots return zero element refs, and login forms require JavaScript-driven input events. This Skill provides a structured workflow for driving a headless Chrome browser through the use_browser tool without guessing which strategy to apply. ## Core Features & Use Cases - Dual Interaction Strategies: Snapshot + element refs for static pages, and a JavaScript-first strategy for login forms, SPAs, and dynamic pages where snapshots return zero refs. - Full Browser Control: Open URLs, click, fill, type, evaluate JavaScript, take screenshots, manage tabs, wait for selectors, and retrieve page title, URL, HTML, text, and cookies. - SPA Timing Handling: Built-in guidance for Vue/React/Angular pages, including wait-and-retry patterns and self-polling JavaScript for asynchronously rendered content. - Use Case: Automate a login flow on a React-based admin panel by discovering form fields with a JavaScript eval, filling credentials via CSS selectors, submitting the form, and verifying the resulting page state. ## Quick Start Ask the AI to open a target URL with the use_browser tool, fill in the login form, submit it, and return a screenshot of the resulting page.

Frequently Asked Questions about how-to-use-browser

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

FAQPage Schema
How do I automate a login form with headless Chrome?▼

Open the login URL, then use a JavaScript eval to discover input fields and their CSS selectors. Fill the username and password fields with those selectors, click the submit button, and verify success by evaluating the resulting page URL and title.

How to interact with React or Vue SPA pages in browser automation?▼

SPA pages render content asynchronously, so snapshots and queries may return zero elements right after navigation. Wait a few seconds, then retry a JavaScript eval, or use a self-polling script that retries querySelectorAll until elements appear.

Why does the browser snapshot return zero element refs?▼

Zero refs typically occur on SPA pages, Shadow DOM, iframes, or dynamically loaded content where the accessibility tree has no interactive elements. Do not retry the snapshot; switch to the JavaScript-first strategy using eval and CSS selectors instead.

Does this browser automation require Chrome to be installed?▼

Yes, a Chrome or Chromium browser must be installed on the system. The tool uses the go-rod/CDP-based browser module, and you can specify a custom executable path via the exe-path parameter if needed.

Can I fill a form and submit it in a single step?▼

Yes, a single eval call can set input values, dispatch input events, and click the submit button together. This is the recommended approach for login and dynamic forms because it avoids multiple round trips and stale element refs.

Related Skills

Explore More Software Engineering Skills→
Fantasia1999Fantasia1999

browserstack

Run Playwright tests on BrowserStack cloud grid and retrieve build results.

Community
Advanced
overtimepogovertimepog

evidence-capture

Standardize security vulnerability evidence capture with naming conventions and directory structures.

Community
Advanced
serkan-ozalserkan-ozal
7

api-testing

Mock API responses and intercept HTTP requests in browser automation.

Community
Intermediate
eddmanneddmann
2

playwright

Render dynamic web pages with Playwright to capture HTML, text, and screenshots.

Community
Intermediate