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.
Create a new test named testHTML5CanvasDrawing for testing the <canvas> element. We will 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 if the shape has been redrawn, as follows:
package com.secookbook.examples.chapter10;
import java.io.File;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.Select;
import org.apache.commons.io.FileUtils;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import com.secookbook.examples.chapter09.CompareUtil;
import com.secookbook.examples.chapter09.WebElementExtender;
import static org.junit.Assert.*;
public class HTML5CanvasDrawing {
private WebDriver driver;
@Before
public void setUp() {
driver = new FirefoxDriver();
driver.get("http://cookbook.seleniumacademy.com/html5canvasdraw.html");
}
@Test
public void testHTML5CanvasDrawing() throws Exception {
// Get the HTML5 Canvas Element
WebElement canvas = driver.findElement(By.id("imageTemp"));
// Select the Pencil Tool
Select drawTools = new Select(driver.findElement(By.id("dtool")));
drawTools.selectByValue("pencil");
// Create a Action chain to draw a shape on Canvas
Actions builder = new Actions(driver);
builder.clickAndHold(canvas).moveByOffset(10, 50).moveByOffset(50, 10)
.moveByOffset(-10, -50).moveByOffset(-50, -10).release()
.perform();
// Get a screenshot of Canvas element after drawing and compare it to
// the base version
FileUtils.copyFile(WebElementExtender.captureElementPicture(canvas),
new File("target/screenshots/drawing.png"));
assertEquals(CompareUtil.Result.Matched, CompareUtil.CompareImage("src/test/resources/testdata/base_drawing.png", "target/screenshots/drawing.png"));
}
@After
public void tearDown() {
driver.quit();
}
}To draw on the canvas, we will first select a drawing tool by selecting the pencil option from the Drawing Tool dropdown. Selenium WebDriver provides a Select class for working with dropdowns and lists. In the test, the selectByValue() method is called to select the pencil tool:
Select drawTools = new Select(driver.findElement(By.id("dtool")));
drawTools.selectByValue("pencil");We then draw a shape on the canvas using the Selenium WebDriver actions generator. Selenium WebDriver will perform a sequence of mouse movements by calling the moveByOffset() method while the mouse button is held down to draw the shape, with the mouse button released at the end:
builder.clickAndHold(canvas).moveByOffset(10, 50).
moveByOffset(50,10).
moveByOffset(-10,-50).
moveByOffset(-50,-10).release().perform();The Selenium actions generator mimics the mouse operations exactly like an end user drawing a shape on the canvas.
Finally, we will capture an image of the canvas using the captureElementBitmap() method of the WebElementExtender class. This image will be compared with a baseline image to verify that the drawing operation works on the canvas as expected, using the Selenium WebDriver.