What makes Playwright (Automation + MCP + Scraper) notable?

32.2K downloads. Trust evidence available

How should Playwright (Automation + MCP + Scraper) be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Claim this agent

agentCLAWHUBUnverified

Playwright (Automation + MCP + Scraper)

Browser automation via Playwright MCP. Navigate websites, click elements, fill forms, take screenshots, extract data, and debug real browser workflows. Use w... Skill: Playwright (Automation + MCP + Scraper) Owner: ivangdavila Summary: Browser automation via Playwright MCP. Navigate websites, click elements, fill forms, take screenshots, extract data, and debug real browser workflows. Use w... Tags: latest:1.0.3 Version history: v1.0.3 | 2026-03-11T17:44:52.810Z | user Clarified the MCP-first browser automation flow and improved quick-start guidance for forms, screenshots, a

OpenClaw

View on ClawHub

Rank

Safety

Downloads

32k

Updated

May 14, 2026

Version

1.0.3

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 32.2K downloads reported by the source. Last updated 5/14/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Adoption signal: 32.2K downloadsadoption · observed May 14, 2026
Vendor: Clawhubvendor · observed May 11, 2026
Protocol compatibility: OpenClawcompatibility · observed May 11, 2026
Adoption signal: 31.8K downloadsadoption · observed May 11, 2026
Latest release: 1.0.3release · observed Mar 11, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s178jdk12x4qj3gs2se3etxf3h83h7ft:playwright

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-ivangdavila-playwright-2/snapshot"

Documentation

CLAWHUB

93,799 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: Playwright (Automation + MCP + Scraper)
slug: playwright
version: 1.0.3
homepage: https://clawic.com/skills/playwright
description: "Browser automation via Playwright MCP. Navigate websites, click elements, fill forms, take screenshots, extract data, and debug real browser workflows. Use when (1) you need a real browser, not static fetch; (2) the task involves Playwright MCP, browser tools, Playwright tests, scripts, or JS-rendered pages; (3) the user wants navigation, forms, screenshots, PDFs, downloads, or browser-driven extraction turned into a reliable outcome."
changelog: Clarified the MCP-first browser automation flow and improved quick-start guidance for forms, screenshots, and extraction.
metadata: {"clawdbot":{"emoji":"P","requires":{"bins":["node","npx"]},"os":["linux","darwin","win32"],"install":[{"id":"npm-playwright","kind":"npm","package":"playwright","bins":["playwright"],"label":"Install Playwright"},{"id":"npm-playwright-mcp","kind":"npm","package":"@playwright/mcp","bins":["playwright-mcp"],"label":"Install Playwright MCP (optional)"}]}}
---

## When to Use

Use this skill for real browser tasks: JS-rendered pages, multi-step forms, screenshots or PDFs, UI debugging, Playwright test authoring, MCP-driven browser control, and structured extraction from rendered pages.

Prefer it when static fetch is insufficient or when the task depends on browser events, visible DOM state, authentication context, uploads or downloads, or user-facing rendering.

If the user mainly wants the agent to drive a browser with simple actions like navigate, click, fill, screenshot, download, or extract, treat MCP as a first-class path.

Use direct Playwright for scripts and tests. Use MCP when browser tools are already in the loop, the user explicitly wants MCP, or the fastest path is browser actions rather than writing new automation code.

Primary fit is repo-owned browser work: tests, debugging, repros, screenshots, and deterministic automation. Treat rendered-page extraction as a secondary use case, not the default identity.

## Architecture

This skill is instruction-only. It does not create local memory, setup folders, or persistent profiles by default.

Load only the smallest reference file needed for the task. Keep auth state temporary unless the repository already standardizes it and the user explicitly wants browser-session reuse.

## Quick Start

### MCP browser path
```bash
npx @playwright/mcp --headless
```

Use this path when the agent already has browser tools available or the user wants browser automation without writing new Playwright code.

### Common MCP actions

Typical Playwright MCP tool actions include:
- `browser_navigate` for opening a page
- `browser_click` and `browser_press` for interaction
- `browser_type` and `browser_select_option` for forms
- `browser_snapshot` and `browser_evaluate` for inspection and extraction
- `browser_choose_file` for uploads
- screenshot, PDF, trace, and download capture through the active

_meta.json

{
  "ownerId": "kn73vp5rarc3b14rc7wjcw8f8580t5d1",
  "slug": "playwright",
  "version": "1.0.3",
  "publishedAt": 1773251092810
}

ci-cd.md

# CI Success Defaults

## GitHub Actions

```yaml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
      
      - name: Run tests
        run: npx playwright test
      
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 7
```

Use the official Playwright image or install browsers explicitly. Always keep traces and failure artifacts.

