江苏龙网

  1. 主页 > 生活百科 > >

视觉测试工具箱

视觉测试

视觉回归测试最常见的情况是使用基线图像进行测试 。然而，视觉测试的不同方面也值得讨论 。我们将介绍模板匹配（使用OpenCV）、布局测试（使用Galen）和OCR（使用Tesseract），并展示如何将这些工具无缝集成到现有的Appium和Selenium测试中 。
我们使用JAVA（以及OpenCV和Tesseract的Java包装器），但类似的解决方案也可以通过其他技术堆栈实现 。
这篇文章是2020年9月在新加坡的Taqelah和2020年Selenium会议期间（以较短的形式）发表的快速演讲的配套文章 。有关完整功能的演示和更多详细信息，请参阅 http://www.justtestlah.qa/
我希望这个总结能帮助你选择对你的用例最有影响的工具，并给你一些关于如何将它们集成到你自己的工具箱中的想法 。
模板匹配模板匹配的任务是在当前屏幕上找到给定的图像（模板） 。

视觉测试工具箱

文章插图
 
Waldo在哪里？
视觉测试工具箱

文章插图
 
对于移动测试，Appium在其1.9版本中以图像定位器策略的形式添加了此功能 。（更多信息可以在文档和早期教程中找到）其思想是将图像的Base64编码字符串表示传递给WebDriver 。
  • 早期教程：https://appiumpro.com/editions/32-finding-elements-by-image-part-1
使用图像定位器（image locator），你可以像任何其他WebElement一样与结果元素交互 。例如：
WebElement element = driver.findElementByImage(base64EncodedImageFile);element.click();或
By image = MobileBy.image(base64EncodedImageFile);new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(image)).click();开发人员采用的方法是将功能添加到Appium服务器的一部分，并使用OpenCV（这将成为运行Appium服务器的实例的依赖项）来增强实际的图像识别能力 。
有趣的是，客户端与服务器之间的流程如下所示：
  1. 从Appium服务器请求截图 。
  2. 将屏幕截图和模板都发送到Appium服务器进行匹配 。
这感觉并不完美，尤其是如果我们想在同一个屏幕上匹配多个模板 。
当我在2018年首次实现模板匹配时（当时还不知道Appium团队已经在开发模板匹配），我也选择了OpenCV，而是在客户端运行了它 。使用OpenCV Java包装器，我的代码要点如下所示：
Mat result = new Mat(resultRows, resultCols, CvType.CV_32FC1);Imgproc.matchTemplate(image, templ, result, Imgproc.TM_CCOEFF_NORMED);MinMaxLocResult match = Core.minMaxLoc(result);if (match.maxVal >= threshold) {// found}这种方法不需要向上述Appium服务器发出额外的请求 。实际上，除了屏幕截图的功能外，它不需要WebDriver的任何功能 。它还可以与Selenium和Appium一起使用 。也就是说，这也增加了对OpenCV的依赖，这次是对运行测试执行的实例的依赖 。
我将以上两种方法（客户端和服务器端执行）都包装到TemplateMatcher接口中，以展示其用法（将其视为PoC） 。
你可以在JustTestLah中找到更多详细信息和示例！
  • JTL测试框架：https://justtestlah.qa/#template-matching
布局测试另一种视觉测试类型涉及验证页面或屏幕的布局 。你可以通过图像比较来做到这一点，图像比较也会隐式检查布局 。一种更简单的方法是使用像Galen这样的专用布局测试工具（在我看来，这是最被低估的UI测试框架之一） 。
Galen使用每个屏幕的规范来定义屏幕上的所有（重要）元素及其大小以及它们之间的绝对或相对位置 。
让我们以google搜索页为例：
视觉测试工具箱

文章插图
 
我们可以使用以下规范表示它：
SEARCH_FIELD:below LOGOcentered horizontally inside viewportvisibleLOGO:above SEARCH_FIELDcentered horizontally inside viewportwidth < 100% of SEARCH_FIELD/widthvisibleSEARCH_BUTTON:near LUCKY_BUTTON 20px leftvisible注意，上面使用的是JustTestLah！框架的语法（通过在页面对象的YAML文件中定义的唯一键引用UI元素） 。在纯Galen中，这些需要在spec文件的顶部定义：
@objectsLOGOidhplogoSEARCH_FIELDcssinput[name=q]...有多种执行这些检查的方法 。我更喜欢将verify方法作为BasePage抽象类的一部分：
private T verify() {String baseName = this.getClass().getSimpleName();String baseFolder = this.getClass().getPackage().getName().replaceAll("\.", File.separator);String specPath = baseFolder+ File.separator+ configuration.getPlatform()+ File.separator+ baseName+ ".spec";galen.checkLayout(specPath, locators);return (T) this;}


推荐阅读


上一篇：Python Logging 使用指南

下一篇：TCP 粘包、半包 Netty 全搞定