@d-zero/puppeteer-screenshot 3.0.0 → 3.1.0

package/dist/get-binary.d.ts

@@ -1,6 +1,7 @@
-import type { Page } from '@d-zero/puppeteer-page';
+import type { ElementHandle, Page, ScreenshotOptions } from 'puppeteer';
 /**
  *
- * @param page
+ * @param scope
+ * @param options
  */
-export declare function getBinary(page: Page): Promise<Uint8Array<ArrayBufferLike>>;
+export declare function getBinary(scope: Page | ElementHandle<Element>, options?: Readonly<ScreenshotOptions>): Promise<Uint8Array<ArrayBufferLike>>;

package/dist/get-binary.js

@@ -1,10 +1,11 @@
 /**
  *
- * @param page
+ * @param scope
+ * @param options
  */
-export async function getBinary(page) {
-    const buffer = await page.screenshot({
-        fullPage: true,
+export async function getBinary(scope, options) {
+    const buffer = await scope.screenshot({
+        ...options,
         type: 'png',
         encoding: 'binary',
     });

package/dist/screenshot-listener.js

@@ -4,12 +4,12 @@ import { pageScanLoggers } from '@d-zero/puppeteer-page-scan';
 export const screenshotListener = createListener((log) => {
     return {
         ...pageScanLoggers(log),
-        screenshotStart() {
-            log(`📸 Take a screenshot`);
+        screenshotStart({ selector }) {
+            log(`📸 Take a screenshot` + (selector ? ` for ${selector}` : ''));
         },
-        screenshotSaving({ path: filePath }) {
+        screenshotSaving({ path: filePath, selector }) {
             const name = path.basename(filePath);
-            log(`🖼  Save a file ${name}`);
+            log(`🖼  Save a file ${name}` + (selector ? ` for ${selector}` : ''));
         },
         screenshotError({ error }) {
             log(`❌️ ${error.message}`);

package/dist/screenshot.d.ts

@@ -1,7 +1,7 @@
 import type { Screenshot, ScreenshotPhase } from './types.js';
 import type { Listener } from '@d-zero/puppeteer-general-actions';
-import type { Page } from '@d-zero/puppeteer-page';
 import type { PageHook, Sizes } from '@d-zero/puppeteer-page-scan';
+import type { Page } from 'puppeteer';
 type Options = {
     id?: string;
     sizes?: Sizes;
@@ -9,6 +9,8 @@ type Options = {
     listener?: Listener<ScreenshotPhase>;
     domOnly?: boolean;
     path?: string;
+    selector?: string;
+    ignore?: string;
 };
 /**
  * Takes screenshots of a web page at different sizes and resolutions.

package/dist/screenshot.js

@@ -24,21 +24,51 @@ export async function screenshot(page, url, options) {
                 listener?.(phase, data);
             },
         });
+        if (options?.ignore) {
+            await page.evaluate((ignore) => {
+                const scope = document.body;
+                const nodes = scope.querySelectorAll(ignore);
+                for (const node of nodes) {
+                    const box = node.getBoundingClientRect();
+                    const replacement = document.createElement('div');
+                    replacement.style.position = node.style.position;
+                    replacement.style.top = node.style.top;
+                    replacement.style.left = node.style.left;
+                    replacement.style.right = node.style.right;
+                    replacement.style.bottom = node.style.bottom;
+                    replacement.style.zIndex = node.style.zIndex;
+                    replacement.style.margin = node.style.margin;
+                    replacement.style.border = node.style.border;
+                    replacement.style.width = `${box.width}px`;
+                    replacement.style.height = `${box.height}px`;
+                    node.replaceWith(replacement);
+                }
+            }, options?.ignore);
+        }
         let binary = null;
         const filePath = options?.path?.replace(/\.png$/i, `@${name}.png`) ?? null;
         if (!options?.domOnly) {
             listener?.('screenshotStart', { name });
+            const scope = options?.selector
+                ? await page.waitForSelector(options.selector)
+                : page;
+            const fullPage = options?.selector ? false : true;
+            if (!scope) {
+                throw new Error(`Element not found: ${options?.selector}`);
+            }
             try {
                 if (filePath && options?.path) {
                     listener?.('screenshotSaving', { name, path: options.path });
-                    await page.screenshot({
-                        path: filePath,
-                        fullPage: true,
+                    await scope.screenshot({
+                        fullPage,
                         type: 'png',
+                        path: filePath,
                     });
                 }
                 else {
-                    binary = await getBinary(page);
+                    binary = await getBinary(scope, {
+                        fullPage,
+                    });
                     listener?.('screenshotEnd', { name, binary });
                 }
             }
@@ -54,6 +84,28 @@ export async function screenshot(page, url, options) {
         listener?.('getDOMStart', { name });
         const title = await page.evaluate(() => document.title);
         const dom = await page.content();
+        const text = await page.evaluate((selector) => {
+            const scope = selector
+                ? (document.querySelector(selector) ?? document.body)
+                : document.body;
+            // Normalize text content for diff accuracy by adding line breaks between block elements
+            // This ensures consistent text extraction regardless of HTML formatting
+            const lineBreaks = scope.querySelectorAll('div, h1, h2, h3, h4, h5, h6, br, p, li, dt, dd, th, td');
+            for (const node of lineBreaks) {
+                node.append('\n');
+            }
+            const textContent = scope.textContent ?? '';
+            const altTextList = [...(scope.querySelectorAll('img') ?? [])]
+                .map((img) => {
+                const alt = img.getAttribute('alt');
+                return alt ?? '';
+            })
+                .filter((alt) => alt !== '');
+            return {
+                textContent,
+                altTextList,
+            };
+        }, options?.selector);
         listener?.('getDOMEnd', { name, dom });
         result[name] = {
             id: options?.id ?? urlToFileName(url),
@@ -62,6 +114,7 @@ export async function screenshot(page, url, options) {
             title,
             binary,
             dom,
+            text,
             width,
             resolution,
         };

package/dist/types.d.ts

@@ -8,10 +8,15 @@ export type Screenshot = {
     title: string;
     binary: Uint8Array | null;
     dom: string;
+    text: {
+        textContent: string;
+        altTextList: readonly string[];
+    };
 } & Size;
 export type ScreenshotPhase = {
     screenshotStart: {
         name: string;
+        selector?: string;
     };
     screenshotEnd: {
         name: string;
@@ -20,6 +25,7 @@ export type ScreenshotPhase = {
     screenshotSaving: {
         name: string;
         path: string;
+        selector?: string;
     };
     screenshotError: {
         name: string;
@@ -27,6 +33,7 @@ export type ScreenshotPhase = {
     };
     getDOMStart: {
         name: string;
+        selector?: string;
     };
     getDOMEnd: {
         name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/puppeteer-screenshot",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "Screenshot utility for puppeteer",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -25,11 +25,14 @@
 	},
 	"dependencies": {
 		"@d-zero/puppeteer-general-actions": "1.2.0",
-		"@d-zero/puppeteer-page-scan": "3.0.0",
-		"@d-zero/shared": "0.7.0"
+		"@d-zero/puppeteer-page-scan": "4.0.1",
+		"@d-zero/shared": "0.9.0"
 	},
 	"devDependencies": {
-		"@d-zero/puppeteer-page": "0.3.0"
+		"puppeteer": "24.10.1"
 	},
-	"gitHead": "e4fd17857e31022d121527b00fd7f009dbdb2142"
+	"peerDependencies": {
+		"puppeteer": "24.10.1"
+	},
+	"gitHead": "04c6969564182c36ee38ef41e78130936dfa4863"
 }