Report failed selector where Element is not clickable

[kevinmcdonnell]

The problem

Where an element is not clickable because another element would receive the click, wdio should report the selector which failed to help in debugging the test. Presently it reports the elementId and the element which would receive the click.

eg We should know that the command failed to click .my-class

browser.click('.my-class')

happy to work on the fix if I can be pointed in the right direction

Environment

• WebdriverIO version: v4.0.9
• Node.js version:v4.4.7
• wdio testrunner
• synchronous

Details

Describe in more detail the problem you have been experiencing, if necessary.

Link to Selenium/WebdriverIO logs

unknown error: Element is not clickable at point (517, 182). Other element would receive the click: <div class="lrn-qe-wait-panel" style="opacity: 0.0120416;">...</div>
running chrome
RuntimeError: unknown error: Element is not clickable at point (517, 182). Other element would receive the click: <div class="lrn-qe-wait-panel" style="opacity: 0.0120416;">...</div>
    at elementIdClick("15") - click.js:52:22

Code To Reproduce Issue [ Good To Have ]

can add if needed

[christian-bromann]

@kevinmcdonnell is this about the stack not showing the command that leads to that error in the test?

[kevinmcdonnell]

yeah it shows this. But it doesn't help me understand which click in my test fails and where the issue in my test is.

RuntimeError: unknown error: Element is not clickable at point (517, 182). Other element would receive the click: <div class="lrn-qe-wait-panel" style="opacity: 0.0120416;">...</div>
    at elementIdClick("15") - click.js:52:22

[christian-bromann]

I see. We do some filtering of the stack trace so that you only get stack information that are relevant for you. It might be get filtered by that. Will have to investigate.

[joaoffalcao]

Yeah, same problem here. Besides the log information, do you found the workaround?

[kevinmcdonnell]

you can use verbose logging to debug

[christian-bromann]

@kevinmcdonnell @joaoffalcao can you provide a reproducible example where the stack trace isn't helping?

[kevinmcdonnell]

@christian-bromann apologies for the delay

This is a contrived example but produces the error:

        browser.url('http://www.github.com');
        browser.execute(function () {
            var p = document.createElement("p");
            p.style.position  = 'fixed';
            p.style.height  = '100px';
            p.style.width  = '100px';
            p.style.top  = '10px';
            p.className = 'clickme';
            document.body.appendChild(p);
        });
        browser.waitForExist('.clickme');
        browser.click('.clickme');

[jedwards1211]

This is apparently an issue with ChromeDriver marked as WontFix because they didn't have a repro:

SeleniumHQ/selenium-google-code-issue-archive#2766

[kevinmcdonnell]

@jedwards1211 without reading that long thread, i think that is a different issue Element is not clickable at point

The issue here is the logs don't report the selector which failed to click. I element not being clickable is expected, i just want to know the selector which was used to attempt the click

[jedwards1211]

@kevinmcdonnell oh, gotcha!

[christian-bromann]

In v5 we will have an autofix for this issue. Closing.

[pciavald]

I'm still getting this issue using webdriverio 5.7, especially with vuetify. All checkboxes for instance are unclickable, i guess because some element is actually overlapping it, but that's the purpose of these libraries that hide the actual html inputs and shows a nicer UI.

Is there any chance that webdriverio handles these cases correctly, for instance with an option in the click method like $(selector).click({force: true}) (click even though an element is overlapping) or even a configuration for it in the config file ? A lot of front-end libraries "overlap" elements on purpose nowadays which forces us to use js clicking for almost everything in Chrome, which defeats the implicit wait setting and makes the testing code messy.

[christian-bromann]

@pciavald interesting, do you have a demo app with a small script I can run?

[pciavald]

@christian-bromann here you go sir

describe('test', () => {
  it('tests', () => {
    browser.url('https://perdu.com')
    browser.execute(() => {
      const vue = document.createElement('script')
      vue.src = 'https://cdn.jsdelivr.net/npm/vue'

      const vuetify = document.createElement('script')
      vuetify.src = 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js'

      const vuetifyStyle = document.createElement('link')
      vuetifyStyle.href = 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'
      vuetifyStyle.rel = 'stylesheet'
      document.head.appendChild(vuetifyStyle)

      const roboto = document.createElement('link')
      roboto.href = 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
      roboto.rel = 'stylesheet'
      document.head.appendChild(roboto)

      const app = document.createElement('div')
      app.id = 'app'

      function appScript() {
        const app = new Vue({
          el: '#app',
          data: () => {
            return { value: true }
          },
          template: '<v-checkbox id="checkbox" v-model="value" label="test" />',
        })
      }

      vue.onload = () => document.head.appendChild(vuetify)
      vuetify.onload = appScript

      document.body.appendChild(app)
      document.head.appendChild(vue)
    })
    browser.pause(3000)
    browser.execute(() => document.querySelector('#checkbox').click())
    $('#checkbox').click()
  })
})

Error: unknown error: Element <input aria-label="test" aria-checked="false" id="checkbox" role="checkbox" type="checkbox" value=""> is not clickable at point (11, 103). Other element would receive the click: <div class="v-input--selection-controls__ripple"></div>

[caydgreen]

I am experiencing the same issue with a vue.js front end.

[mgrybyk]

So this is a feature request to pass { force: true } to element.click function?

Cypress has the similar functionality https://docs.cypress.io/api/commands/click.html#Options

It uses javascript to click, like proposed by @pciavald browser.execute(() => document.querySelector('#checkbox').click())

[CrispusDH]

we should notice in docs that clicking by js it is bad practice

[christian-bromann]

We will tackle this in #2866