作者|Martin Schneider
编译|Flin
起源|medium

视觉回归测试最常见的状况是应用基线图像进行测试。然而，视觉测试的不同方面也值得探讨。咱们将介绍模板匹配（应用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/edition...

应用图像定位器（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/#templ...

布局测试

另一种视觉测试类型波及验证页面或屏幕的布局。你能够通过图像比拟来做到这一点，图像比拟也会隐式查看布局。一种更简略的办法是应用像Galen这样的专用布局测试工具（在我看来，这是最被低估的UI测试框架之一）。

Galen应用每个屏幕的标准来定义屏幕上的所有（重要）元素及其大小以及它们之间的相对或绝对地位。

让咱们以Google搜寻页为例：

咱们能够应用以下标准示意它：

SEARCH_FIELD:   below LOGO   centered horizontally inside viewport   visibleLOGO:   above SEARCH_FIELD   centered horizontally inside viewport   width < 100% of SEARCH_FIELD/width   visibleSEARCH_BUTTON:   near LUCKY_BUTTON 20px left   visible

留神，下面应用的是JustTestLah！框架的语法（通过在页面对象的YAML文件中定义的惟一键援用UI元素）。在纯Galen中，这些须要在spec文件的顶部定义：

@objects    LOGO          id        hplogo    SEARCH_FIELD  css       input[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;}

这样，每当咱们第一次与屏幕交互时，咱们都能够轻松地从测试中调用验证（顺便说一句，我应用相似的办法来集成Applitools进行视觉测试）：

public class GoogleSteps extends BaseSteps {  private GooglePage google;  @Given("I am on the homepage")  public void homepage() {    google.verify().someAction().nextAction();  }}

光学字符识别（OCR)

视觉断言的另一种模式是光学字符识别，其首字母缩写为OCR。每当因为某种原因将文本渲染为图像并且无奈应用规范测试工具进行验证时，此性能将十分有用。

对于那些应用Selenium进行Web抓取而不是进行测试的用户来说，这可能也很乏味，因为这是网站开发人员采取的反措施之一，以使其变得更加艰难。

咱们应用Tesseract（一种最后由HP在1980年代开发，目前由Google资助的OCR工具）。

咱们的示例不是最理论的示例，而是要展现Tesseract在检测不同类型的字体方面的弱小性能：咱们将验证Google徽标是否的确拼写出“ Google”：

public class GooglePage extends BasePage<GooglePage> {  @Autowired private OCR ocr;  ...  public String getLogoText() {    return ocr.getText($("LOGO"));  }}public class GoogleSteps extends BaseSteps {  private GooglePage google;  ...  @Then("the Google logo shows the correct text")  public void checkLogo() {    assertThat(google.getLogoText()).isEqualTo("Google");  }}

应用的OCR服务如下所示：

public class OCR implements qa.justtestlah.stubs.OCR {  private Logger LOG = LoggerFactory.getLogger(OCR.class);  private TakesScreenshot driver;  private Tesseract ocr;  @Autowired  public OCR(Tesseract ocr) {    this.ocr = ocr;  }  /**   * @param element {@link WebElement} element to perform OCR on   * @return recognised text of the element   */  public String getText(WebElement element) {    return getText(element.getScreenshotAs(OutputType.FILE));  }  /** @return all text recognised on the screen */  public String getText() {    return getText(getScreenshot());  }  private String getText(File file) {    LOG.info("Peforming OCR on file {}", file);    try {      return ocr.doOCR(file).trim();    } catch (TesseractException exception) {      LOG.warn("Error performing OCR", exception);      return null;    }  }  /**   * Usage:   *   * <pre>   * new OCR().withDriver(driver);   * </pre>   *   * @param driver {@link WebDriver} to use for capturing screenshots   * @return this   */  public OCR withDriver(WebDriver driver) {    this.driver = (TakesScreenshot) driver;    return this;  }  /**   * Usage:   *   * <pre>   * new OCR().withDriver(driver);   * </pre>   *   * @param driver {@link TakesScreenshot} to use for capturing screenshots   * @return this   */  public OCR withDriver(TakesScreenshot driver) {    this.driver = driver;    return this;  }  private File getScreenshot() {    return driver.getScreenshotAs(OutputType.FILE);  }  @Override  public void setDriver(WebDriver driver) {    this.driver = (TakesScreenshot) driver;  }}

这要求在运行测试的实例上装置Tesseract。无关残缺的源代码和演示，请查看JustTestLah！测试框架。

  • http://www.justtestlah.qa/

原文链接：https://medium.com/better-pro...

欢送关注磐创AI博客站：
http://panchuang.net/

sklearn机器学习中文官网文档：
http://sklearn123.com/

欢送关注磐创博客资源汇总站：
http://docs.panchuang.net/