waitUntil: 'load' fails tests

[thrasher]

Hello,
Thank you for sharing a nice way of testing Chrome extensions end to end. I've encountered a problem with the bootstrap and initialization via puppeteer, and a possible solution that I wanted to share.

The problem: The default code fails the tests as documented in the examples.

To reproduce:

git clone https://github.com/tweak-extension/puppeteer-test-browser-ext.git
cd puppeteer-test-browser-ext
npm install
npm run start # and leave it running

# in a separate terminal run the tests
npm run e2e

Observe the tests fail with the following output:

> puppeteer-browser-extension@0.1.0 e2e
> jest --detectOpenHandles

 FAIL  e2e/sampleTest.spec.js
  test text replacer extension with react app
    ✕ should render a button in the web application

  ● test text replacer extension with react app › should render a button in the web application

    TypeError: Cannot read properties of undefined (reading 'url')

      18 |   const targets = await browser.targets();
      19 |   const extensionTarget = targets.find((target) => target.type() === 'service_worker');
    > 20 |   const partialExtensionUrl = extensionTarget.url() || '';
         |                                               ^
      21 |   const [, , extensionId] = partialExtensionUrl.split('/');
      22 |
      23 |   const extPage = await browser.newPage();

      at bootstrap (bootstrap.js:20:47)
      at Object.<anonymous> (sampleTest.spec.js:7:21)

  ● test text replacer extension with react app › should render a button in the web application

    TypeError: Cannot read properties of undefined (reading 'bringToFront')

      14 |   it('should render a button in the web application', async () => {
      15 |     // 1. When a user opens the React application
    > 16 |     appPage.bringToFront();
         |             ^
      17 |     // 1.1. The user should see a button on the web page
      18 |     const btn = await appPage.$('.action');
      19 |     const btnText = await btn.evaluate(e => e.innerText);

      at Object.<anonymous> (sampleTest.spec.js:16:13)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        4.288 s, estimated 18 s
Ran all test suites.

The environment:

• Hardware: Macbook Pro M4 Max, w/128GB ram, using ethernet
• OS: Sequoia 15.5
• Chromium: 107.0.5296.0 (Developer Build) (x86_64 translated)
• zsh

Looking into it, it seems to be caused with a problem bootstrapping Puppeteer. Unfortunately it does not seem to waitUntil: 'load' correctly. The e2e/bootstrap.js file has a line:

await appPage.goto(appUrl, { waitUntil: 'load' });

Changing this to waitUntil: 'networkidle0' fixes the problem:

await appPage.goto(appUrl, { waitUntil: 'networkidle0' });

Then the tests complete correctly:

$ npm run e2e

> puppeteer-browser-extension@0.1.0 e2e
> jest --detectOpenHandles

 PASS  e2e/sampleTest.spec.js (5.156 s)
  test text replacer extension with react app
    ✓ should render a button in the web application (104 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.264 s
Ran all test suites.

I'm rather new to jest and puppeteer, and so am curious if there is something else going on.