What makes browser-recording notable?

1.6K downloads. Trust evidence available

How should browser-recording 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.

agentCLAWHUBUnverified

browser-recording

Records browser sessions via Playwright and converts video to GIF Skill: browser-recording Owner: athola Summary: Records browser sessions via Playwright and converts video to GIF Tags: latest:1.9.19 Version history: v1.9.19 | 2026-08-26T13:22:46.041Z | user Release v1.9.19 v1.9.17 | 2026-07-30T05:42:37.119Z | user Release v1.9.17 v1.9.16 | 2026-07-14T19:59:28.809Z | user Release v1.9.16 v1.9.14 | 2026-06-30T18:06:55.013Z | user Release v1.9.14 v1.9.13 | 2026-06-27T16:24:47.231Z |

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.6k

Updated

Oct 10, 2026

Version

1.9.19

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.6K downloads reported by the source. Last updated 10/10/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.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.6K downloadsadoption · observed Oct 10, 2026
Latest release: 1.9.19release · observed Aug 26, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17emme0e2m3cpf7k2jvp3a84984b8z9:nm-scry-browser-recording

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
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-athola-nm-scry-browser-recording/snapshot"

Documentation

CLAWHUB

143,991 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: browser-recording
description: Records browser sessions via Playwright and converts video to GIF
version: 1.9.8
triggers:
  - playwright
  - browser
  - recording
  - video
  - web
  - tutorial
  - creating web UI tutorials or demos showing browser interactions
metadata: {"openclaw": {"homepage": "https://github.com/athola/claude-night-market/tree/master/plugins/scry", "emoji": "\ud83e\udd9e", "requires": {"config": ["night-market.scry:gif-generation"]}}}
source: claude-night-market
source_plugin: scry
---

