How to get find element injected on a page using puppeteer

Question

There is a browser extension that modifies the page and inserts its own html code into it, I get the html code of the page being checked, but the html code injection from the extension does not get into it, although if you run the check in the browser, then there is an injection.

those. after rendering the page, the extension integrates a block inside the page:

<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>

When trying to catch this block, puppeteer does not find it:

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');

I get a dump on timeout when trying to find an item:: Timeout - Async callback was not invoked within the 30000 ms timeout specified by jest.setTimeout. Timeout - Async callback was not invoked within the 30000 ms timeout specified by jest.setTimeout.Error:

If you look at the html that is stored in the page, then the notification block does not get there... Perhaps someone will have an idea how I can track html injections with a puppeteer and manipulate them?

Answer 1

I think you have a typo in your selector '. notification__cta' '. notification__cta' There should be no space between the dot and the classname. Does it work when you change it to '.notification__cta' ?

Answer 2

I think your extension is in the category of " Content Scripts ". At the moment they are not supported with puppeteer: see in the Docs, Working with Chrome Extensions :

NOTE It is not yet possible to test extension popups or content scripts.

Answer 3

solution in using query-selector-shadow-dom ( https://www.npmjs.com/package/query-selector-shadow-dom )