|
1 | 1 | #!/usr/bin/env node |
2 | | -// Simple Playwright-based script to capture a screenshot and record a short video of a Storybook page. |
| 2 | +// ESM-compatible Playwright-based script to capture a screenshot and record a short video of a Storybook page. |
3 | 3 | // Usage: STORYBOOK_URL=http://localhost:6006 STORY_PATH='/?path=/story/your--story' OUT_DIR=docs/static/images node scripts/capture-storybook.js |
4 | 4 |
|
5 | | -const { chromium } = require('playwright'); |
6 | | -const fs = require('fs'); |
| 5 | +import { chromium } from 'playwright'; |
| 6 | +import fs from 'fs'; |
7 | 7 |
|
8 | | -(async () => { |
9 | | - const url = process.env.STORYBOOK_URL || 'http://localhost:6006'; |
10 | | - const path = process.env.STORY_PATH || '/'; |
11 | | - const out = process.env.OUT_DIR || 'docs/static/images'; |
12 | | - fs.mkdirSync(out, { recursive: true }); |
13 | | - const videoDir = `${out}/video`; |
14 | | - fs.mkdirSync(videoDir, { recursive: true }); |
| 8 | +const url = process.env.STORYBOOK_URL || 'http://localhost:6006'; |
| 9 | +const path = process.env.STORY_PATH || '/'; |
| 10 | +const out = process.env.OUT_DIR || 'docs/static/images'; |
| 11 | +fs.mkdirSync(out, { recursive: true }); |
| 12 | +const videoDir = `${out}/video`; |
| 13 | +fs.mkdirSync(videoDir, { recursive: true }); |
15 | 14 |
|
| 15 | +try { |
16 | 16 | const browser = await chromium.launch(); |
17 | 17 | const context = await browser.newContext({ recordVideo: { dir: videoDir, size: { width: 1280, height: 720 } } }); |
18 | 18 | const page = await context.newPage(); |
@@ -42,4 +42,7 @@ const fs = require('fs'); |
42 | 42 |
|
43 | 43 | console.log('Done. Convert the webm to gif using ffmpeg if you need GIFs.'); |
44 | 44 | process.exit(0); |
45 | | -})().catch(e => { console.error(e); process.exit(1); }); |
| 45 | +} catch (e) { |
| 46 | + console.error(e); |
| 47 | + process.exit(1); |
| 48 | +} |
0 commit comments