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

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

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

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

sikuli的安裝（當(dāng)然）取決于平臺(tái)。 可以從sikuli下載頁面下載的安裝程序是一個(gè)Java Swing應(yīng)用程序，詢問您典型的使用模式。 由于我們不想使用python IDE，因此從選項(xiàng)列表中選擇選項(xiàng)4。 然后下載實(shí)際的jar文件，并為我們的操作系統(tǒng)做好準(zhǔn)備。 安裝過程完成后，我們會(huì)在安裝目錄中找到與OS相關(guān)的jar文件。 由于我們的示例項(xiàng)目使用maven作為構(gòu)建系統(tǒng)，因此在將庫(kù)復(fù)制到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時(shí)，它將一些本機(jī)庫(kù)提取到一個(gè)新文件夾中，在我們的示例中為$ {basedir} / lib / libs。 該文件夾必須添加到用戶的路徑環(huán)境變量中。

現(xiàn)在我們已經(jīng)安裝了sikuli，讓我們?cè)O(shè)置arquillian以便編寫我們的第一個(gè)單元測(cè)試。 例如， 此處介紹了如何設(shè)置Arquillian。 由于我不想重復(fù)所有操作，因此在下面您將僅找到單元測(cè)試類：

@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)爭(zhēng)存檔，由arquillian部署到JBoss AS 7.1.1.Final（請(qǐng)參閱arquillian.xml文件）。 在@Before方法中，我們使用SDK類Desktop來打開默認(rèn)瀏覽器并將其指向部署URL。 在這里，我們還創(chuàng)建了sikuli類Screen的實(shí)例。 此類提供了與我們的應(yīng)用程序進(jìn)行交互所需的所有方法。 讓我們更詳細(xì)地看一下：

@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基于圖像處理，因此我們可以定義之前單擊的屏幕快照中要單擊的位置和要驗(yàn)證的內(nèi)容。 在這個(gè)簡(jiǎn)單的示例中，我將所有屏幕截圖都以png文件的形式存儲(chǔ)在我們項(xiàng)目的src / test / resources / img文件夾中。 更高級(jí)的項(xiàng)目可能需要更復(fù)雜的文件夾層次結(jié)構(gòu)。 如您所見，我們首先等待應(yīng)用程序顯示。 一旦sikuli找到了第一個(gè)屏幕截圖，我們將確認(rèn)“撤消”按鈕已被禁用。 這是通過調(diào)用帶有禁用按鈕圖像的find（）方法來完成的。 現(xiàn)在，我們可以單擊按鈕“灰度”（同樣由該按鈕的圖像指定），然后驗(yàn)證是否在屏幕上找到了該圖像的灰度版本。

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

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

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

結(jié)論

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

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

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

總結(jié)

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

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