javascript - Protractor/Selenium with Angular overlay，其他元素会收到点击

Question

我们的应用程序有一个总是在 dom 中的 Angular 覆盖(虽然并不总是可见)。有时当我试图点击页面上的元素时，Selenium 会抛出一个错误......

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;">

有没有人遇到过这种情况？ webdriver .isDisplayed 始终报告它是错误的，即使它仍在抑制点击也是如此。

我编写了一些附加到 Protractor 的 waitForAngular 函数的代码，该函数检查叠加层的 dom 元素的各种状态(等待直到它具有值为“none”的 display: 属性)。这很有帮助，除非浏览器在后台执行，否则我不再遇到此问题。如果浏览器不在前台，那么我会非常频繁地遇到覆盖问题。在 Protractor 等待时(基于我对 Angular 覆盖的等待)，如果我将浏览器置于前台，那么测试会立即开始继续执行并且覆盖层的 dom 状态会发生变化。

会喜欢有洞察力的人的任何想法。

我认为 .isDisplayed 无法正常工作似乎是网络驱动程序问题。而且我还假设叠加层在后台停留在特定的 dom 状态是一个 Angular 问题。

Answer 1

根据你的 css 属性，你的元素有 opacity: 0;

根据这个答案here ，具有 opacity: 0 的元素仍会接收事件，因此您的叠加层并未完全隐藏。

我建议您使用其他 css 属性来隐藏叠加层，例如 visibility: hidden 或 display:none;。