CODEWITHSUNDEEP
protractor
bdf7kt
bdf7kt

Reputation: 162

"Clicking" on a not visible element

So my current situation is that I am trying to click on a marker based in a Google Maps window on a webpage. I have successfully located the markers in two manners: element.all(by.css('.angular-google-map-marker')) and element.all(by.repeater('m in map.markers')).

I have proven that I am obtaining the correct elements by changing the location on the Google Map and using count() to retrieve the number of markers present which returns the correct number in every case.

However, when I try to do for example element.all(by.css('.angular-google-map-marker')).first().click(), I receive the following error:

Failed: element not visible

HTML section

<div ng-transclude="" style="display: none"> 

  <span class="angular-google-map-marker" ng-transclude="" ng-repeat="m in map.markers" options="m.options" coords="m.coords" idkey="m.id" click="onMarkerClick"></span>

  <span class="angular-google-maps-window" ng-transclude="" coords="activeMarker.coords" options="windowMapOptions" show="windowMapOptions.show" closeclick="closeInfoWindow" templateurl="'gMapInfoWindow.html'" templateparameter="activeMarker"></span>

</div>

Normally elements that trigger some event due to clicking have an attribute like ng-click= foo(), however the markers above only use click= foo(). In addition if you look the line with the div tag, it says display: none, which might explain the visibility error.

My Question: Is there a way to activate the effect of an attribute like click= foo() without clicking on the element directly?

Upvotes: 0

Views: 1136

Answers (2)

alecxe
alecxe

Reputation: 473813

Aside from trying to make an element visible and then clicking, you can attempt clicking "via JavaScript" (there are some differences though - WebDriver click() vs JavaScript click()):

var marker = $('.angular-google-map-marker');
browser.executeScript("arguments[0].click();", marker.getWebElement());

Upvotes: 3

Oleksii
Oleksii

Reputation: 1643

First of all be sure that you can interact with the element when it is visible, you can do this from within the DevTools of your browser, make it visible by adding a display:block. Then check that if you change the value of the selectbox, the value can also be used with Angular Binding.

If so, you can easily make the element visible with Protractor by injecting a piece of Javascript in the page with the following command:

browser.executeScript('document.querySelector("div").style.display = "block"');

This results in a promise, so be aware of that!

Upvotes: 1

Related Questions