[BUG]: Target closed when doing a page.click with Pupeeteer-core

[ElM3nax]

Environment

• chromium Version: 121.0.0
• puppeteer / puppeteer-core Version: 22.0.0
• Node.js Version: 18.x
• Lambda / GCF Runtime: nodejs18.x

Expected Behavior

I have some E2E tests running with puppeteer 22.0.0 alongside with @sparticuz/chromium 121.0.0. When I run them locally on my M2 Mac, it works as expected and everything goes through. But when they are ran in an AWS Lambda, there is a sort of crash of the browser when trying to click on a element. It results in Protocol error (Input.dispatchMouseEvent): Target closed Protocol error (Input.dispatchMouseEvent): Target closed.

I have also tried to wait for the element before clicking to ensure it exist and it does.

The weird thing is that if I trigger a reload of the page before doing the click, then it works as expected. This causes quite some issue as the local and remote env are not behaving similarly.

Current Behavior

On the 3rd click event, regardless what element I try to target, the browser seems to be crashing.

Steps to Reproduce

import puppeteer from 'puppeteer-core';
import chromium from '@sparticuz/chromium';

(async () => {
    const browser = await puppeteer.launch({
          executablePath: await chromium.executablePath('/opt/nodejs/node_modules/@sparticuz/chromium/bin'),
          headless: 'shell',
          args: [...chromium.args, `--window-size=${1860},${1400}`],
        });
    await browser.newPage();
    await page.goto(`${baseURL}/login`, { waitUntil: 'load' });
    await page.waitForSelector('input[name="email"]');
    await page.type('input[name="email"]', logins.username);
    await page.type('input[name="password"]', logins.password);
    await Promise.all([page.waitForNavigation(), page.click('button[type=submit]')]);
    
    await Promise.all([page.waitForNavigation(), page.click('[href="/sessions"]')]);
    await page.waitForSelector('h1 ::-p-text(Session)');
    
    // If I uncomment those 2 lines below, then the clicks works as expected
    // await Promise.all([page.waitForNavigation(), page.reload()]);
    // await page.waitForSelector('a ::-p-text(e2e-test-session)');
    await page.click('a ::-p-text(e2e-test-session)');
    await page.waitForSelector('h1 ::-p-text(e2e-test-session)');
    
    await browser.close();
})

[imsat-appscoop]

Have you been able to find a solution?

[Sparticuz]

The only recommendation I can give is to increase memory for these types of errors.

[simonjsp]

Apparently it is related to the fact that the Node 18.X runtime went from 18.26 to 18.28 and the latter breaks something in the library (at least in my case it worked perfectly until AWS started the function with 18.26). Unfortunately you cannot choose the minor version in the configuration of each lambda.

[imsat-appscoop]

I got it fixed by upgrading the version

from

"@sparticuz/chromium": "^117.0.0",
"puppeteer-core": "^21.3.2",

To

"@sparticuz/chromium": "^119.0.0",
"puppeteer-core": "^21.5.1",

[alexander-dermicus]

@simonjsp @satyam-appscoop You made my day yesterday! Our pdf generation on AWS lambda using puppeteer-core@21.1.1 and @sparticuz/chromium@116.0.0 suddenly crashed in production with error Navigating frame was detached. This was likely caused by an upgrade in the Node 18.X runtime by AWS. It was fixed by upgrading both libraries to the latest version. Thank you for pointing me in the right direction!