Search code examples
htmljquerycssnightwatch.js

Nightwatch seeing my element but its not interactable


I'm runing a nightwatch test on Loadero and its failing. I'm trying to test if an element is available, and if it is, to click on it. I believe that below, I'm saying only try click the button if it exists.

    client.elements("css selector", "div[aria-describedby='dialogWindowTooSmall button.ui-button']", function (result) {
        if (result.value.length) {
            client.click('div[aria-describedby="dialogWindowTooSmall"] button.ui-button)');
        }
    })

But I'm getting an error. The first line seems to execute fine. I get two ELEMENT ids back

  [ { ELEMENT: '0.7754195696252344-2' },
    { ELEMENT: '0.7754195696252344-3' } ] }

but the click function fails:

Error while running .clickElement() protocol action: An element command could not be completed because the element is not visible on the page. – element not interactable

Surely if the element is found, its clickable? (i have tried to paste more of the log here but it loses all formatting and is impossible to read)

Thanks!


Solution

  • No, if the element is present on the page, it does not mean that the element is also interactable (or clickable). For an element to be interactable, it also needs to be "visible" on the page and not just "present" on the page. It can happen if the element is hidden or outside the viewport of the page.

    When you try to perform a 'click' operation on an element, Selenium first tries to locate the element and if the element is not visible in the view, it tries to scroll to the element to bring it into the view and then click on the center-point of the element.

    Now, if Selenium is unable to bring the element into the view, it throws element not interactable error. If it is able to bring the element into the view but the center-point of the element is covered by some other element, it throws element click intercepted error. Otherwise, it successfully performs the 'click' operation on the element.

    For reference: https://w3c.github.io/webdriver/#element-click