4

our app has an angular overlay that is always in the dom (although not always visible).. and sometimes when I attempt to click on elements on the page, Selenium throws an error...

Element is not clickable at point (544, 297). Other element would receive the click: div class="overlay" style="transition-property: opacity; -webkit-transition-property: opacity; transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; display: block; opacity: 0;">

Does anyone else experience this? webdriver .isDisplayed always reports that it is false, even when it is still inhibiting clicks.

I have written some code that attaches to protractor's waitForAngular function that checks for various states of the overlay's dom element (to wait until it has a display: attribute with value "none"). This helps a lot and I no longer experience this issue unless the browser is executing in the background. If the browser is not in foreground, then I hit the overlay issue very frequently. While protractor is waiting (based on my wait for angular override), if I bring the browser to foreground, then the test immediately begins continuing to execute and the dom state changes for the overlay.

Would love any thoughts from people with insight.

I assume the .isDisplayed not working properly seems to be a webdriver issue. And I also assume that the overlay being stuck in a specific dom state in the background to be an angular issue.

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195

1 Answers1

0

By what is in your css properties, your element has opacity: 0;

accordantly to this answer here, elements with opacity: 0 still receive events, so your overlay is not completely hidden.

I'd suggest you to use other css properties to hide your overlay such as visibility: hidden or display:none; instead.

Community
  • 1
  • 1
ThiagoPXP
  • 5,362
  • 3
  • 31
  • 44