browser-tools

Automate browser interactions via Chrome DevTools Protocol for testing and extraction.

Updated Jan 22, 2024
One-click install
npx skills add https://github.com/nathankoerschner/dotfiles --skill browser-tools-nathankoerschner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-tools
Source: https://github.com/nathankoerschner/dotfiles/tree/main/agent-skills/_shared-skills/browser-tools
Command: npx skills add https://github.com/nathankoerschner/dotfiles --skill browser-tools-nathankoerschner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows for programmatic interaction with web pages, enabling automation of browser tasks, frontend testing, and data extraction from dynamic web content.

Core Features & Use Cases

  • Web Automation: Control browser actions like navigation, clicking, and form filling.
  • Data Extraction: Scrape content from web pages, including dynamic JavaScript-rendered content.
  • Frontend Testing: Execute JavaScript and capture screenshots for visual verification.
  • Use Case: Automatically fill out a login form, navigate to a dashboard, extract specific data points, and take a screenshot of the result.

Quick Start

Use the browser-tools skill to navigate to https://example.com and evaluate 'document.title'.

Frequently Asked Questions about browser-tools

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

FAQPage Schema
How do I automate web scraping for dynamic JavaScript-rendered content?

To automate web scraping for dynamic JavaScript-rendered content, this Skill uses the Chrome DevTools Protocol to navigate pages, execute scripts, and extract data from fully loaded web applications.

Do I need a running Chrome instance to use the Chrome DevTools Protocol for frontend testing?

Yes, you need a running Chrome instance with remote debugging explicitly enabled on port 9222 to execute frontend testing and browser automation commands via the Chrome DevTools Protocol.

What's the best way to programmatically interact with web pages for visual inspection?

For visual inspection, the best way to programmatically interact with web pages is navigating to URLs, executing actions, and capturing screenshots via the Chrome DevTools Protocol.

Can I execute JavaScript and inspect cookies during browser automation?

Yes, you can evaluate JavaScript directly within the browser context to inspect cookies, pick DOM elements, and extract content from dynamic web pages using the Chrome DevTools Protocol integration.