WebDriver click() vs JavaScript click()

Question

The Story:

Here on StackOverflow, I\'ve seen users reporting that they cannot click an element via selenium WebDriver \"click\" command and can work

Answer 1

The click executed by the driver tries to simulate the behavior of a real user as close as possible while the JavaScript HTMLElement.click() performs the default action for the click event, even if the element is not interactable.

The differences are:

• The driver ensures that the element is visible by scrolling it into the view and checks that the element is interactable.

  The driver will raise an error:

  • when the element on top at the coordinates of the click is not the targeted element or a descendant
  • when the element doesn't have a positive size or if it is fully transparent
  • when the element is a disabled input or button (attribute/property disabled is true)
  • when the element has the mouse pointer disabled (CSS pointer-events is none)

  
  A JavaScript HTMLElement.click() will always perform the default action or will at best silently fail if the element is a disabled.
  
  

• The driver is expected to bring the element into focus if it is focusable.

  A JavaScript HTMLElement.click() won't.
  

• The driver is expected to emit all the events (mousemove, mousedown, mouseup, click, ...) just like like a real user.

  A JavaScript HTMLElement.click() emits only the click event. The page might rely on these extra events and might behave differently if they are not emitted.

  These are the events emitted by the driver for a click with Chrome:

  mouseover {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  mousemove {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  mousedown {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  mouseup {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  click {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  

  And this is the event emitted with a JavaScript injection:

  click {target:#topic, clientX:0, clientY:0, isTrusted:false, ... }
  

• The event emitted by a JavaScript .click() is not trusted and the default action may not be invoked:

  https://developer.mozilla.org/en/docs/Web/API/Event/isTrusted
  https://googlechrome.github.io/samples/event-istrusted/index.html

  Note that some of the drivers are still generating untrusted events. This is the case with PhantomJS as of version 2.1.
  
  

• The event emitted by a JavaScript .click() doesn't have the coordinates of the click.

  The properties clientX, clientY, screenX, screenY, layerX, layerY are set to 0. The page might rely on them and might behave differently.

It may be ok to use a JavaScript .click() to scrap some data, but it is not in a testing context. It defeats the purpose of the test since it doesn't simulate the behavior of a user. So, if the click from the driver fails, then a real user will most likely also fail to perform the same click in the same conditions.

What makes the driver fail to click an element when we expect it to succeed?

• The targeted element is not yet visible/interactable due to a delay or a transition effect.

  Some examples :

  https://developer.mozilla.org/fr/docs/Web (dropdown navigation menu) http://materializecss.com/side-nav.html (dropdown side bar)

  Workarrounds:

  Add a waiter to wait for the visibility, a minimum size or a steady position :

  // wait visible
  browser.wait(ExpectedConditions.visibilityOf(elem), 5000);
  
  // wait visible and not disabled
  browser.wait(ExpectedConditions.elementToBeClickable(elem), 5000);
  
  // wait for minimum width
  browser.wait(function minimumWidth() {
      return elem.getSize().then(size => size.width > 50);
  }, 5000);
  

  Retry to click until it succeeds :

  browser.wait(function clickSuccessful() {
      return elem.click().then(() => true, (ex) => false);
  }, 5000);
  

  Add a delay matching the duration of the animation/transition :

  browser.sleep(250);
  

  
  

• The targeted element ends-up covered by a floating element once scrolled into the view:

  The driver automatically scrolls the element into the view to make it visible. If the page contains a floating/sticky element (menu, ads, footer, notification, cookie policy..), the element may end-up covered and will no longer be visible/interactable.

  Example: https://twitter.com/?lang=en

  Workarounds:

  Set the size of the window to a larger one to avoid the scrolling or the floating element.

  Mover over the element with a negative Y offset and then click it:

    browser.actions()
       .mouseMove(elem, {x: 0, y: -250})
       .click()
       .perform();
  

  Scroll the element to the center of the window before the click:

  browser.executeScript(function scrollCenter(elem) {
    var win = elem.ownerDocument.defaultView || window,
      box = elem.getBoundingClientRect(),
      dy = box.top - (win.innerHeight - box.height) / 2;
    win.scrollTo(win.pageXOffset, win.pageYOffset + dy);
  }, element);
  
  element.click();
  

  Hide the floating element if it can't be avoided:

  browser.executeScript(function scrollCenter(elem) {
    elem.style.display = 'none';
  }, element);