Element is not clickable at point (1254, 21). Other element would receive the click

Question

I am using protractor and selenium server with angularJS for UI testing,

This is my TestCase:

it('Click on Top Headings one by one', function () {        
    //click on Top Heading one by one
    ptor.element.all(by.repeater('application in workbenchOptions.applications')).then(function (arrs) {
        ptor.sleep(3000);
        arrs[2].click();
        ptor.sleep(3000);
        arrs[3].click();
        ptor.sleep(3000);
        arrs[1].click();
        ptor.sleep(3000);
        arrs[2].click();
        ptor.sleep(3000);
        arrs[0].click();
        ptor.sleep(2000);
    });
});

This is my UI where I am trying to click each heading one by one

First of all I am clicking on arrs[2] i.e. Clientside Test Case

then I am clicking on arrs[3], arrs[1], arrs[2], arrs[0] , everything is clicking , but if in the beginning suppose arrs[0] is already open then I am not able to click on this again and I got a error message

UnknownError: unknown error: Element is not clickable at point (1254, 21). 
Other element would receive the click: 
<div class="slider-wrapper pl-pageslide-wrapper" style="transition: width 0.3s, height; -webkit-transition: width 0.3s, height; z-index: 1000; position: fixed; left: 0px; top: 0px; bottom: 0px; right: 0px; width: auto; background: rgba(0, 0, 0, 0.498039);">...</div>

I tested against both Chrome and Firefox and the same error occurs

I have re-checked my case and found, Now Every Heading is clickable, but still getting this message error: Element is not clickable at point (1254, 21). Other element would receive the click: <div class="slider-wrapper pl-pageslide-wrapper">... and when i am checking class slider-wrapper through inspect element , I am finding that this class covers complete UI and I have one other issue within the same, suppose previously my Top Heading opened is AshuTests and I am expecting this, then this gives me this error Expected 'AshuTests ExcelImport UploadTest MarketPlaceTest' to be 'AshuTests' — Rajit Garg
are you saying to disable or comment out this class, class="slider-wrapper, if yes, then this is not possible, because by this all my work get disturbed, is there any other way, so that other things remain as it is? — Rajit Garg
The error message is suggesting that the element is not clickable from a user point of view. Is there any other element upon it, with a higher z-index maybe? — glepretre
every element is clicking, but still I am getting this error message, from error message i am getting class="slider-wrapper also receive the click, which is bounded to complete body, is it possible that i can remove this effect from this class?? — Rajit Garg

Peter Clause Peter Clause · Accepted Answer · 2015-02-18T13:36:10

I had a similar problem with elements without a fixed position. I used the following code in protractor:

var el = ...; // some protractor element
el.getLocation().then(function(location) {
  browser.executeScript("window.scrollTo(0," + (location.y - 70)+ ")");
  el.click();
});

Note: I also use an offset of -70px because the page has a menu fixed at the top of the page. Without the offset, elements get scrolled behind the menu and the message "Element is not clickable..." is displayed again.

Element is not clickable at point (1254, 21). Other element would receive the click

2 Answers