ck:chrome-devtools

Automate Puppeteer browser testing with screenshots, ARIA snapshots, and diagnostics.

Updated Apr 9, 2026

Search Tags:#browser automation #puppeteer #performance metrics #network monitoring #screenshot testing #accessibility snapshot #auth cookie injection

Ready to run

npx skills add https://github.com/jangtrinh/demo-Lam --skill ck-chrome-devtools-jangtrinh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ck:chrome-devtools
Source: https://github.com/jangtrinh/demo-Lam/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/jangtrinh/demo-Lam --skill ck-chrome-devtools-jangtrinh

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the manual effort of inspecting and testing web pages by automating navigation, element discovery, interaction, and diagnostics with a repeatable browser workflow.

Core Features & Use Cases

Automated browser control (Puppeteer): Navigate to URLs, capture screenshots, fill forms, click elements, and run page JavaScript.
Accessibility-first element discovery: Generate an ARIA-based YAML snapshot and interact with elements using stable refs to avoid brittle CSS/XPath.
Deep debugging & QA signals: Collect console errors, track network activity, and measure performance metrics (including trace capture and Core Web Vitals approximations).
Authentication/session persistence: Inject cookies/tokens/storage and reuse an authenticated session across script runs.

Quick Start

Run the ARIA snapshot for a target page by issuing: node aria-snapshot.js --url https://example.com

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 browser testing and capture screenshots with Puppeteer?▼

Puppeteer browser automation captures screenshots, fills forms, clicks elements, and runs page JavaScript by executing deterministic scripts that navigate to URLs and output JSON for repeatable web testing workflows.

What is an ARIA accessibility snapshot and when do I need it for web debugging?▼

An ARIA accessibility snapshot generates a YAML representation of a web page's structure for accessibility audits and stable element discovery, replacing brittle CSS/XPath selectors with stable refs for reliable element interaction during web debugging.

Can I inject auth cookies and reuse an authenticated session across Puppeteer script runs?▼

Yes, Puppeteer automation supports injecting cookies, tokens, and storage state to authenticate Chrome sessions, allowing you to reuse the authenticated session across multiple script runs for testing protected pages.

How do I collect console errors, network activity, and performance metrics during automated browser testing?▼

Automated browser testing collects console errors, tracks network activity, and measures performance metrics including trace capture and Core Web Vitals approximations, outputting deep debugging and QA signals as JSON for comprehensive analysis.

Do I need Puppeteer and Chrome installed to run ARIA snapshots and accessibility audits?▼

Yes, running ARIA snapshots and accessibility audits requires a Puppeteer-based Chrome session with Node.js, utilizing the sharp, debug, and yargs dependencies to execute deterministic scripts that output JSON and YAML.

What are the limitations of using Puppeteer for automated form automation and web page interaction?▼

Puppeteer automation limitations include handling unknown DOM structures and avoiding brittle CSS/XPath selectors, requiring ARIA-based snapshots and safe selector validation for reliable element interaction during form automation and web page interaction.