Question

Can we test visual behavior of interaction with element?

For example, I have a button on the page, which visually activates in a few moments after being clicked. Like a short responce animation after clicking one of these Angular buttons.

Is it possible to check it, preferably with Selenium (for Python)? Is there any way to perform visual testing in Selenium?

Answer 1

Selenium lets you inspect the DOM, so yes.

Typically you would lookup your button, simulate a click event, then use a wait function to wait for your other element to show, and then you can inspect that element for content.

https://github.com/SeleniumHQ/selenium/wiki/Getting-Started

Answer 2

技术上，不，但在某种程度上是的。 Selenium没有视觉检查页面，因此，Selenium没有，也无法直观地测试页面。

但是......它可以做的是验证DOM中的变化，改变CSS样式等创建那些视觉变化。例如，您的示例页面在“凸起”部分（第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'>

点击后，点击“＆＃39;风格被添加。

<button class='button clicked'>

您可以点击该按钮，然后点击“点击”按钮。样式应用于该按钮......它确实通过了验证......欢呼！但是，Selenium没有看到（因为它实际上没有在视觉上看到页面）是＆＃39;点击了＆＃39;样式并没有包含它应该具有的样式，因此即使应用了正确的样式，按钮实际上看起来也没有任何不同。

总之，Selenium可以验证CSS和HTML中的变化来驱动视觉变化，但它不能（在它自己的身上）实际可视地验证页面。您可以使用其他库来拍摄页面的图片，并通过将它们与页面预期的外观进行比较来验证它们。像applitools.com这样的服务是收费的。

Answer 3

那些@JeffC answer还不够的人，有几种做法可以执行基于屏幕截图的测试和视觉检查，例如applitools。

更多工具可以是found here（ ru ）。

Adam Carmi演讲 - Advanced Automated Visual Testing With Selenium - 也可以提供帮助。

Is there any way to test visual behavior of interaction with element?

3 个答案: