我们可以测试与元素交互的视觉行为吗？
例如，我在页面上有一个按钮，它在被点击后会在视觉上激活。就像点击one of these Angular buttons后的简短响应动画。
是否可以检查它，最好使用 Selenium（用于 Python）？有没有办法在 Selenium 中进行视觉测试？
【问题讨论】：
标签： python selenium automated-tests
从技术上讲，不，但在某种程度上是的。 Selenium 不会在视觉上检查页面，因此 Selenium 不会也无法在视觉上测试页面。
但是...它可以做的是验证 DOM 中的更改、CSS 样式中的更改等，这些更改会创建这些视觉更改。例如，您的示例页面在 Raised 部分（第 2 行）中有一个 WARN 按钮。在点击之前，该按钮的 HTML 看起来像
<button class="md-raised md-warn md-button md-ink-ripple" type="button" ng-transclude="">
<span class="ng-scope">Warn</span>
</button>
点击按钮后的 HTML 看起来像
<button class="md-raised md-warn md-button md-ink-ripple" type="button" ng-transclude="">
<span class="ng-scope">Warn</span>
<div class="md-ripple-container" style="background-color: rgba(255, 255, 255, 0.1);">
<div class="md-ripple md-ripple-placed md-ripple-scaled md-ripple-active" style="left: 43.5px; top: 18px; background: rgb(255, 255, 255); width: 96.0052px; height: 96.0052px; border-color: rgb(255, 255, 255);"></div>
</div>
</button>
使用 Selenium，您可以检测这些更改，然后对更改进行验证，以确保它们符合您的预期。
问题在于 CSS 样式和 DOM 的变化并不一定意味着页面在视觉上会发生变化。一个例子......假设你有一个简单的按钮
<button class='button'>
当它被点击时，'clicked' 样式被添加。
<button class='button clicked'>
您可以单击按钮并验证“单击”样式是否应用于该按钮...并且它确实通过了验证...万岁！但是，Selenium 没有看到（因为它实际上并没有在视觉上查看页面）是“单击”样式不包含它应该具有的样式，因此按钮实际上看起来并没有任何不同，即使应用了正确的样式。
总之，Selenium 可以验证 CSS 和 HTML 中驱动视觉更改的更改，但它不能（就它自己）实际验证页面。您可以使用其他库为页面拍照，并通过将它们与页面的预期外观进行比较来验证这些图片。像 applitools.com 这样的服务是收费的。
【讨论】：
.value_of_css_property('a rendered css property') 验证通过 JavaScript 设置的渲染样式。它返回从用户角度可见的样式。尽管它不会使用像 :hover, :focus, :visited, :active 这样的 CSS 伪类动态反映样式集。此方法依赖window.getComputedStyle()。
Selenium 允许您检查 DOM，所以是的。
通常您会查找您的按钮，模拟点击事件，然后使用等待函数等待您的其他元素显示，然后您可以检查该元素的内容。
【讨论】：
对于那些 @JeffC answer 还不够的人来说，有几种做法可以执行基于屏幕截图的测试和目视检查，例如applitools。
更多工具可以found here (ru)。
Adam Carmi 演讲 - Advanced Automated Visual Testing With Selenium - 也很有帮助。
【讨论】：