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 的內容。