Error occurs when executing scenarios involving dialog display

I tried pressing a button on a web page that shows an alert dialog in the scenario, but it didn't work and showed an error.

Version

memlab version: 1.1.41 Node.js version: 18.18.2

The current behavior

The scenario is interrupted and an error is displayed.

Error

[rocky@localhost dialog-issue]$ memlab run --scenario ./scenario.js
page-load[498.7KB](baseline)[s1] > action-on-page(target)[s2] > revert(final)[s3]  
/home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/puppeteer-core/lib/cjs/puppeteer/util/assert.js:28
        throw new Error(message);
              ^

Error: Cannot accept dialog which is already handled!
    at assert (/home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/puppeteer-core/lib/cjs/puppeteer/util/assert.js:28:15)
    at CdpDialog.accept (/home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/puppeteer-core/lib/cjs/puppeteer/api/Dialog.js:84:32)
    at BrowserInfo.<anonymous> (/home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/@memlab/core/dist/lib/BrowserInfo.js:113:26)
    at Generator.next (<anonymous>)
    at /home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/@memlab/core/dist/lib/BrowserInfo.js:17:71
    at new Promise (<anonymous>)
    at __awaiter (/home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/@memlab/core/dist/lib/BrowserInfo.js:13:12)
    at /home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/@memlab/core/dist/lib/BrowserInfo.js:106:39
    at /home/rocky/.nvm/versions/node/v18.18.2/lib/node_modules/memlab/node_modules/puppeteer-core/lib/cjs/third_party/mitt/mitt.js:1:732
    at Array.map (<anonymous>)

Node.js v18.18.2

The expected behavior

The error is not displayed and the scenario continues.

Steps To Reproduce

Install memlab with the command npm install -g memlab
Create a page with an alert button (index.html).

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>simple-alert</title>
    </head>
    <body>
      <button>Button</button>
    </body>
</html>

Create a scenario to display alerts (scenario.js).

function url() {
  return "http://localhost:8080/";
}

async function action(page) {
  await page.click("button"); // Press the button to display the alert
}

async function back(page) {
  // No process
}

module.exports = { action, back, url };

Start the HTTP server with the command npx http-server.
Run the scenario with the command memlab run --scenario scenario.js.

Additional information

Workarounds

The error is worked around by resetting the definition of the dialog process and redefining dialog.accept() as follows.

However, it should be noted that the info display will also be reset. Because all the contents defined at the three locations described in "Details of Assumed Problem Areas" below is reset.

function url() {
  return "http://localhost:8080/";
}

async function action(page) {
  page.off('dialog');
  page.on('dialog', async dialog => {
    await dialog.accept();
  });
  await page.click("button"); // Press the button to display the alert
}

async function back(page) {
  // No process
}

module.exports = { action, back, url };

Assumed Problem Areas

In the testInBrowser function ( https://github.com/facebook/memlab/blob/main/packages/api/src/API.ts#L422 ), dialog.accept() is defined twice and dialog.dismiss () once. As shown in the error message Cannot accept dialog which is already handled!, the error is that the dialog cannot be controlled.

Details

The three locations where dialog controls such as dialog.accept() and dialog.dismiss() are defined are as follows.

testInBrowser function
- autoDismissDialog function
- https://github.com/facebook/memlab/blob/main/packages/api/src/API.ts#L449
  - dialog.dismiss ()
  - https://github.com/facebook/memlab/blob/main/packages/api/src/API.ts#L401
- setupPage function
- https://github.com/facebook/memlab/blob/main/packages/api/src/API.ts#L452
  - dialog.accept()
  - https://github.com/facebook/memlab/blob/main/packages/api/src/API.ts#L391
- browserInfo.monitorWebConsole function
- https://github.com/facebook/memlab/blob/main/packages/api/src/API.ts#L451
  - dialog.accept()
  - https://github.com/facebook/memlab/blob/main/packages/core/src/lib/BrowserInfo.ts#L125

The error described in "Error of The current behavior" above corresponds to dialog.accept() in the browserInfo.monitorWebConsole function at the third location.

By commenting out two of three locations, it is confirmed that the dialog control becomes one, and the scenario continues without error.

facebook / memlab