Selenium element is not clickable at point (chrome) in javascript

Question

I'm new to Selenium and I'm running my selenium script on Browserstack.

Everything works fine, until i reach the bottom 10% of my page.

I get the following error:

Uncaught WebDriverError: Appium error: unknown error: Element is not clickable at point (20, 324). Other element would receive the click: ... (Session info: chrome=58.0.3029.83) (Driver info: chromedriver=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5),platform=Linux 3.19.8-100.fc20.x86_64 x86_64)

This is my code:

describe.only(testTitle, function () {
    before(function () {
        driver = driverConfiguration.getDriverConfiguration(testTitle, 'chrome')
    })
    after(function (done) {
        driver.quit().then(done)
    })
    it('Sample tests', function (done) {
        driver.get('https://www.test.com').then(function(){
            driver.findElement(webdriver.By.name('cardNumber')).sendKeys('0000000000').then(function(){
                driver.findElement(webdriver.By.id('billingLine1')).sendKeys('test');
                driver.findElement(webdriver.By.id('billingLine2')).sendKeys('test');
                driver.findElement(webdriver.By.id('billingCity')).sendKeys('San Jose');
                driver.findElement(webdriver.By.id('agree')).click(); // ERROR!!!!!
            }).then(function() {
                driver.quit().then(done);
            })
        });
    })
})

When I do the following:

            // return driver.wait(function() {
            //     return driver.findElement(webdriver.By.id('agree')).isDisplayed();
            // }, 1000);

It says True. The element is visible.

Using Chrome on Samsung Galaxy S8

I'm not sure how to solve this problem.

I've gotten that error before but I was able to resolve it by making sure that the element was visible on the screen at the time of click. — Doug, Mar 27 '18 at 19:08
When I try to execute this code: ` // return driver.wait(function() { // return driver.findElement(webdriver.By.id('agree')).isDisplayed(); // }, 1000);` It does say true. i.e the element is visible. — TechnoCorner, Mar 27 '18 at 19:12
Not sure how I can resolve this issue :( without statically coding scrolldown. — TechnoCorner, Mar 27 '18 at 19:13
that's what I ended up doing with driver.executeScript() -- I don't know why the element had to be on the screen when its visible to the code, but it did get it to work :) — Doug, Mar 27 '18 at 19:15
@Doug can you please let me know how do I use the executeScript() to get it working? — TechnoCorner, Mar 27 '18 at 19:16
Possible duplicate of [Element MyElement is not clickable at point (x, y)... Other element would receive the click](https://stackoverflow.com/questions/44724185/element-myelement-is-not-clickable-at-point-x-y-other-element-would-receiv) — undetected Selenium, Mar 27 '18 at 20:19
@TechnoCorner I am afraid, I thought the concept for solving this particular issue would have been same across all the bindings art. — undetected Selenium, Mar 27 '18 at 20:33

score 2 · Answer 1 · answered Mar 27 '18 at 21:51

You've omitted the most important part of the error message in your question

Other element would receive the click: ...

The element in the ... section was the element that was blocking the click. As you discovered, Selenium was reporting that the element was displayed/visible. This error message is just stating that when Selenium attempted to click on the element, another element was blocking the click. If you take a look at the HTML of the blocking element and search that in the HTML of the page, you should be able to identify the element. In my experience, it's a dialog or maybe a banner at the bottom of the page, etc. Sometimes you will need to close it, other times you will need to scroll down/up a little to get the desired element from behind the blocking UI.

Yup you are exactly right. I figured out using the same thing and I used other 'div' and it worked! Thank you @JeffC — TechnoCorner, Mar 27 '18 at 22:53

Doug · Accepted Answer · 2018-03-27T19:28:11.053

Continued from comments above ...

I encountered this problem as well, when I needed to click a button but it was not visible on the screen (however, it was detected by the code). To resolve this, I used the WebDriver's executeScript() method to run some JavaScript on the page to scroll until my button was in view.

driver.executeScript(`
    var target = document.getElementById('agree');
    var tarTop = target.getBoundingClientRect().top;
    document.body.scrollTop = tarTop;
`);

You can try driver.executeAsyncScript() if you want want to add a timeout to the scroll, to make sure the page has reached its destination first. At that point you'll be using async/await...

await driver.executeAsyncScript(`
    var callback = arguments[arguments.length - 1];
    var target = document.getElementById('agree');
    var tarTop = target.getBoundingClientRect().top;
    document.body.scrollTop = tarTop;
    setTimeout(()=>{ callback( true ); }, 1500);
`).then((data)=>{
    return data;
});

I used this and it solved my issue: driver.executeScript(` var target = document.getElementById('agree').scrollIntoView(); `); Thanks for the inputs @Doug — TechnoCorner, Mar 27 '18 at 20:44

Selenium element is not clickable at point (chrome) in javascript

2 Answers2