browser-automation

Files (1)

• SKILL.md

SKILL.md (first lines)

# Browser Automation

Automate web browsers using Playwright for testing, scraping, and automation.

## Setup

**Node.js** (required):
- **macOS**: `brew install node`
- **Ubuntu**: `sudo apt install nodejs npm`

**Playwright** (browsers):
```bash
npm install -g playwright   # or: npm install playwright (project dependency)
npx playwright install        # downloads Chromium, Firefox, WebKit
```

## Quick Scripts

```bash
# Take screenshot
npx playwright screenshot https://example.com screenshot.png

# Generate PDF
npx playwright pdf https://example.com page.pdf
```

## Navigate & Screenshot

```javascript
// script.js
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png', fullPage: true });

  await browser.close();
})();
```

```bash
node script.js
```

## Click & Fill Forms

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto('https://example.com/login');

  // Fill form
  await page.fill('#email', 'user@example.com');
  await page.fill('#password', 'secretpassword');

  // Click button
  await page.click('button[type="submit"]');

  // Wait for navigation
  await page.waitForURL('**/dashboard');

  await browser.close();
})();
```

## Extract Data

```javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com/products');

  // Extract text
  const title = await page.textContent('h1');

  // Extract multiple elements
  const products = await page.$$eval('.product', items =>
    items.map(item => ({
      name: item.querySelector('.name')?.textContent,
      price: item.querySelector('.price')?.textContent
    }))
  );

  console.log(JSON.stringify(products, null, 2));

  await browser.close();
})();
```

## Handle Dialogs & Alerts

```javascript
page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept();
});
```

## Wait Strategies

```javascript
// Wait for element
await page.waitForSelector('.loaded');

// Wait for specific text
await page.waitForSelector('text=Welcome');

// Wait for network idle
await page.waitForLoadState('networkidle');

From jholhewres/devclaw-skills, MIT.

More from jholhewres/devclaw-skills