appiumpro 用图片查找元素 Part 1

AppiumPro · November 19, 2018 · 764 hits

译者:胡八
Appium作者Jonathan 独家授权

用图片查找元素 Part 1

Java 全平台 全设备

移动端自动化的一个不幸的现实是,并非每个UI元素在实践中都是可以自动化的!这可能是因为某些元素是由自定义类构建的,缺少可访问路径或自动化支持。这可能是因为没有唯一可应用于元素的标识定位器策略和选择器(想想一个动态列表视图,从自动化引擎的角度来看,虽然所有项看起来是相同的,但对真实用户来说却是不同的)。或者想象一个没有传统UI控件的2D或者3D游戏——它们只是渲染引擎绘制出来的像素!

icon

从历史上看,Appium从没有试图去支持这些用例,一直是通过XCUITests和UiAutomator2s来提供支持。如果它们找不到一个元素,Appium也就无法找到。

然而,有一把大锤子可以用来击碎这个问题。就像达摩克里斯之剑(或者叫达摩克里斯之锤?),它悬在Appium开发者头上已经有一段时间了。我们应该用它吗?还是我们不应该?这把大锤子就是视觉元素的检测。之所以称它为一把大锤子,是因为它用视觉特征来检测元素,来与它们互动。这与人类通常使用的策略完全相同,因此无论应用程序的类型如何,也不管开发者是否记得给特定元素赋予一个测试ID,两种都适用。

最终Appium团队决定咬紧牙关,支持一小部分视觉检测特性,这些特性在Appium1.9.0中就能用到了。在本文中,我们关注这些特征最常见的用例,即图像元素查找。(在本系列的Part 2中,我们将介绍用于实现此特性的高级方法,但现在我们只看一些基本方法。)

什么是一个图像元素?从客户端代码来看,图像元素与任何其他元素完全一样,只是你已经通过新的-image定位器策略找到了它。和一个典型的选择器(如“foo”)不同的是,这个新的定位器策略使用的字符串是Base64编码的图像文件。特定查找的图像文件代表一个模板图像,Appium将用它来匹配屏幕的区域,来查找最可能出现的元素。

当然,这意味着你身边必须有一张图片,与你想在应用程序中寻找的图片相匹配。Appium是如何使用这张图片找到你的元素的呢?在底层,我们依靠OpenCV库来找到与你的参考/模板图片最匹配的屏幕快照区域。OpenCV是相当强大的,即使屏幕和参考图像之间存在各种差异(例如,旋转或尺寸的差异),也能匹配成功。

准备好看一个例子了吗?那我们开始吧。这是一个全新的特性,所以客户端和服务端的行为都还有些瑕疵。但是它非常神奇!在客户端,我创建了一个新的功能,一个照片列表,按随机顺序显示照片。当你点击一张照片时,一个包含照片描述的alert就会弹出来,如下图所示:

icon

如果没有图像匹配,这是一个不可能自动化起来的场景。这些图像在UI树中没有任何标识信息,并且每次加载视图时,它们的顺序都会发生变化,因此如果我们想要点击特定的图像,就不能硬编码元素索引。图像查找就是我们的救星!实际上,使用这种策略与使用任何其他策略找到元素是一样的:

WebElement el = driver.findElementByImage(base64EncodedImageFile);
el.click();

一旦我们有了一个图像元素,我们可以像任何其他元素一样点击它。(还有一些其他用于图像元素的命令,但显然大多数常见操作都不适用——例如,sendKeys。这是因为我们实际上并没有对实际UI元素的引用,我们只有元素所在的屏幕区域。)
当然,为了能让它跑起来,我们必须有一个Base64编码的图像文件。在Java 8中,这是非常简单明确的:

// 假设我们有一个叫refImgFile的文件
Base64.getEncoder().encodeToString(Files.readAllBytes(refImgFile.toPath()));

这就是关于图像查找的全部内容了!很赞的是,通过图像查找元素既支持隐式的,也支持显式的等待策略,因此你的测试可以稳健地等待,直到你的参考图像与屏幕上的图像匹配:

By image = MobileBy.image(base64EncodedImageFile);
new WebDriverWait(driver, 10)
.until(ExpectedConditions.presenceOfElementLocated(image)).click();

综上所述,我们现在可以为上述场景写一个成功的测试:导航到App的Photo视图,点击我们想要的那张照片,然后通过比较随后显示的文本来验证我们是否点击了照片。为了找到照片,我们使用下面的参考模板:

icon

下面是相关的代码(暂时先忽略上面的模板图片):

private String getReferenceImageB64() throws URISyntaxException, IOException {
URL refImgUrl = getClass().getClassLoader().getResource("Edition031_Reference_Image.png");
File refImgFile = Paths.get(refImgUrl.toURI()).toFile();
return Base64.getEncoder().encodeToString(Files.readAllBytes(refImgFile.toPath()));
}

public void actualTest(AppiumDriver driver) throws URISyntaxException, IOException {
WebDriverWait wait = new WebDriverWait(driver, 10);

try {
// get to the photo view
wait.until(ExpectedConditions.presenceOfElementLocated(photos)).click();

// wait for and click the correct image using a reference image template
By sunriseImage = MobileBy.image(getReferenceImageB64());
wait.until(ExpectedConditions.presenceOfElementLocated(sunriseImage)).click();

// verify that the resulting alert proves we clicked the right image
wait.until(ExpectedConditions.alertIsPresent());
String alertText = driver.switchTo().alert().getText();
Assert.assertThat(alertText, Matchers.containsString("sunrise"));
} finally {
driver.quit();
}
}

在上面的示例中,你可以看到我编写的一个帮助函数,用于获取参考图像的Base64编码版本,我已经把它作为资源文件存在项目中了。当然,把参考图像放到项目中的做法每个人可能会有所不同。

在本系列的Part 2中,我们将介绍一些可用于帮助查找图像元素的特殊参数。来看一下吧!另外,也看一下完整的代码示例。请注意,要成功运行,你要确保你从源代码中拉取的是最新的Appium Java客户端(参见项目中的build.gradle文件,并且至少是Appium 1.9.0)。

No Reply at the moment.
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up