你好
在本文中，我想谈谈我在视觉回归测试自动化方面的经验。
引言
在偶然发现布局中的一个小错误之后，我决定进行视觉测试的自动化。 该项目更改了一页的设计，并且更改涉及非任务页面。
决定不要手动检查网站页面的外观后，我开始进行自动化操作。
我们需要一个具有便捷报告的简单解决方案。 为了能够不受任何限制地编写自动测试，请比较页面和站点元素的屏幕快照并使用不同的浏览器。
在简短搜索了现成的解决方案/框架之后，我们决定使用必要的功能和报告格式来编写自己的解决方案会更容易。 在我看到的选项中，只有Galen Framework似乎合适，但是在编写解决方案后才找到它。
在实施和测试自动测试之后，我决定稍微完善一下测试并创建一个单独的项目，以便以后可以在其他站点和项目上使用它。
关于项目
VisualRegressionBoilerplate是具有特定结构的相对简单的项目。
类似样板模板/项目的可视化自动测试。
该项目适用于小型站点/项目。 对于那些需要简单解决方案而没有复杂框架的人。
可能性
- 网站页面截图的比较。 您可以指定一个或多个被忽略的项目。
- 站点元素的屏幕截图比较。
- 可以使用不同的屏幕宽度进行测试： 移动设备 -360像素， 平板电脑 -768像素， 台式机 -1920像素
- 默认情况下，有两种浏览器可用-chrome和firefox +相同的浏览器（ 无头模式）。
- 报告生成器-为每个测试创建4个屏幕截图-当前，预期，差异，gif。 如果没有预期的屏幕截图，实际的屏幕截图将按预期保存。
二手技术
- 爪哇
- ng
- 马文
- 硒webdriver
- aShot-用于比较图像的库
如何开始进行项目
- 安装Java，Maven，浏览器。
- 在DriverWrapper类的构造函数中，可以根据需要添加或删除浏览器
- TestConfig类存储所有项目设置-浏览器，默认浏览器窗口大小等。 您可以在此处添加或更改设置。
- 在BasePage类中，设置测试站点的地址。 您可以为不同的环境（dev，stage，prod）设置不同的地址。 应用程序模块中的BasePage和其余类是页面对象模式的示例。 使用它是可选的。
- 检查TestExample测试类并创建自己的测试类作为示例。
- 向testng.xml添加新的测试类
- 通过Maven使用必要的参数运行测试
- 在报告文件夹中检查报告
在
README项目中，将详细介绍所有内容。
如何编写测试
一般来说，随您的便。 没有任何限制。 您可以使用
页面对象模式或其他方式。
您需要使用以下功能来比较屏幕截图：
对于页面：页面截图比较：
comparePageScreenshots("index_page");
页面截图与忽略一个元素的比较：
comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);
比较页面截图时忽略了几个元素：
comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});
页面元素的屏幕截图比较-可以通过CSS Locator搜索该元素
compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);
或者，您可以传递
WebElement类的对象
compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));
可能的问题
- 由于页面上的动态内容，测试可能会失败。 通过忽略具有动态内容的元素可以解决该问题。
- 由于一些像素差异，测试可能会失败。 您可以通过编辑设置-TestConfig.allowableDiffSize来解决此问题。
- 有时，站点上的所有图像或某些元素没有时间加载。 为了解决这个问题，我编写了preparePageForScreenshot（）函数，其中使用javaScript在页面中上下滚动。 但这并不总是有帮助。
总结
目前，该项目大约有50个测试-页面和不同的页面元素。
通过bash脚本，将启动自动测试，并立即在三个扩展（手机，平板电脑，台式机）中测试该站点。
由于动态内容以及站点的某些元素并不总是有时间按时加载，因此存在一些问题，但是自动测试可以应付任务。
对布局的任何更改都将立即可见。
链接到项目存储库
-VisualRegressionBoilerplate