使用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,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,h);        var data = dataObj.data;        return data;",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,y).click().perform()

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