使用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。
使用Selenium和openCV對HTML5 canvas遊戲進行自動化功能測試（一）