1#!/usr/bin/env node
2 
3import { mkdir } from "node:fs/promises";
4import path from "node:path";
5import { chromium } from "playwright";
6 
7function usage(exitCode = 1) {
8  const message = [
9    "Usage: node scripts/capture-with-injection.js --url <url> --out <file> [options]",
10    "",
11    "Options:",
12    "  --script <file>            Inject a browser-side JavaScript file after load",
13    "  --css <file>               Inject a CSS file after load",
14    "  --width <px>               Viewport width (default: 1440)",
15    "  --height <px>              Viewport height (default: 2200)",
16    "  --device-scale-factor <n>  Device scale factor (default: 1)",
17    "  --wait-until <event>       domcontentloaded | load | networkidle (default: networkidle)",
18    "  --wait-for-selector <sel>  Wait for a selector before injections",
19    "  --wait-for-text <text>     Wait for visible text before injections",
20    "  --after-wait-ms <ms>       Wait after injections before screenshot",
21    "  --mobile                   Enable mobile/touch page settings",
22    "  --full-page                Capture a full-page screenshot",
23    "  --help                     Show this help",
24  ].join("\n");
25  console.error(message);
26  process.exit(exitCode);
27}
28 
29function resolveInput(value) {
30  return path.resolve(process.cwd(), value);
31}
32 
33function readFlagValue(args, index, name) {
34  const value = args[index + 1];
35  if (!value || value.startsWith("--")) {
36    throw new Error(`Missing value for ${name}`);
37  }
38  return value;
39}
40 
41async function main() {
42  const args = process.argv.slice(2);
43  const options = {
44    url: "",
45    out: "",
46    width: 1440,
47    height: 2200,
48    deviceScaleFactor: 1,
49    waitUntil: "networkidle",
50    waitForSelector: "",
51    waitForText: "",
52    afterWaitMs: 0,
53    mobile: false,
54    fullPage: false,
55    scripts: [],
56    cssFiles: [],
57  };
58 
59  for (let index = 0; index < args.length; index += 1) {
60    const arg = args[index];
61    switch (arg) {
62      case "--url":
63        options.url = readFlagValue(args, index, arg);
64        index += 1;
65        break;
66      case "--out":
67        options.out = resolveInput(readFlagValue(args, index, arg));
68        index += 1;
69        break;
70      case "--script":
71        options.scripts.push(resolveInput(readFlagValue(args, index, arg)));
72        index += 1;
73        break;
74      case "--css":
75        options.cssFiles.push(resolveInput(readFlagValue(args, index, arg)));
76        index += 1;
77        break;
78      case "--width":
79        options.width = Number.parseInt(readFlagValue(args, index, arg), 10);
80        index += 1;
81        break;
82      case "--height":
83        options.height = Number.parseInt(readFlagValue(args, index, arg), 10);
84        index += 1;
85        break;
86      case "--device-scale-factor":
87        options.deviceScaleFactor = Number.parseFloat(readFlagValue(args, index, arg));
88        index += 1;
89        break;
90      case "--wait-until":
91        options.waitUntil = readFlagValue(args, index, arg);
92        index += 1;
93        break;
94      case "--wait-for-selector":
95        options.waitForSelector = readFlagValue(args, index, arg);
96        index += 1;
97        break;
98      case "--wait-for-text":
99        options.waitForText = readFlagValue(args, index, arg);
100        index += 1;
101        break;
102      case "--after-wait-ms":
103        options.afterWaitMs = Number.parseInt(readFlagValue(args, index, arg), 10);
104        index += 1;
105        break;
106      case "--mobile":
107        options.mobile = true;
108        break;
109      case "--full-page":
110        options.fullPage = true;
111        break;
112      case "--help":
113        usage(0);
114        break;
115      default:
116        throw new Error(`Unknown argument: ${arg}`);
117    }
118  }
119 
120  if (!options.url || !options.out) {
121    usage(1);
122  }
123 
124  if (!Number.isFinite(options.width) || !Number.isFinite(options.height)) {
125    throw new Error("Viewport width and height must be numbers.");
126  }
127 
128  await mkdir(path.dirname(options.out), { recursive: true });
129 
130  const browser = await chromium.launch({ headless: true });
131  try {
132    const page = await browser.newPage({
133      viewport: { width: options.width, height: options.height },
134      deviceScaleFactor: options.deviceScaleFactor,
135      isMobile: options.mobile,
136      hasTouch: options.mobile,
137    });
138 
139    await page.goto(options.url, { waitUntil: options.waitUntil });
140 
141    if (options.waitForSelector) {
142      await page.waitForSelector(options.waitForSelector);
143    }
144 
145    if (options.waitForText) {
146      await page.getByText(options.waitForText).first().waitFor();
147    }
148 
149    for (const cssPath of options.cssFiles) {
150      await page.addStyleTag({ path: cssPath });
151    }
152 
153    for (const scriptPath of options.scripts) {
154      await page.addScriptTag({ path: scriptPath });
155    }
156 
157    if (options.afterWaitMs > 0) {
158      await page.waitForTimeout(options.afterWaitMs);
159    }
160 
161    await page.screenshot({
162      path: options.out,
163      fullPage: options.fullPage,
164    });
165 
166    const payload = {
167      title: await page.title(),
168      url: page.url(),
169      output: options.out,
170      viewport: {
171        width: options.width,
172        height: options.height,
173        deviceScaleFactor: options.deviceScaleFactor,
174        mobile: options.mobile,
175      },
176      injections: {
177        scripts: options.scripts,
178        cssFiles: options.cssFiles,
179      },
180    };
181 
182    console.log(JSON.stringify(payload, null, 2));
183  } finally {
184    await browser.close();
185  }
186}
187 
188main().catch((error) => {
189  console.error(error instanceof Error ? error.message : String(error));
190  process.exit(1);
191});
192