如何收听 Selenium 中的 CSS 变化？答案

【问题标题】：How to listen to CSS change in Selenium?如何收听 Selenium 中的 CSS 变化？
【发布时间】：2019-02-07 15:23:06
【问题描述】：

我有一个 div，它是一个保存按钮，有一个很棒的字体符号。单击 div 后，将添加一个新的 CSS 类 disabled，其中不透明度降低以直观地表示单击按钮。在保存事件之后，disabled CSS 类再次被删除，按钮再次完全可见。如果我尝试通过 Selenium 天真地验证这一点，则添加 CSS 类和删除对于 Selenium 来说太快了，即

driver.findElement(By.cssSelector(".save-button")).click();

正在工作并找到该按钮并单击它，但下一个查找会抛出 NoSuchElementException:

driver.findElement(By.cssSelector(".save-button .disabled"));

它也不适用于显式等待（为了简化，我没有提到）。 Selenium 太慢而无法识别更改，即在第二次查找开始之前删除了 CSS 类。我是否需要在点击事件之前启动监听器之类的东西，也许是通过 Selenium 的 JavaScript 解决方案？还有其他方法吗？看起来在 Selenium 中不可能先线程等待。

【问题讨论】：

也许WebDriverEventListener 可以工作？但我不知道应该使用哪种方法来更改 CSS...
你是说等待 (WebDriverWait) 的可见性然后 By.cssSelector(".save-button .disabled") 的不可见性不起作用吗？您提到了不透明度更改...您是否尝试过等待？意图是什么？为什么你不能等待最终产品？一定要检测中间体吗？
@JeffC 是的，问题在于断言变化确实发生了。我们遇到了保存按钮单击不成功的问题，但没有引发 selenium 异常（例如 Stale）。我们没有其他机会，只能识别这个非常短的 CSS 更改，以确保点击发生并且我们不会重复点击事件......

标签： java html css selenium

【解决方案1】：

Selenium 并不太慢（至少在这种情况下），但 CSS 参数错误：

".save-button .disabled" 带有一个空格表示层次结构中的两个元素（<div class="save-button"><div class="disabled"/></div> 而".save-button.disabled" 本来是正确的并且确实有效。

我一开始没有注意到，因为 Chrome 检查器没有那么严格，发现 div 具有这个理论上错误的参数。

编辑：正如 JeffC 在 cmets 中提到的那样，检查器将元素与错误参数匹配的细节不可能是真的。我用这个页面的评论 div 验证了它，检查器在这里不匹配。请参阅下面的屏幕截图。由于我的 Selenium 测试正在运行，因此我不会对此进行进一步分析。

【讨论】：

我从未发现 Chrome 检查器有任何错误，而且我几乎每天都在使用它。当它返回元素时，展开该集合并单击一个元素。这会将 DOM 导航到特定元素。完成此操作后，您可以通过将鼠标悬停在 DOM 检查器中的元素上来确保它找到了正确的元素。
@JeffC 检查 CSS 规范。 CSS 选择器“.save-button .disabled”不应该与我的示例匹配，但 Chrome 检查器可以。它不会称之为错误，而是规范的松散实现......
您所指的不是“松散的实现”，而是一个错误......这将是一个大错误。发布指向该页面的链接...我想看看它。我认为可能还有另一个元素与该定位器匹配，但不是您要查找的元素。
感谢您的 cmets，我根据您的更正更新了我的答案。
我认为可以通过删除有关 chrome 检查器的所有内容来改进这个答案。回答这个问题并不重要。