使用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():
另一种方法是使用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是如何进行图像模板匹配的。?