如何使用 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 ）