skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:chrome-devtools

Automate browser interactions and capture structured JSON data with Puppeteer CLI scripts.

1|Updated Mar 6, 2026
Search Tags:#accessibility#screenshots#puppeteer#performance-testing#web-scraping#browser-automation#session-persistence
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-chrome-devtools-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:chrome-devtools
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/chrome-devtools
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-chrome-devtools-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires debug, puppeteer, sharp, yargs, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Automates repetitive and fragile browser tasks—navigation, interaction, diagnostics, and authenticated workflows—so engineers and testers can reliably capture screenshots, network traces, performance metrics, and structured page data without manual browser steps.

Core Features & Use Cases

  • Puppeteer CLI scripts for navigation, clicking, form filling, evaluation, screenshots, performance tracing, and network monitoring.
  • Persistent sessions via saved WebSocket endpoints and auth session persistence for chained, authenticated workflows.
  • Element discovery with ARIA snapshots and stable refs plus select-by-ref automation for unknown or dynamic layouts.
  • Use Cases: automated web scraping with session reuse, accessibility/ARIA audits, CI-friendly performance measurements, and debugging live WebSocket or auth flows.

Quick Start

Run the navigate.js script to open a URL, capture diagnostics, and persist the browser session for follow-up scripts.

Frequently Asked Questions about ck:chrome-devtools

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

FAQPage Schema
How do I automate web scraping with Puppeteer while maintaining an authenticated session?▼

Automate web scraping with Puppeteer using persistent WebSocket endpoints and auth session persistence to maintain authenticated sessions for chained workflows. This approach enables reliable structured data capture across multiple scripts without repeated manual logins.

What is ARIA-based element discovery and how does it help browser automation?▼

ARIA-based element discovery uses accessibility snapshots and stable refs to locate elements on dynamic web layouts. It allows Puppeteer CLI scripts to select elements by ref, enabling reliable automation when standard CSS selectors fail on unknown or changing page structures.

Can I use Puppeteer CLI scripts for performance testing and network monitoring?▼

Yes, Puppeteer CLI scripts support performance tracing and network monitoring out of the box. Developers can capture performance metrics and network traces during automated browser interactions, outputting structured JSON results suitable for CI integration and analysis.

Does Puppeteer work with headless browser automation for capturing screenshots?▼

Puppeteer works effectively for headless browser automation and capturing screenshots of web pages. CLI scripts can navigate to URLs, capture full-page or viewport screenshots, and process images further using sharp for optimization and format conversion.

What's the best way to handle dynamic web page layouts when scraping with Puppeteer?▼

The best way to handle dynamic layouts when scraping with Puppeteer is leveraging ARIA snapshots and stable refs for element discovery. This method identifies elements by their accessibility roles rather than fragile DOM selectors, ensuring robust automation across changing page structures.

Why do I need sharp as a dependency for Puppeteer browser automation?▼

Sharp is required as a dependency to process and optimize screenshots captured during Puppeteer browser automation. It handles image manipulation tasks like resizing and format conversion, ensuring captured screenshots are efficiently stored and ready for tooling or CI integration.

Related Skills

Explore More Software Engineering Skills→
vuminhieuvuminhieu

chrome-devtools

Orchestrate Puppeteer scripts with persistent sessions for browser automation and testing.

Community
Advanced
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
NammDevNammDev
2

chrome-devtools

Automate browser tasks and data collection with Puppeteer CLI scripts.

Community
Advanced
haposofthaposoft
54

hapo:chrome-devtools

Automate browser interactions with Puppeteer for navigation, screenshots, and element analysis.

Official
Advanced