puppeteer 的 document.styleSheets

Question

我目前正在从 puppeteer 中的给定页面获取样式表列表，以便稍后将 vh 转换为像素值以获取可靠的屏幕截图。

我目前正在尝试以这种方式检索样式表：
const current_styles = await page.evaluate(() => window.document.styleSheets);
但是我得到的结果与在常规网页的控制台中简单地运行 document.styleSheets 所得到的结果不同。

我得到了一个响应，但它是一个空对象数组：

{
  '1': {},
  '2': {},
  '3': {},
  '4': {},
  '5': {},
  '6': {},
  '7': {},
  '8': {},
}

Console.log(window.document.styleSheets) 在同一个域中，但在普通浏览器中检查控制台会产生以下响应：

{
   0: CSSStyleSheet {ownerRule: null …}
   1: CSSStyleSheet {ownerRule: null…}
   2: CSSStyleSheet {ownerRule: null…}
   3: CSSStyleSheet {ownerRule: null…}
   4: CSSStyleSheet {ownerRule: null…}
   5: CSSStyleSheet {ownerRule: null…}
   6: CSSStyleSheet {ownerRule: null…}
   7: CSSStyleSheet {ownerRule: null…}
}

任何有关使其工作的帮助都会很棒，谢谢！

Answer 1

我应该使用的技术是page.evaluateHandle与 JSHandle 结合使用，我可以执行以下操作：

const current_styles = await page.evaluateHandle(() => {
   return document.styleSheets;
});

Console.log(current_styles) 在此之后返回预期值。

从文档：

page.evaluate 和 page.evaluateHandle 之间的唯一区别是 page.evaluateHandle 返回页内对象 (JSHandle)。 https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pageevaluatehandlepagefunction-args

Answer 2

不幸的是， page.evaluate()只能传输可序列化的值（粗略地说，JSON 可以处理的值）。 由于document.styleSheets返回不可序列化的 CSSStyleSheet 元素集合，因此集合中的每个元素都被替换为一个空对象。 您需要返回可序列化的值（例如，CSSRule.cssText 数组）或使用类似page.evaluateHandle()和JSHandle API 的内容。