Automating interaction on the HTML5 canvas element

Web developers can now create cool drawing applications within web browsers using the new HTML5 <canvas> element. This element is used to build drawing and charting applications by using JavaScript. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

In this recipe, we will automate a simple drawing application through the Selenium WebDriver action class for mouse movements. We will also implement an image comparison feature to test the drawing on a canvas.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.

How to do it...

Create a new test named testHTML5CanvasDrawing for testing the <canvas> element. We draw a shape by using a sequence of mouse movements on the <canvas> element. We will verify the canvas with a previously captured image and check the shape has been redrawn as follows:

@Test
public void testHTML5CanvasDrawing() throws Exception...