Update Puppeteer

[nfmohit]

Feature Description

While working with #5154, we noticed that the Puppeteer version being used is quite outdated. As a result, we're not able to use new methods like waitForNetworkIdle which were introduced in the newer versions. We should try to update Puppeteer (and preferably its related packages) to the latest version without breaking anything.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The puppeteer dependency is upgrade to its latest version if possible. If impossible, then it should be updated to a version that we can without rewriting a lot of tests.

Implementation Brief

Some thoughts to IB author:

Since we use puppeteer as a direct dependency for e2e tests only, we can probably decouple e2e related scripts and dependencies and put them within e2e tests folder as a separate package.json file. In this case, these dependencies won't conflict with the dependencies that we need for development and storybook stories and upgrade can go smoother. Of course, this will require updating e2e workflows to account for the new location of e2e node modules.

• Review and merge the draft PR.

• Ignore the tests/e2e directory from the npm run lint:js command using the .eslintignore, create a new lint script within the tests/e2e directory and add a new action within .github/workflows/js-css-lint-test.yml to run this lint check remembering to switch node version before running this lint.

• Create a follow up issue to investigate upgrading to the next puppeteer version ~v12

Test Coverage

• Ideally E2E tests will be passing reliably in develop at the point of working on this issue (through tickets such as Fix flaky E2E tests #8229), ensure that no new E2E failures or instability introduced in this issue.

QA Brief

• As this is an infrastructure ticket, the CR and MR engineers should perform QA:Eng.

Changelog entry

[eugene-manuilov]

@tofumatt @aaemnnosttv could you please check AC and notes in IB and give me your thumb up if it looks good to you?

[aaemnnosttv]

@eugene-manuilov SGTM, let's give it a try 👍

[benbowler]

After testing this it's definitely not simple to jump straight to the latest version of puppeteer. However splitting the E2E infrastructure unlocks the upgrade pathway.

I suggest we take the approach of #6357, by creating tickets to upgrade to the next version only, and once finishing each version upgrade, opening a new ticket to work on the next major version upgrade.

Merging the attached PR, will get us to these versions:

"jest-puppeteer": "^6.2.0",
"puppeteer": "^14.4.1"

It also adds the ability to set a new node version in tests/e2e/.nvmrc, which is honoured within the E2E GitHub also (even though currently we can use node 14 still).

[eugene-manuilov]

I think this ticket will be addressed when we work on the #10013. Perhaps we should close this one or priorities that one to complete first and then decide whether to close this one.

[benbowler]

Hey @eugene-manuilov, based on the comment on the IB, the test PR #10020 does successfully split the E2E package to it's own package.json and updates the E2E workflow to be able to switch node versions and install it's own packages and run tests in this location.

If we close this issue I suggest linking the PR #10020 in a comment or the description as this could shortcut some of the requirements in that ticket.

Also in the experimentation in this ticket I found that with a separate package.json we can upgrade the packages as follows without all E2E tests failing:

"jest-puppeteer": "^6.2.0",
"puppeteer": "^11.0.0"

So we could do that there then create work as we are doing in #6357 by creating a string of follow up issues "Upgrade puppeteer to the next major version".