使用Selenium和openCV對HTML5 canvas游戲進行自動化功能測試（一）

上一篇講了HTML5 canvas游戲的基本工作原理，接下來講如何進行自動化功能測試。

Selenium是一個跨平台的跨瀏覽器的對網頁進行自動化測試的工具。從Selenium 2.0開始Selenium就和WebDriver合體了。如果你還不了解Selenium怎么用，可以看看官網上的例子。Selenium支持各種語言的binding，方便起見，下面的測試腳本都用Python來寫。

自動化功能測試用例流程基本上是這樣的：啟動瀏覽器 -> 打開游戲（網頁）-> 對游戲圖像進行模板匹配，確保UI元素顯示正確 -> 模擬用戶操作 -> 到下一場景  -> 繼續模板匹配 -> 繼續模擬操作 -> 關閉游戲（網頁）以及瀏覽器。如果發現問題，就意味着測試用例失敗，需要報告問題。

假如我想測試一個HTML5 canvas游戲，那么首當其沖就是要找它的canvas標簽了。Selenium支持各種查找方法：

• find_element()
• find_element_by_id()
• find_element_by_name()
• find_element_by_tag_name ()
• find_element_by_css_selector()
• find_element_by_link_text()
• find_element_by_partial_link_text()
• find_element_by_xpath()

挑個最容易的吧： canvas = browser.find_element_by_xpath("//canvas")

那么我怎樣獲得canvas中的圖像呢？有兩種辦法。一種是通過canvas.toDataURL()：

var strData = canvas.toDataURL('image/png');

這種方法返回一個代表整個圖像的Base64字符串。看上去就像："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" （如果你知道怎么解碼，就能發現這個字符串表示了一個小圓紅點點。）

另一種方法是使用context.getImageData()：

var dataObj= context.getImageData(x, y, w, h);

返回一個對象包含RGBA字節緩存。

后者比前者要快很多，並且可以指定裁剪區域，推薦用后者。

不過這兩者都是Javascript調用，如何和Selenium的Python腳本聯系起來呢？

幸運的是Selenium支持直接調用Javascript：

def getClippedImageFromCanvas(browser, canvas, x, y, w, h):
    '''Get a clipped image from canvas using context.getImageData.'''
    data = browser.execute_script("\
        var canvas= arguments[0];\
        var x=arguments[1];\
        var y=arguments[2];\
        var w=arguments[3];\
        var h=arguments[4];\
        var context = canvas.getContext('2d');\
        var dataObj= context.getImageData(x, y, w, h);\
        var data = dataObj.data;\
        return data;"
        ,canvas, x, y, w, h) 
    data_bytes = array.array('B', data).tostring()
    im = Image.fromstring("RGBA", (w, h), data_bytes)
    return im

這樣我們就獲得了可以用於Python腳本的圖像。接下去需要做的就是對圖像進行模板匹配，比如看看預期的UI元素是否出現在正確的位置。這個工作可以由openCV完成。

除了圖像識別，我們還需要模擬用戶操作，如鼠標點擊：

webdriver.ActionChains(browser).move_to_element_with_offset(canvas, x, y).click().perform()

Selenium/Webdriver支持鏈式操作，很cool。

 

下一篇會講一下openCV是如何進行圖像模板匹配的。