@d-zero/puppeteer-screenshot 3.1.1 → 3.1.3

package/dist/get-css.d.ts

@@ -0,0 +1,6 @@
+import type { Page } from 'puppeteer';
+/**
+ *
+ * @param page
+ */
+export declare function getCSS(page: Page): Promise<Record<string, Record<string, string>>>;

package/dist/get-css.js

@@ -0,0 +1,70 @@
+/**
+ *
+ * @param page
+ */
+export async function getCSS(page) {
+    // DevTools Protocolセッションを開始
+    const client = await page.createCDPSession();
+    await client.send('DOM.enable');
+    await client.send('CSS.enable');
+    // 要素のDOM Node IDを取得（まずドキュメントから探索）
+    const { root } = await client.send('DOM.getDocument');
+    const elements = await client.send('DOM.querySelectorAll', {
+        nodeId: root.nodeId,
+        selector: '*',
+    });
+    const result = {};
+    for (const nodeId of elements.nodeIds) {
+        // ノード情報を取得
+        const { node } = await client.send('DOM.describeNode', { nodeId });
+        const nodeName = node.localName;
+        // CSS.getMatchedStylesForNodeでスタイル情報を取得
+        const declarationData = await client.send('CSS.getMatchedStylesForNode', { nodeId });
+        const { computedStyle } = await client.send('CSS.getComputedStyleForNode', {
+            nodeId,
+        });
+        // UAスタイル以外のプロパティを抽出
+        const { inlineStyle, matchedCSSRules } = declarationData;
+        if (computedStyle.find((p) => p.name === 'display')?.value === 'none') {
+            continue;
+        }
+        const explicitProperties = {};
+        if (inlineStyle) {
+            for (const prop of inlineStyle.cssProperties) {
+                if (prop.disabled || !prop.value)
+                    continue;
+                const computedStyleValue = computedStyle.find((p) => p.name === prop.name)?.value;
+                if (computedStyleValue === prop.value)
+                    continue;
+                explicitProperties[prop.name + '(inline)'] = prop.value;
+            }
+        }
+        for (const ruleMatch of matchedCSSRules ?? []) {
+            if (ruleMatch.rule.origin === 'regular') {
+                // UAスタイルシート以外
+                for (const prop of ruleMatch.rule.style.cssProperties) {
+                    if (!prop.value)
+                        continue;
+                    const computedStyleValue = computedStyle.find((p) => p.name === prop.name)?.value;
+                    if (computedStyleValue === prop.value)
+                        continue;
+                    explicitProperties[prop.name + '(regular)'] = prop.value;
+                }
+            }
+        }
+        // Sort property name
+        const sortedProperties = Object.entries(explicitProperties).toSorted((a, b) => {
+            // Remove vendor prefix
+            a[0] = a[0].replace(/^-(?:webkit|moz|ms)-/, '');
+            b[0] = b[0].replace(/^-(?:webkit|moz|ms)-/, '');
+            return a[0].localeCompare(b[0]);
+        });
+        result[`${nodeName}[${nodeId}]`] = Object.fromEntries(sortedProperties);
+        await client.send('DOM.setAttributeValue', {
+            nodeId,
+            name: 'data-css-properties',
+            value: JSON.stringify(sortedProperties),
+        });
+    }
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/puppeteer-screenshot",
-	"version": "3.1.1",
+	"version": "3.1.3",
 	"description": "Screenshot utility for puppeteer",
 	"author": "D-ZERO",
 	"license": "MIT",
@@ -24,14 +24,14 @@
 	},
 	"dependencies": {
 		"@d-zero/puppeteer-general-actions": "1.2.1",
-		"@d-zero/puppeteer-page-scan": "4.0.2",
-		"@d-zero/shared": "0.9.1"
+		"@d-zero/puppeteer-page-scan": "4.0.4",
+		"@d-zero/shared": "0.9.2"
 	},
 	"devDependencies": {
-		"puppeteer": "24.10.2"
+		"puppeteer": "24.17.1"
 	},
 	"peerDependencies": {
-		"puppeteer": "24.10.2"
+		"puppeteer": "24.17.1"
 	},
-	"gitHead": "1218a023e62c79efeece6350d561f2e1906be7ea"
+	"gitHead": "6fa0fd190c54351762a70039cd8dfcafc51caa0b"
 }