[Question] different behavior in headful and headless mode?

[JonnyLeiZhang]

Hi experts,

I write some test cases, can pass in headful mode, but fail in headless mode.

  await page.click('#remove-dialog > button'); //close dialog
  const dialog = await page.$('dialog[show]'); // check if the dialog closed
  if (dialog) {
    console.log(dialog);
  }

in headful mode, no output.(that's what I want)
however in headless mode, it prints the dialog.

but if I add some wait time, then it can behave same as headful mode.

  await page.click('#remove-dialog > button'); //close dialog
  await page.waitFor(1000)
  const dialog = await page.$('dialog[show]');
  if (dialog) {
    console.log(dialog);
  }

so I guess in headless mode, there'll be some residual dialog for a while after it's closed?

[pavelfeldman]

It could be a simple race where headless just works faster. Looks like you dialog closes asynchronously with the click - the code there is doing something like fetch or setTimeout first. You should await for a signal instead, for example:

await page.waitForSelector('dialog[show]', waitFor: 'detached');

[JonnyLeiZhang]

It could be a simple race where headless just works faster. Looks like you dialog closes asynchronously with the click - the code there is doing something like fetch or setTimeout first. You should await for a signal instead, for example:

await page.waitForSelector('dialog[show]', waitFor: 'detached');

get it! thanks!