Protractor - Other element would receive the click

Question

I have a div placed on top of the div I need to click. Both divs are in the visible in the browser window, so no need to scroll. So, how do I click the bottom div that is under the top div? It works fine with a mouse, but not with Protractor.

Quick background: Our team implemented a custom drop down control using a popover containing the "options" to select and a "piece of glass" over it with the scroll bar in it. This was done to avoid issues when the drop down control has 100+ options. The piece of glass allows you to "scroll" options into the popover.

In Protractor, I have located the correct place in the viewport to click, but the error says I'm clicking the scrollCanvas.

Here's pseudo html:

<div id="dropdownControl">
  <div id="viewport"
    <div ng-repeat (of the viewable options)
    ... </div>
  <div id="scrollCanvas">
  ... </div>
</div>

The scrollCanvas is receiving the click, but I need the viewport to receive the click. Any ideas??

Thanks in advance!

Chris V Chris V · Accepted Answer · 2016-11-18T22:22:41

I figured it out... finally. The trick is to use getLocation() to get the x,y location of the element to click (in the div under another div), then use browser.actions().mouseMove().click().perform(). Notice the location values are not used in the click because mouseMove applies any x,y in the call as relative values to the last mouse location. So, since the mouse is already at the correct location, all you need is to click() at that location.

Here is some unrefined, pseudo code to illustrate the technique:

var optionElementFinder = element(by.id('id_of_parent_of_layered_divs')).element(by.id('id_of_div_holding_the_options'));
optionElementFinder.all(by.repeater('repeater_text_rendering_the_options')).getText().then(function (options) {
    var myIndex = options.indexOf('text_of_option_to_click');
    optionElementFinder.all(by.repeater('repeater_text_rendering_the_options')).then(function (elements) {
        elements[myIndex].getLocation().then(function () {
            var canvas =  element(by.id('id_of_parent_of_layered_divs'))
                .element(by.id('id_of_div_holding_the_scrollCanvas'))
                .getWebElement();
            browser.actions()
                .mouseMove(canvas)
                .click()
                .perform();
        });
    });
});

Protractor - Other element would receive the click

2 Answers