HTML5引入了一個很棒的新元素，可以用來在窗格上繪制任意內(nèi)容： canvas元素。 數(shù)十年來，胖客戶端應用程序的標準功能現(xiàn)已引入Web應用程序領(lǐng)域。 Web開發(fā)人員不再需要使用專有插件在其應用程序中繪制圖像或圖表。

但是，在進行測試時，此新功能給Web開發(fā)社區(qū)帶來了新的挑戰(zhàn)。 如何在某個時間點測試canvas元素是否處于適當?shù)臓顟B(tài)？ 硒等標準技術(shù)專注于由Web服務器生成的標記，而不關(guān)注畫布上繪制的像素。

在該領(lǐng)域中更有前途的是使用圖像處理來驗證應用程序正確呈現(xiàn)其數(shù)據(jù)的技術(shù)。 這些框架之一是sikuli 。 Sikuli是一個開放源代碼研究項目，始于MIT，現(xiàn)在由Raimund Hocke維護。

為了更實際地進行介紹，我們假設(shè)有一個簡單的Web應用程序，該應用程序使用HTML5 canvas元素實現(xiàn)一些簡單的圖像處理功能，例如灰度，增亮和閾值過濾器以及撤消按鈕（此應用程序的代碼）可以照常在github上找到）：

sikuli的安裝（當然）取決于平臺。 可以從sikuli下載頁面下載的安裝程序是一個Java Swing應用程序，詢問您典型的使用模式。 由于我們不想使用python IDE，因此從選項列表中選擇選項4。 然后下載實際的jar文件，并為我們的操作系統(tǒng)做好準備。 安裝過程完成后，我們會在安裝目錄中找到與OS相關(guān)的jar文件。 由于我們的示例項目使用maven作為構(gòu)建系統(tǒng)，因此在將庫復制到lib文件夾后，我們必須引入系統(tǒng)范圍的依賴關(guān)系：

<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。 該文件夾必須添加到用戶的路徑環(huán)境變量中。

現(xiàn)在我們已經(jīng)安裝了sikuli，讓我們設(shè)置arquillian以便編寫我們的第一個單元測試。 例如， 此處介紹了如何設(shè)置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（）方法設(shè)置戰(zhàn)爭存檔，由arquillian部署到JBoss AS 7.1.1.Final（請參閱arquillian.xml文件）。 在@Before方法中，我們使用SDK類Desktop來打開默認瀏覽器并將其指向部署URL。 在這里，我們還創(chuàng)建了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基于圖像處理，因此我們可以定義之前單擊的屏幕快照中要單擊的位置和要驗證的內(nèi)容。 在這個簡單的示例中，我將所有屏幕截圖都以png文件的形式存儲在我們項目的src / test / resources / img文件夾中。 更高級的項目可能需要更復雜的文件夾層次結(jié)構(gòu)。 如您所見，我們首先等待應用程序顯示。 一旦sikuli找到了第一個屏幕截圖，我們將確認“撤消”按鈕已被禁用。 這是通過調(diào)用帶有禁用按鈕圖像的find（）方法來完成的。 現(xiàn)在，我們可以單擊按鈕“灰度”（同樣由該按鈕的圖像指定），然后驗證是否在屏幕上找到了該圖像的灰度版本。

Sikuli不僅逐像素比較兩個圖像，而且如果您愿意，它還可以計算找到的屏幕區(qū)域與請求區(qū)域的相似度。 當您需要更寬容時（例如，如果您想在不同的瀏覽器中測試應用程序，并且這些會使按鈕稍微不同），這將有所幫助。 相似性屬性的默認值為0.7f，但是如果將其增加到1.0f，則可以進行簡單的逐像素比較。

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

• 使用screen.type（）輸入字符
• 用screen.doubleClick（）雙擊
• 使用screen.dragDrop（）執(zhí)行拖放操作
• 使用鼠標滾輪
• …

結(jié)論

Sikuli是一個功能強大且易于使用的工具，可以對嚴重依賴HTML5的canvas對象的Web應用程序執(zhí)行集成測試。 對于標準胖客戶端應用程序（Swing，JavaFX）當然也是如此。 您可以與Arquillian一起設(shè)置涵蓋許多“真實”用例的綜合測試套件。

參考：在Martin's Developer World博客上，我們的JCG合作伙伴 Martin Mois 使用sikuli和arquillian測試HTML5 canvas應用程序 。

翻譯自: https://www.javacodegeeks.com/2013/11/testing-html5-canvas-applications-with-sikuli-and-arquillian.html

總結(jié)

以上是生活随笔為你收集整理的使用sikuli和Arquillian测试HTML5 canvas应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。