5

在过去的几周里，我一直在尝试各种方法，试图找到将 BDD 用于依赖于 HTML5 画布元素的 Web 应用程序以及与它的用户交互的最佳方法。

我一直在使用带有 Rspec 的 Jasmine 和 Cucumber 来规范和集成测试我的应用程序的每个部分，但是我不得不对画布进行集成测试的任何尝试都出现了......不成功。我编写了一个 jQuery 插件来处理与画布的交互以及对其进行初始化。

我想集成测试画布上的实际绘图，确保当你调用类似的东西时

$("canvas").draw("lineTo", 10, 10)

实际上在画布元素的点 (10,10) 上创建了一条线。这就是事实证明的变化，我尝试在任何绘制的像素上使用上下文方法 getImageData()。这让我陷入了一个困境，无论我如何查询画布，我都会得到代表黑色透明像素的像素数据，MDC 说我正在脱离上下文查询画布。

我认为这是带有 RoR 的 Jasmine gem 的问题。如果我能解决这个问题，我会很高兴，但这不是我愿意接受的唯一解决方案。即使我实际上并没有直接检查像素数据，我也真的很想帮助想一种有效的方法来集成测试画布。

感谢任何人的帮助，这真的让我陷入困境。

4

2 回答 2

4

我写了一个工具，js-imagediff，它与 Jasmine 集成用于测试画布。你可以在这里看到一个例子：unit testing canvas with javascript imagediff 和 jasmine。让我知道这是否有用。

但是，它确实使用 getImageData 来进行比较。您是否在该调用中遇到特定错误？或者您是否有指向您所指的 MDC 页面的链接？

于 2011-12-16T17:04:26.740 回答
0

您可以为此使用 Nightwatchjs... http://nightwatchjs.org/ 它有一个用于与 DOM 元素交互的 api，但它也是可扩展的。我已经编写了一些示例自定义命令和断言，您可以使用它们来端到端测试基于 Canvas 的 Phaser 游戏，但您可以查看它是如何完成的并创建自己的测试来执行对画布绘图 api 的调用。

在此处查看一些示例：https ://github.com/hayesmaker/phase-2-e

于 2015-10-20T17:18:10.420 回答