如何测试JavaScript SVG/Canvas应用程序？

我们正在评估使用HTML5技术（如SVG和Canvas）的图形JavaScript应用程序的未来工作。一个大问题（与所有以UI为中心的应用程序一样）是如何为所有功能编写测试。如果我们只能测试JavaScript逻辑是不够的，但是我们还需要知道接口是否工作

因此，我们至少需要像Selenium这样的东西，使我们能够与SVG/Canvas交互。当然，还必须有某种框架来为图形背后的逻辑编写普通的单元测试。它应该是免费使用的

有这样的东西吗？此外，由于我们以前根本没有测试此类软件的经验，因此我们将非常感谢任何关于如何解决问题以及通常如何解决问题的提示。我相信，我们不是第一个想到这一点的人

---

提前谢谢

我理解这并不能完全回答您的问题，但是关于单元测试，JavaScripts松散类型使得生成模拟对象非常容易，以确保您的应用程序逻辑与（例如）画布元素正确交互。例如，如果有一个函数在cavas上绘制某些内容：

function drawSomething(canvas){
    var ctx = canvas.getContext('2d');
    ctx.fillRect(10, 10, 55, 50);
}

然后你可以这样测试它：

function testdrawSomething(){
    var mockCanvas = {};
    var mockCtx = {};
    mockCanvas.getContext = function(){
        return mockCtx;
    };
    mockCtx.fillRect = function(a,b,c,d){
        // test values here
    }
    drawSomething(mockCanvas);
}

我使用这种方法为UI密集型HTML5站点生成了一些相当全面的单元测试——如果您仔细编写代码（将对DOM元素的所有引用作为参数传递到要测试的函数中），您可以在浏览器之外运行所有单元测试，允许它们成为CI管道的一部分

显然，您还需要运行一些浏览器内测试，这就是Selenium的用武之地