What are the possible ways of testing visual parts of a WebGL/Canvas-based game

Question

Assuming a game written using Dart + WebGL/Canvas...

Much of the logic, maths, input handling, etc. is easily testable with code; but ensuring you actually do the right thing to make your sprite turn up on screen at the correct location/orientation/etc. is more tricky.

What tools/APIs exist that would assist testing the actual rendered output?

Answer 1

• The WebGl SDK has a conformance test tool and it uses "webgl-test-utils.js".

• You might use a scriptable browser kit like PhantomJS with Screenshot & ImageDiff tools.

• https://ghostinspector.com/blog/webcast-phantomjs-casperjs-screenshot-comparison-and-ghost-inspector/

• https://github.com/HuddleEng/Resemble.js/

• for testing shaders: https://code.google.com/p/glsl-unit/

Answer 2

What you could do is take a screenshot (of the actual outcome) and then compare it to some image you already have (expected outcome) to make sure they are the same. You could achieve that using WebDriver.

There is an example implementation which uses Selenium here: https://groups.google.com/forum/#!msg/selenium-users/8atiPIh39OY/Gp9_KEXnpRUJ