作者|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/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服務器的實體的依賴項）來增強實際的影像識別能力，
有趣的是，客戶端與服務器之間的流程如下所示：
-
從Appium服務器請求截圖，
-
將螢屏截圖和模板都發送到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 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-programming/visual-testing-toolbox-f742d35d62bd
歡迎關注磐創AI博客站：
http://panchuang.net/
sklearn機器學習中文官方檔案：
http://sklearn123.com/
歡迎關注磐創博客資源匯總站：
http://docs.panchuang.net/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/168062.html
標籤：其他
上一篇：視覺測驗工具箱