ElementHandle.click() broken in 0.12

[pwnall]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 0.12
• Platform / OS version: Fedora 26
• URLs (if applicable): https://facebook.com/login

What steps will reproduce the problem?

  const browser = await puppeteer.launch({
    headless: false,
    args: ['--disable-notifications'],
  });
  const page = await browser.newPage();

  // The page needs to be at least ~1450px wide so the chat tab doesn't overlap
  // with the posts area that this script needs to click into.
  await page.setViewport({width: 1600, height: 900});
  console.log('Chrome ready');

  const account = { email: '[email protected]', password: 'pwd' };

  await page.goto('https://www.facebook.com/login');

  const emailField = await page.$('input[name=email]');
  await emailField.click({ delay: 100 });
  await emailField.type(account.email, { delay: 100 });
  await emailField.dispose();

  const passwordField = await page.$('input[name=pass]');
  await passwordField.click({ delay: 100 });
  await passwordField.type(account.password, { delay: 100 });
  await passwordField.dispose();

  const loginButton = await page.$('button[name=login]');
  await loginButton.focus();
  await loginButton.click({ delay: 100 });
  await loginButton.dispose();

  await page.waitForNavigation({
      waitUntil: 'networkidle', networkIdleTimeout: 4000 });

What is the expected result?
The click goes through and a login is attempted.

What happens instead?
The click does not go through.

I have a hunch that the underlying problem is https://crbug.com/692197.

My workaround (based on mixing code from 0.11 and 0.12):

  const elementHandle = await page.$('body');
  elementHandle.constructor.prototype.boundingBox = async function() {
    const box = await this.executionContext().evaluate(element => {
      const rect = element.getBoundingClientRect();
      const x = Math.max(rect.left, 0);
      const width = Math.min(rect.right, window.innerWidth) - x;
      const y = Math.max(rect.top, 0);
      const height = Math.min(rect.bottom, window.innerHeight) - y;
      return { x: x, width: width, y: y, height: height };
    }, this);
    return box;
  };
  elementHandle.dispose();

Is there any chance you could offer switchable implementations of ElementHandle.boundingBox until the DOM.getBoxModel issues are straightened out?

Many thanks for puppeteer! ❤️

[alixaxel]

Seems to be the same issue that I'm having in #1126.

Did you experiment turning headless: true?

[XcrossD]

I can confirm that I have the same issue, and the workaround solution @pwnall gave worked.

Instead of the click simply not going through I'm also receiving this error, which I think is relevant:
(node:4860) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Protocol error (DOM.getBoxModel): Could not compute box model. undefined
(node:4860) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[svickers]

Have the same issue but on Windows, with 0.12.0 and 0.13.0-alpha. Suggestion from @pwnall fixes it for me.

[alixaxel]

@aslushnikov Can we have @pwnall solution pushed to NPM as a hotfix in a patch version while the underlying issue is not fixed?

[patrickeakin]

I've also been experiencing clicks producing the error
Error: Protocol error (DOM.getBoxModel): Could not compute box model. undefined

The way i've gotten around it is with page.eval$ and javascript's click method. Like this.
await page.$eval('.some_class', x => x.click())

[JoelEinbinder]

This should be fixed by #1299, but I am still trying to track down the Error: Protocol error (DOM.getBoxModel): Could not compute box model. undefined bug.

[aslushnikov]

I've also been experiencing clicks producing the error
Error: Protocol error (DOM.getBoxModel): Could not compute box model. undefined

@patrickeakin for the DOM.getBoxModel, could you please share the repro in the #1294?