## GitLab CI

```yaml
playwright:
  image: mcr.microsoft.com/playwright:v1.40.0-jammy
  stage: test
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: on_failure
    paths:
      - playwright-report/
    expire_in: 7 days
```

## Docker Setup

```dockerfile
FROM mcr.microsoft.com/playwright:v1.40.0-jammy

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .

CMD ["npx", "playwright", "test"]
```

## When to Add Sharding

```yaml
# GitHub Actions matrix
jobs:
  test:
    strategy:
      matrix:
        shard: [1, 2, 3, 4]
    steps:
      - name: Run tests
        run: npx playwright test --shard=${{ matrix.shard }}/4
```

Do not shard a small or unstable suite just to look faster. Add sharding only after the suite is already deterministic.

## playwright.config.ts for CI

```typescript
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: process.env.CI 
    ? [['html'], ['github']] 
    : [['html']],
  
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});
```

## Caching Browsers

```yaml
# GitHub Actions
- name: Cache Playwright browsers
  uses: actions/cache@v4
  with:
    path: ~/.cache/ms-playwright
    key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
```

## Environment Variables

```yaml
env:
  BASE_URL: https://staging.example.com
  CI: true
```

```typescript
// playwright.config.ts
use: {
  baseURL: process.env.BASE_URL || 'http://localhost:3000',
}
```

## Flaky Test Management

```typescript
// Mark known flaky test
test('sometimes fails', {
  annotation: { type: 'flaky', description: 'Network timing issue' },
}, async ({ page }) => {
  // test code
});

// Retry configuration
expor

debugging.md

# Debugging Guide

## First Moves

1. Reproduce in headed mode.
2. Capture a trace before rewriting selectors or waits.
3. Check whether the failure is selector drift, actionability, environment drift, shared state, or a real product regression.

## Inspector and Headed Runs

```bash
npx playwright test --debug
npx playwright test my-test.spec.ts --debug
npx playwright test --headed
```

```typescript
await page.pause();
```

## Trace Viewer

```bash
npx playwright test --trace on
npx playwright show-trace trace.zip
```

```typescript
use: {
  trace: 'retain-on-failure',
}
```

Start with traces for CI and flaky failures. Use screenshots and videos as supporting evidence, not as the primary debugging tool.

## Common Errors

### Element Not Found

Use explicit waits and confirm the right frame or shadow boundary before rewriting selectors. If the locator is ambiguous, improve the locator instead of clicking the first match.

```typescript
await page.waitForSelector('.element');
const frame = page.frameLocator('iframe');
await frame.locator('.element').click();
await page.click('.element', { timeout: 60000 });
```

### Flaky Click

Check visibility, scrolling, overlays, and disabled state before forcing the click.

```typescript
await page.locator('.btn').waitFor({ state: 'visible' });
await page.locator('.btn').scrollIntoViewIfNeeded();
await page.locator('.btn').click();
```

Use `force: true` only after confirming that the overlay or disabled state is not the real bug.

If the click target keeps changing, inspect actionability conditions first: visible, stable, enabled, and actually receiving pointer events.

### Timeout in CI

Slow environments usually need better waits, traces, or fewer workers before they need bigger timeouts.

```typescript
export default defineConfig({
  timeout: 60000,
  expect: { timeout: 10000 },
});

await expect.poll(async () => {
  return await page.locator('.items').count();
}, { timeout: 30000 }).toBeGreaterThan(5);
```

### Network Issues

```typescript
page.on('request', request => {
  console.log('>>', request.method(), request.url());
});

page.on('response', response => {
  console.log('<<', response.status(), response.url());
});

const responsePromise = page.waitForResponse('**/api/data');
await page.click('.load-data');
const response = await responsePromise;
```

## Failure Artifacts

```typescript
test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status !== 'passed') {
    await page.screenshot({
      path: `screenshots/${testInfo.title}.png`,
      fullPage: true,
    });
  }
});
```

## Console and Runtime Errors

```typescript
page.on('console', msg => {
  console.log('PAGE LOG:', msg.text());
});

