🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Hilda Puppeteer
πŸ¦€ ClawHub

Hilda Puppeteer

by @xuxingling55-sketch

Automate Chrome and Chromium with Puppeteer for scraping, testing, screenshots, and browser workflows.

Versionv1.0.0
Downloads313
Installs1
#legal#automation
TERMINAL
clawhub install hilda-puppeteer

πŸ“– About This Skill

name: hilda-Puppeteer slug: hilda-puppeteer version: 1.0.0 homepage: https://clawic.com/skills/puppeteer description: Automate Chrome and Chromium with Puppeteer for scraping, testing, screenshots, and browser workflows. metadata: {"clawdbot":{"emoji":"🎭","requires":{"bins":["node"]},"os":["linux","darwin","win32"]}}

Setup

On first use, read setup.md for integration guidelines.

When to Use

User needs browser automation: web scraping, E2E testing, PDF generation, screenshots, or any headless Chrome task. Agent handles page navigation, element interaction, waiting strategies, and data extraction.

Architecture

Scripts and outputs in ~/puppeteer/. See memory-template.md for structure.

~/puppeteer/
β”œβ”€β”€ memory.md       # Status + preferences
β”œβ”€β”€ scripts/        # Reusable automation scripts
└── output/         # Screenshots, PDFs, scraped data

Quick Reference

| Topic | File | |-------|------| | Setup process | setup.md | | Memory template | memory-template.md | | Selectors guide | selectors.md | | Waiting patterns | waiting.md |

Core Rules

1. Always Wait Before Acting

Never click or type immediately after navigation. Always wait for the element: 
await page.waitForSelector('#button');
await page.click('#button');
Clicking without waiting causes "element not found" errors 90% of the time.

2. Use Specific Selectors

Prefer stable selectors in this order: 1. [data-testid="submit"] β€” test attributes (most stable) 2. #unique-id β€” IDs 3. form button[type="submit"] β€” semantic combinations 4. .class-name β€” classes (least stable, changes often)

Avoid: div > div > div > button β€” breaks on any DOM change.

3. Handle Navigation Explicitly

After clicks that navigate, wait for navigation: 
await Promise.all([
  page.waitForNavigation(),
  page.click('a.next-page')
]);
Without this, the script continues before the new page loads.

4. Set Realistic Viewport

Always set viewport for consistent rendering: 
await page.setViewport({ width: 1280, height: 800 });
Default viewport is 800x600 β€” many sites render differently or show mobile views.

5. Handle Popups and Dialogs

Dismiss dialogs before they block interaction: 
page.on('dialog', async dialog => {
  await dialog.dismiss(); // or dialog.accept()
});
Unhandled dialogs freeze the script.

6. Close Browser on Errors

Always wrap in try/finally: 
const browser = await puppeteer.launch();
try {
  // ... automation code
} finally {
  await browser.close();
}
Leaked browser processes consume memory and ports.

7. Respect Rate Limits

Add delays between requests to avoid blocks: 
await page.waitForTimeout(1000 + Math.random() * 2000);
Hammering sites triggers CAPTCHAs and IP bans.

Common Traps

  • page.click() on invisible element β†’ fails silently, use waitForSelector with visible: true
  • Screenshots of elements off-screen β†’ blank image, scroll into view first
  • page.evaluate() returns undefined β†’ cannot return DOM nodes, only serializable data
  • Headless blocked by site β†’ use headless: 'new' or set user agent
  • Form submit reloads page β†’ page.waitForNavigation() or data is lost
  • Shadow DOM elements invisible to selectors β†’ use page.evaluateHandle() to pierce shadow roots
  • Cookies not persisting β†’ launch with userDataDir for session persistence

    • Security & Privacy

    Data that stays local:

  • All scraped data in ~/puppeteer/output/
  • Browser profile in specified userDataDir

    • This skill does NOT:

  • Send scraped data anywhere
  • Store credentials (you provide them per-script)
  • Access files outside ~/puppeteer/

    • Related Skills

    Install with clawhub install if user confirms:
  • playwright β€” Cross-browser automation alternative
  • chrome β€” Chrome DevTools and debugging
  • web β€” General web development

    • Feedback

  • If useful: clawhub star puppeteer
  • Stay updated: clawhub sync

    • ⚑ When to Use

    User needs browser automation: web scraping, E2E testing, PDF generation, screenshots, or any headless Chrome task. Agent handles page navigation, element interaction, waiting strategies, and data extraction.

    βš™οΈ Configuration

    On first use, read setup.md for integration guidelines.