使用sikuli和Arquillian测试HTML5 canvas应用程序

HTML5引入了一个很棒的新元素，可以用来在窗格上绘制任意内容： canvas元素。数十年来，胖客户端应用程序的标准功能现已引入Web应用程序领域。 Web开发人员不再需要使用专有插件在其应用程序中绘制图像或图表。

但是，在进行测试时，此新功能给Web开发社区带来了新的挑战。如何在某个时间点测试canvas元素是否处于适当的状态？硒等标准技术专注于由Web服务器生成的标记，而不关注画布上绘制的像素。

在该领域中更有前途的是使用图像处理来验证应用程序正确呈现其数据的技术。这些框架之一是sikuli 。 Sikuli是一个开放源代码研究项目，始于MIT，现在由Raimund Hocke维护。

为了更实际地进行介绍，我们假设有一个简单的Web应用程序，该应用程序使用HTML5 canvas元素实现一些简单的图像处理功能，例如灰度，增亮和阈值过滤器以及撤消按钮（此应用程序的代码）可以照常在github上找到）：

html5-画布截图

sikuli的安装（当然）取决于平台。可以从sikuli下载页面下载的安装程序是一个Java Swing应用程序，询问您典型的使用模式。由于我们不想使用python IDE，因此从选项列表中选择选项4。然后下载实际的jar文件，并为我们的操作系统做好准备。安装过程完成后，我们会在安装目录中找到与OS相关的jar文件。由于我们的示例项目使用maven作为构建系统，因此在将库复制到lib文件夹后，我们必须引入系统范围的依赖关系：

<dependency><groupId>org.sikuli</groupId><artifactId>sikuli</artifactId><version>1.0</version><scope>system</scope><systemPath>${basedir}/lib/sikuli-java.jar</systemPath>
</dependency>

首次使用sikuli时，它将一些本机库提取到一个新文件夹中，在我们的示例中为$ {basedir} / lib / libs。该文件夹必须添加到用户的路径环境变量中。

现在我们已经安装了sikuli，让我们设置arquillian以便编写我们的第一个单元测试。例如，此处介绍了如何设置Arquillian。由于我不想重复所有操作，因此在下面您将仅找到单元测试类：

@RunWith(Arquillian.class)
public class FilterTest {public static final String WEBAPP_SRC = "src/main/webapp";@ArquillianResourceURL deploymentURL;private Screen screen;@Beforepublic void before() throws URISyntaxException, IOException {screen = new Screen();if (Desktop.isDesktopSupported()) {Desktop.getDesktop().browse(deploymentURL.toURI());} else {fail();}}@Deploymentpublic static WebArchive createDeployment() {return ShrinkWrap.create(WebArchive.class, "html5-sikuli-webapp.war").addClasses(HomeBackingBean.class).addAsWebResource(new File(WEBAPP_SRC, "home.xhtml")).addAsWebResource(new File(WEBAPP_SRC, "resources/css/style.css"), "resources/css/style.css").addAsWebResource(new File(WEBAPP_SRC, "resources/images/rom.jpg"), "resources/images/rom.jpg").addAsWebResource(new File(WEBAPP_SRC, "resources/js/html5Sikuli.js"), "resources/js/html5Sikuli.js").addAsWebResource(new File(WEBAPP_SRC, "resources/js/jquery-2.0.3.js"), "resources/js/jquery-2.0.3.js").addAsWebInfResource(EmptyAsset.INSTANCE, "beans.xml").setWebXML(new File(WEBAPP_SRC, "WEB-INF/web.xml"));}

createDeployment（）方法设置战争存档，由arquillian部署到JBoss AS 7.1.1.Final（请参阅arquillian.xml文件）。在@Before方法中，我们使用SDK类Desktop来打开默认浏览器并将其指向部署URL。在这里，我们还创建了sikuli类Screen的实例。此类提供了与我们的应用程序进行交互所需的所有方法。让我们更详细地看一下：

@Test
@RunAsClient
public void testGrayScale() throws FindFailed {screen.wait(getFullPath("originalImage.png"));screen.find(getFullPath("btnUndo_disabled.png"));screen.click(getFullPath("btnGrayscale.png"));screen.find(getPattern("grayscaleImage.png", 0.9f));screen.click(getFullPath("btnUndo_enabled.png"));screen.click(getPattern("originalImage.png", 0.9f));
}private Pattern getPattern(String path, float similarity) {Pattern p = new Pattern(getFullPath(path));return p.similar(similarity);
}private String getFullPath(String path) {return "src/test/resources/img/" + path;
}

由于sikuli基于图像处理，因此我们可以定义之前单击的屏幕快照中要单击的位置和要验证的内容。在这个简单的示例中，我将所有屏幕截图都以png文件的形式存储在我们项目的src / test / resources / img文件夹中。更高级的项目可能需要更复杂的文件夹层次结构。如您所见，我们首先等待应用程序显示。一旦sikuli找到了第一个屏幕截图，我们将确认“撤消”按钮已被禁用。这是通过调用带有禁用按钮图像的find（）方法来完成的。现在，我们可以单击按钮“灰度”（同样由该按钮的图像指定），然后验证是否在屏幕上找到了该图像的灰度版本。

Sikuli不仅逐像素比较两个图像，而且如果您愿意，它还可以计算找到的屏幕区域与请求区域的相似度。当您需要更宽容时（例如，如果您想在不同的浏览器中测试应用程序，并且这些会使按钮稍微不同），这将有所帮助。相似性属性的默认值为0.7f，但是如果将其增加到1.0f，则可以进行简单的逐像素比较。

但这并不是全部。有了sikuli，您几乎可以完成人类交互者可以做的所有事情：