@d-zero/puppeteer-screenshot 1.0.3 → 1.2.0

package/README.md

@@ -16,7 +16,9 @@ import { screenshot } from '@d-zero/puppeteer-screenshot';
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 
+// スクリーンショットのバイナリデータを持つオブジェクトを返します
 const result = await screenshot(page, 'https://example.com', {
+	path: 'path/to/save.png', // 保存先のパスを指定することでファイルに保存できます（省略可）
 	sizes: {
 		desktop: { width: 1400 },
 		mobile: { width: 375, resolution: 2 },

package/dist/before-page-scan.d.ts

@@ -0,0 +1,9 @@
+import type { Listener, PageHook, Size } from './types.js';
+import type { Page } from 'puppeteer';
+type Options = {
+    name: string;
+    hooks?: readonly PageHook[];
+    listener?: Listener;
+} & Size;
+export declare function beforePageScan(page: Page, url: string, options?: Options): Promise<void>;
+export {};

package/dist/before-page-scan.js

@@ -0,0 +1,33 @@
+import { scrollAllOver } from '@d-zero/puppeteer-scroll';
+export async function beforePageScan(page, url, options) {
+    const listener = options?.listener;
+    const name = options?.name ?? 'default';
+    const width = options?.width ?? 1400;
+    const resolution = options?.resolution;
+    listener?.('setViewport', { name, width, resolution });
+    await page.setViewport({
+        width,
+        height: 
+        // Landscape or portrait
+        width > 1000 ? Math.floor(width * 0.75) : Math.floor(width * 1.5),
+        deviceScaleFactor: resolution ?? 1,
+    });
+    if (page.url() === url) {
+        listener?.('load', { name, type: 'reaload' });
+        await page.reload({ waitUntil: 'networkidle0' });
+    }
+    else {
+        listener?.('load', { name, type: 'open' });
+        await page.goto(url, { waitUntil: 'networkidle0' });
+    }
+    for (const hook of options?.hooks ?? []) {
+        await hook(page, {
+            name,
+            width,
+            resolution,
+            log: (message) => listener?.('hook', { name, message }),
+        });
+    }
+    listener?.('scroll', { name });
+    await scrollAllOver(page);
+}

package/dist/get-binary.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="node" resolution-mode="require"/>
 import type { Page } from 'puppeteer';
-export declare function getBinary(page: Page): Promise<Buffer>;
+export declare function getBinary(page: Page): Promise<Uint8Array>;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { screenshot } from './screenshot.js';
+export { screenshotListener } from './screenshot-listener.js';
 export type * from './types.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { screenshot } from './screenshot.js';
+export { screenshotListener } from './screenshot-listener.js';

package/dist/screenshot-listener.d.ts

@@ -0,0 +1,2 @@
+import type { ScreenshotListener } from './types.js';
+export declare function screenshotListener(update: (log: string) => void): ScreenshotListener;

package/dist/screenshot-listener.js

@@ -0,0 +1,43 @@
+import path from 'node:path';
+import c from 'ansi-colors';
+export function screenshotListener(update) {
+    return (phase, data) => {
+        const sizeLabel = c.bgMagenta(` ${data.name} `);
+        switch (phase) {
+            case 'setViewport': {
+                const { width } = data;
+                update(`${sizeLabel} ↔️ Change viewport size to ${width}px`);
+                break;
+            }
+            case 'load': {
+                const { type } = data;
+                update(`${sizeLabel} %earth% ${type === 'open' ? 'Open' : 'Reload'} page`);
+                break;
+            }
+            case 'hook': {
+                const { message } = data;
+                update(`${sizeLabel} ${message}`);
+                break;
+            }
+            case 'scroll': {
+                update(`${sizeLabel} %propeller% Scroll the page`);
+                break;
+            }
+            case 'screenshotStart': {
+                update(`${sizeLabel} 📸 Take a screenshot`);
+                break;
+            }
+            case 'screenshotSaving': {
+                const { path: filePath } = data;
+                const name = path.basename(filePath);
+                update(`${sizeLabel} 🖼  Save a file ${name}`);
+                break;
+            }
+            case 'screenshotError': {
+                const { error } = data;
+                update(`${sizeLabel} ❌️ ${error.message}`);
+                break;
+            }
+        }
+    };
+}

package/dist/screenshot.d.ts

@@ -1,9 +1,13 @@
-import type { Listener, PageHook, Screenshot, Sizes } from './types.js';
+import type { Screenshot, ScreenshotListener } from './types.js';
+import type { PageHook, Sizes } from '@d-zero/puppeteer-page-scan';
 import type { Page } from 'puppeteer';
 type Options = {
+    id?: string;
     sizes?: Sizes;
     hooks?: readonly PageHook[];
-    listener?: Listener;
+    listener?: ScreenshotListener;
+    domOnly?: boolean;
+    path?: string;
 };
 /**
  * Takes screenshots of a web page at different sizes and resolutions.

package/dist/screenshot.js

@@ -1,10 +1,6 @@
-import { scrollAllOver } from '@d-zero/puppeteer-scroll';
+import { beforePageScan, defaultSizes } from '@d-zero/puppeteer-page-scan';
+import { urlToFileName } from '@d-zero/shared/url-to-file-name';
 import { getBinary } from './get-binary.js';
-const defaultSizes = {
-    desktop: { width: 1400 },
-    tablet: { width: 768 },
-    mobile: { width: 375, resolution: 2 },
-};
 /**
  * Takes screenshots of a web page at different sizes and resolutions.
  *
@@ -20,36 +16,53 @@ export async function screenshot(page, url, options) {
     const listener = options?.listener;
     const result = {};
     for (const [name, { width, resolution }] of Object.entries(sizes)) {
-        listener?.('setViewport', { name, width, resolution });
-        await page.setViewport({
+        await beforePageScan(page, url, {
+            ...options,
+            name,
             width,
-            height: 
-            // Landscape or portrait
-            width > 1000 ? Math.floor(width * 0.75) : Math.floor(width * 1.5),
-            deviceScaleFactor: resolution ?? 1,
+            resolution,
         });
-        if (page.url() === url) {
-            listener?.('load', { name, type: 'reaload' });
-            await page.reload({ waitUntil: 'networkidle0' });
+        let binary = null;
+        const filePath = options?.path?.replace(/\.png$/i, `@${name}.png`) ?? null;
+        if (!options?.domOnly) {
+            listener?.('screenshotStart', { name });
+            try {
+                if (filePath && options?.path) {
+                    listener?.('screenshotSaving', { name, path: options.path });
+                    await page.screenshot({
+                        path: filePath,
+                        fullPage: true,
+                        type: 'png',
+                    });
+                }
+                else {
+                    binary = await getBinary(page);
+                    listener?.('screenshotEnd', { name, binary });
+                }
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    listener?.('screenshotError', { name, error });
+                }
+                else {
+                    throw error;
+                }
+            }
         }
-        else {
-            listener?.('load', { name, type: 'open' });
-            await page.goto(url, { waitUntil: 'networkidle0' });
-        }
-        for (const hook of options?.hooks ?? []) {
-            await hook(page, {
-                name,
-                width,
-                resolution,
-                log: (message) => listener?.('hook', { name, message }),
-            });
-        }
-        listener?.('scroll', { name });
-        await scrollAllOver(page);
-        listener?.('screenshotStart', { name });
-        const binary = await getBinary(page);
-        listener?.('screenshotEnd', { name, binary });
-        result[name] = { binary, width, resolution };
+        listener?.('getDOMStart', { name });
+        const title = await page.evaluate(() => document.title);
+        const dom = await page.content();
+        listener?.('getDOMEnd', { name, dom });
+        result[name] = {
+            id: options?.id ?? urlToFileName(url),
+            filePath,
+            url,
+            title,
+            binary,
+            dom,
+            width,
+            resolution,
+        };
     }
     return result;
 }

package/dist/types.d.ts

@@ -1,40 +1,43 @@
-/// <reference types="node" resolution-mode="require"/>
-import type { Page } from 'puppeteer';
-export type Sizes = Record<string, Size>;
-export type Size = {
-    width: number;
-    resolution?: number;
-};
+export type { PageHook } from '@d-zero/puppeteer-page-scan';
+import type { Listener as ScanListener, Phase as ScanPhase, Size } from '@d-zero/puppeteer-page-scan';
 export type Screenshot = {
-    binary: Buffer;
+    id: string;
+    filePath: string | null;
+    url: string;
+    title: string;
+    binary: Uint8Array | null;
+    dom: string;
 } & Size;
-export type Phase = {
-    setViewport: {
+export type ScreenshotPhase = {
+    screenshotStart: {
         name: string;
-        width: number;
-        resolution?: number;
     };
-    hook: {
+    screenshotEnd: {
         name: string;
-        message: string;
+        binary: Uint8Array;
     };
-    load: {
+    screenshotSaving: {
         name: string;
-        type: 'open' | 'reaload';
+        path: string;
     };
-    scroll: {
+    screenshotError: {
         name: string;
+        error: Error;
     };
-    screenshotStart: {
+    getDOMStart: {
         name: string;
     };
-    screenshotEnd: {
+    getDOMEnd: {
         name: string;
-        binary: Buffer;
+        dom: string;
     };
-};
-export type Listener = (phase: keyof Phase, data: Phase[keyof Phase]) => void;
-export type PageHook = (page: Page, size: Size & {
-    name: string;
-    log: (message: string) => void;
-}) => Promise<void>;
+} & ScanPhase;
+export type ScreenshotListener = ScanListener<ScreenshotPhase>;
+/**
+ * @deprecated
+ */
+export type Phase = ScreenshotPhase;
+/**
+ * @deprecated
+ */
+export type Listener = ScreenshotListener;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/puppeteer-screenshot",
-	"version": "1.0.3",
+	"version": "1.2.0",
 	"description": "Screenshot utility for puppeteer",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -23,10 +23,13 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@d-zero/puppeteer-scroll": "1.0.3"
+		"@d-zero/puppeteer-page-scan": "1.0.0",
+		"@d-zero/puppeteer-scroll": "1.0.5",
+		"@d-zero/shared": "0.5.0",
+		"ansi-colors": "4.1.3"
 	},
 	"devDependencies": {
-		"puppeteer": "22.11.0"
+		"puppeteer": "23.5.0"
 	},
-	"gitHead": "8181fac55ec45eb13c5a25e4187b7b3621f2e34c"
+	"gitHead": "e8f65086bf7c316dda6667f1173da8585a5ef19c"
 }