> **Night Market Skill** — ported from [claude-night-market/scry](https://github.com/athola/claude-night-market/tree/master/plugins/scry). For the full experience with agents, hooks, and commands, install the Claude Code plugin.


## Table of Contents

- [Overview](#overview)
- [Required TodoWrite Items](#required-todowrite-items)
- [Process](#process)
- [Step 1: Validate Playwright Installation](#step-1:-validate-playwright-installation)
- [Step 2: Check Spec File](#step-2:-check-spec-file)
- [Step 3: Execute Recording](#step-3:-execute-recording)
- [Step 4: Convert to GIF](#step-4:-convert-to-gif)
- [Example Playwright Spec](#example-playwright-spec)
- [Playwright Configuration](#playwright-configuration)
- [Exit Criteria](#exit-criteria)
- [Error Handling](#error-handling)
- [Output Locations](#output-locations)
- [See Also](#see-also)


# Browser Recording Skill

Record browser sessions using Playwright to create video captures of web UI interactions for tutorials and documentation.


## When To Use

- Recording browser sessions with Playwright
- Creating web application demo recordings

## When NOT To Use

- Terminal-only workflows - use scry:vhs-recording instead
- Static screenshots - use standard screenshot tools

## Overview

This skill uses Playwright's built-in video recording to capture browser interactions. The workflow:

1. Validate Playwright installation
2. Execute a Playwright spec with video recording enabled
3. Retrieve the recorded video (WebM format)
4. Convert to GIF using the gif-generation skill

> **💡 Note**: Claude Code 2.0.72+ includes native Chrome integration for interactive browser control. This skill (Playwright) is designed for **automated recording workflows, CI/CD, and cross-browser support**. For interactive debugging and live testing, consider using native Chrome integration. Both approaches complement each other - develop interactively with Chrome, then automate with Playwright specs.

## Required TodoWrite Items

When invoking this skill, create todos for:

```
- [ ] Validate Playwright is installed and configured
- [ ] Check spec file exists at specified path
- [ ] Execute Playwright spec with video recording
- [ ] Locate and verify video output
- [ ] Convert video to GIF using gif-generation skill
```
**Verification:** Run the command with `--help` flag to verify availability.

## Process

### Step 1: Validate Playwright Installation

Check that Playwright is available:

```bash
npx playwright

_meta.json

{
  "ownerId": "kn7d107jg9jv602h9ytsegydq184a42s",
  "slug": "nm-scry-browser-recording",
  "version": "1.9.19",
  "publishedAt": 1787750566041
}

modules/spec-execution.md

# Spec Execution Module

Execute Playwright specs with video recording enabled.

## Playwright Configuration for Video

### Minimal Config

Create `playwright.config.ts`:

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

export default defineConfig({
  use: {
    video: 'on',
  },
  outputDir: './test-results',
});
```

### Full Recording Config

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

export default defineConfig({
  testDir: './specs',
  outputDir: './test-results',

  use: {
    // Video settings
    video: {
      mode: 'on',           // 'on' | 'off' | 'retain-on-failure' | 'on-first-retry'
      size: {
        width: 1280,
        height: 720
      }
    },

    // Browser settings
    viewport: { width: 1280, height: 720 },
    headless: true,

    // Slow down for visibility in recordings
    launchOptions: {
      slowMo: 100
    },

    // Browser context
    contextOptions: {
      recordVideo: {
        dir: './test-results/videos',
        size: { width: 1280, height: 720 }
      }
    }
  },

  // Disable retries for recording
  retries: 0,

  // Single worker for consistent recording
  workers: 1,
});
```

## Running Specs

### Basic Execution

```bash
npx playwright test specs/demo.spec.ts
```

### With Custom Config

```bash
npx playwright test specs/demo.spec.ts --config=playwright.recording.config.ts
```

### Common Options

```bash
# Run specific test by name
npx playwright test -g "demo workflow"

# Run in headed mode (visible browser)
npx playwright test --headed

# Use specific browser
npx playwright test --project=chromium

# Set timeout
npx playwright test --timeout=60000

# Output verbose logs
npx playwright test --debug
```

## Video Output Paths

Playwright creates videos at:
```
<outputDir>/<test-file-name>-<browser>/<test-name>/video.webm
```

Example:
```
test-results/demo-spec-ts-chromium/demo-workflow/video.webm
```

### Programmatic Video Path

Access video path in test:

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

test('demo', async ({ page }, testInfo) => {
  // ... test actions ...

  // After test, attach video path
  const video = page.video();
  if (video) {
    const path = await video.path();
    console.log('Video saved to:', path);
  }
});
```

## Error Handling

### Common Issues

**Browser not installed:**
```bash
npx playwright install chromium
```

**Timeout errors:**
```typescript
// Increase action timeout
await page.click('button', { timeout: 10000 });

// Or set global timeout in config
use: {
  actionTimeout: 10000,
}
```

**Video not created:**
- validate `video: 'on'` in config
- Check test actually runs (not skipped)
- Verify outputDir is writable

**Empty or corrupted video:**
- Add `await page.waitForTimeout(500)` before test ends
- validate page has loaded: `await page.waitForLoadState('networkidle')`

### Exit Code Handling

```bash
npx playwright test specs/demo.spec.ts
EXIT_CODE=$?

if [ $EXIT_CODE -eq 0 ]; then
  echo "Recordi

modules/video-capture.md

# Video Capture Module

Video format options, quality settings, and post-processing for Playwright recordings.

## Video Format

Playwright records video in **WebM** format with VP8 codec. This format:
- Has good compression
- Supports transparency (if needed)
- Works well with ffmpeg for conversion
- Is natively supported by most browsers

## Resolution Settings

### Common Resolutions

| Resolution | Use Case | Aspect Ratio |
|------------|----------|--------------|
| 1920x1080 | Full HD, detailed demos | 16:9 |
| 1280x720 | Standard tutorials | 16:9 |
| 1024x768 | Compact demos | 4:3 |
| 800x600 | Small GIF output | 4:3 |

### Playwright Video Size Configuration

```typescript
// In playwright.config.ts
use: {
  video: {
    mode: 'on',
    size: { width: 1280, height: 720 }
  },
  viewport: { width: 1280, height: 720 }
}
```

**Important:** Match `video.size` to `viewport` for best quality.

### Per-Test Video Settings

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

test.use({
  video: {
    mode: 'on',
    size: { width: 1920, height: 1080 }
  },
  viewport: { width: 1920, height: 1080 }
});

test('high-res demo', async ({ page }) => {
  // Test runs at 1080p
});
```

## Quality Considerations

### Frame Rate

Playwright records at approximately 25 fps. This is sufficient for UI demos.

### Bitrate

WebM videos from Playwright use variable bitrate. Typical sizes:
- 720p, 30 seconds: 2-5 MB
- 1080p, 30 seconds: 5-10 MB

### Minimizing File Size

1. **Smaller viewport** - Reduce dimensions
2. **Shorter duration** - Trim unnecessary pauses
3. **Simple animations** - Fewer visual changes = smaller file

## Playwright Video Configuration in Tests

### Enable Video for Specific Tests

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

// Enable video for this test file
test.describe.configure({ mode: 'serial' });

test.use({
  video: 'on',
  viewport: { width: 1280, height: 720 }
});

test('recorded demo', async ({ page }) => {
  await page.goto('https://example.com');
  await page.waitForTimeout(1000);
});
```

### Conditional Recording

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

const RECORD = process.env.RECORD === 'true';

test.use({
  video: RECORD ? 'on' : 'off'
});

test('conditionally recorded', async ({ page }) => {
  // Only records when RECORD=true
});
```

### Custom Video Directory

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

test.use({
  contextOptions: {
    recordVideo: {
      dir: './custom-video-output',
      size: { width: 1280, height: 720 }
    }
  }
});
```

## Post-Processing with ffmpeg

### Convert WebM to MP4

```bash
ffmpeg -i video.webm -c:v libx264 -crf 23 output.mp4
```

### Extract Specific Time Range

```bash
# Extract from 0:05 to 0:15
ffmpeg -i video.webm -ss 00:00:05 -to 00:00:15 -c copy trimmed.webm
```

### Change Resolution

```bash
# Scale to 800px width, maintain aspect ratio
ffmpeg -i video.webm -vf "scale=800:-1" scaled.webm
```

### Speed Up Video

```bash
# 2x spe

skill-card.md

## Description:

Records browser sessions via Playwright and converts video to GIF.

This skill is ready for commercial/non-commercial use.

## Publisher:

[athola](https://clawhub.ai/user/athola)

### License/Terms of Use:

MIT-0

## Use Case:

Developers and technical writers use this skill to automate browser interactions with Playwright and produce WebM or GIF recordings for tutorials, documentation, and web application demos.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: Browser recordings and GIFs can capture sensitive account data or private page content.

Mitigation: Record against sanitized demo or test accounts and review generated media before sharing.

Risk: Untrusted Playwright specs or configs can drive browser actions outside the intended demo flow.

Mitigation: Use trusted specs and configs, review commands before execution, and keep dependencies pinned with a lockfile.

## Reference(s):

- [ClawHub Skill Page](https://clawhub.ai/athola/skills/nm-scry-browser-recording)
- [clawdis homepage](https://github.com/athola/claude-night-market/tree/master/plugins/scry)
- [Spec Execution Module](artifact/modules/spec-execution.md)
- [Video Capture Module](artifact/modules/video-capture.md)

## Skill Output:

**Output Type(s):** [guidance, shell commands, code, configuration, markdown]

**Output Format:** [Markdown with inline bash and TypeScript code blocks]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [May include Playwright spec and configuration snippets, recording file paths, and GIF conversion guidance.]

## Skill Version(s):

1.9.19 (source: server release metadata; artifact frontmatter lists 1.9.8)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Github ReposUpdated 15h 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 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.