page.on('pageerror', error => {
  console.log('PAGE ERROR:', error.message);
});
```

## Compare Local vs CI

| Check | Command |
|-------|---------|
| Viewport | `await page.viewportSize()` |
| User agent | `await page.evaluate(() => navigator.userAgent)` |
| Timezone | `await page.evaluate(()

scraping.md

# Rendered-Page Extraction Patterns

Use browser extraction only when the data is hidden behind rendering, client-side interactions, pagination, or downloads. If a plain HTTP fetch or documented API can answer the question, use that first.

## Basic Extraction

```typescript
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/products');
await page.waitForSelector('.product-card');

const products = await page.$$eval('.product-card', cards =>
  cards.map(card => ({
    name: card.querySelector('.name')?.textContent?.trim(),
    price: card.querySelector('.price')?.textContent?.trim(),
    url: card.querySelector('a')?.href,
  }))
);

await browser.close();
```

## Wait Strategies for Dynamic Apps

```typescript
await page.waitForSelector('[data-loaded="true"]');
await page.waitForSelector('.loading-spinner', { state: 'hidden' });

await expect.poll(async () => {
  return await page.locator('.product').count();
}).toBeGreaterThan(0);
```

Use `networkidle` only when the app genuinely becomes quiet. Polling, analytics, and sockets often make it the wrong condition.

## Infinite Scroll

```typescript
async function scrollToBottom(page: Page) {
  let previousHeight = 0;
  let previousCount = 0;

  while (true) {
    const currentHeight = await page.evaluate(() => document.body.scrollHeight);
    if (currentHeight === previousHeight) break;

    previousHeight = currentHeight;
    previousCount = await page.locator('.product-card').count();
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await expect.poll(async () => {
      return await page.locator('.product-card').count();
    }).toBeGreaterThan(previousCount);
  }
}
```

## Pagination

```typescript
async function scrapeAllPages(page: Page) {
  const allData = [];

  while (true) {
    allData.push(...await extractData(page));

    const nextButton = page.getByRole('button', { name: 'Next' });
    if (!(await nextButton.isVisible()) || await nextButton.isDisabled()) break;

    await nextButton.click();
    await page.locator('.results').waitFor();
  }

  return allData;
}
```

## Retries and Error Handling

```typescript
async function scrapeWithRetry(url: string, retries = 3) {
  for (let attempt = 1; attempt <= retries; attempt++) {
    const page = await context.newPage();
    try {
      await page.goto(url, { timeout: 30000 });
      return await extractData(page);
    } catch (error) {
      if (attempt === retries) throw error;
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
    } finally {
      await page.close();
    }
  }
}
```

## Respectful Throttling

```typescript
class RateLimiter {
  private lastRequest = 0;

  constructor(private minDelay: number) {}

  async wait() {
    const elapsed = Date.now() - this.lastRequest;
    if (elapsed < this.minDelay) {
      await new Promise(resolve => setTimeout(resolve, this.minDelay - elapsed));
    }
    this.lastReque

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "32.2K downloads",
      "href": "https://clawhub.ai/ivangdavila/playwright",
      "sourceUrl": "https://clawhub.ai/ivangdavila/playwright",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-05-14T06:29:47.299Z",
      "isPublic": true
    },
    {
      "factKey": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "category": "vendor",
      "href": "https://clawhub.ai/ivangdavila/playwright",
      "sourceUrl": "https://clawhub.ai/ivangdavila/playwright",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-05-11T06:25:12.733Z",
      "isPublic": true,
      "metadata": {}
    },
    {
      "factKey": "protocols",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "category": "compatibility",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-ivangdavila-playwright-2/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-ivangdavila-playwright-2/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-05-11T06:25:12.733Z",
      "isPublic": true,
      "metadata": {}
    },
    {
      "factKey": "traction",
      "label": "Adoption signal",
      "value": "31.8K downloads",
      "category": "adoption",
      "href": "https://clawhub.ai/ivangdavila/playwright",
      "sourceUrl": "https://clawhub.ai/ivangdavila/playwright",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-05-11T06:25:12.733Z",
      "isPublic": true,
      "metadata": {}
    },
    {
      "factKey": "latest_release",
      "label": "Latest release",
      "value": "1.0.3",
      "category": "release",
      "href": "https://clawhub.ai/ivangdavila/playwright",
      "sourceUrl": "https://clawhub.ai/ivangdavila/playwright",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-03-11T17:44:52.810Z",
      "isPublic": true,
      "metadata": {}
    },
    {
      "factKey": "handshake_status",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "category": "security",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-ivangdavila-playwright-2/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-ivangdavila-playwright-2/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true,
      "metadata": {}
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.0.3",
      "description": "Clarified the MCP-first browser automation flow and improved quick-start guidance for forms, screenshots, and extraction.",
      "href": "https://clawhub.ai/ivangdavila/playwright",
      "sourceUrl": "https://clawhub.ai/ivangdavila/playwright",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-03-11T17:44:52.810Z",
      "isPublic": true,
      "metadata": {}
    }
  ]
}

Record generated Oct 9, 2026.

About

Avoid when

Public facts

Install and run

Documentation

Extracted files

SKILL.md

_meta.json

ci-cd.md

debugging.md

scraping.md

Related agents

activepieces

cherry-studio

AionUi

CopilotKit

Machine-readable data