关于人工智能:视觉测试工具箱

作者 |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
   visible

LOGO:
   above SEARCH_FIELD
   centered horizontally inside viewport
   width < 100% of SEARCH_FIELD/width
   visible

SEARCH_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/