如何使用 puppeteer 在頁面上注入查找元素

Question

有一個瀏覽器擴展程序可以修改頁面並將其自己的 html 代碼插入其中，我得到了正在檢查的頁面的 html 代碼，但是 html 代碼雖然沒有從檢查擴展程序中運行瀏覽器，然后有一個注入。

那些。 渲染頁面后，擴展在頁面內部集成了一個塊：

<div><div class="notification"><div class="notification__close"></div> <div class="notification__logo"></div> <div class="notification__title">
  </div> <div class="notification__cta">
    Activate
  </div></div> <!----></div>

當試圖捕捉這個塊時，puppeteer 沒有找到它：

let browser = await puppeteer.launch ({
      headless: false,
      ignoreDefaultArgs: true,
      args: [
        `--load-extension = $ {path.join (dir, '/extension')},`
      ]
    });
let page = await browser.newPage ();

await page.goto ('https://site.url', {waitUntil: 'networkidle2'});
await page.waitForSelector ('.notification__cta');
await page.click ('.notification__cta');

嘗試查找項目時出現超時轉儲:: Timeout - 在 jest.setTimeout 指定的 30000 毫秒超時內未調用異步回調。 超時 - 在 jest.setTimeout.Error 指定的 30000 毫秒超時內未調用異步回調：

如果您查看存儲在頁面中的 html，那么通知塊不會到達那里......也許有人會知道我如何使用木偶操縱者跟蹤 html 注射並操縱它們？

Answer 1

我認為您的選擇器'. notification__cta' '. notification__cta'點和類名之間不應有空格。 將其更改為'.notification__cta'是否有效？

Answer 2

我認為您的擴展屬於“內容腳本”類別。 目前 puppeteer 不支持它們：請參閱文檔， 使用 Chrome 擴展：

注意 尚無法測試擴展彈出窗口或內容腳本。

Answer 3

使用 query-selector-shadow-dom 的解決方案（ https://www.npmjs.com/package/query-selector-shadow-dom ）