如何從影子根元素獲取文本？

Question

我有一個 web 頁面，我正在使用 Puppeteer 實現自動化。 我想從影子根元素中獲取文本。 我的困惑是影子根元素可見性是通過在瀏覽器設置中啟用屬性來啟用的。 但是當腳本運行時，默認情況下會啟動一個新的瀏覽器實例，同時禁用 shadow root。 那么我怎樣才能訪問該元素。 有沒有辦法以編程方式啟用影子根。 我附上了我的 DOM 元素的屏幕截圖。

Answer 1

為此，您可以在 puppeteer 中使用query-selector-shadow-dom npm 包。

const puppeteer = require('puppeteer');
const {  QueryHandler } = require('query-selector-shadow-dom/plugins/puppeteer');
(async () => {
    try {
        await puppeteer.__experimental_registerCustomQueryHandler('shadow', QueryHandler);
        const browser = await puppeteer.launch({
            headless: false
        });
        const page = await browser.newPage();
        await page.goto('http://some-site.com/');

        await page.waitForSelector('shadow/div'); // if it'd have a class you could replace "div" with the ".class-name"
        const shadowDiv = await page.$('shadow/div');
        const text = await page.evaluate(el => el.innerText, shadowDiv);

        await browser.close();
    } catch (e) {
      console.error(e);
    }
})()

---

您提到您需要在 chrome 設置中應用 shadow DOM，我建議使用所需設置創建一個 chrome 配置文件（ Custom Profile 1 ），然后將此配置文件與 puppeteer 一起使用：

例如：

const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--user-data-dir=C:\\Users\\user.name\\AppData\\Local\\Chromium\\User Data',
      '--profile-directory=Custom Profile 1'
    ]
  })

上面的示例適用於 Windows，請在此處查看更多平台和更多信息。

Answer 2

由於此 PR https://github.com/puppeteer/puppeteer/pull/6509 ，您可以使用內置的pierce查詢處理程序。 在文檔附帶的HTML示例中：

<div>
  <custom-element>
    <div></div>
  </custom-element>
</div>

此調用使您可以訪問影子根目錄中的 div：

await page.$$('pierce/div')

不再需要 @theDavidBarton 提出的query-selector-shadow-dom npm package 。