Page.click does not work as expected in slowMo mode

I’m opening google.com and type ‘test’ in the input box. Then click the submit button. Using slowMo:250 this leaves enough time for the autocomplete dropdown box to show up. The Page.click event then goes to the list element which is located at the position of the submit button. Therefor a different search result will show up.

This applies to both headless and non-headless mode.

  const browser = await puppeteer.launch({slowMo: 250});
  //const browser = await puppeteer.launch({headless: false, slowMo: 250});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.type('input[name=q]', 'test');
  await page.click('input[type=submit]');
  await page.screenshot({path: 'google.png'});
  await browser.close();

[JoelEinbinder]

Using page.evaluate(element => element.click(), elementHandle) will do a fake JavaScript click.

This is working as intended. Google search gives you a separate button to press when the dropdown is active: input.lsb. Clicking the hidden button would be undefined behavior, because google.com wouldn’t expect that to be possible.

[JoelEinbinder]

Consider a link with an image in it: <a><img></a> It is impossible to click the <a> without clicking the <img>. Would page.click('a') be a failure or a success? How about page.click('img')?

This is a really common problem people are running into, so I would like some better reporting of what is going on. But I don’t know how to do it in a way that is consistent and not restrictive. PRs are welcome 👍