Одним из нововведений HTML 5 был тег < canvas >, с помощью которого можно было создавать различные графики и рисунки используя JavaScript. Многие разработчики стали активно его применять при создании веб-приложений. Поэтому любой автоматизатор может легко оказаться на проекте, где нужно будет автоматизировать работу и с Canvas элементами. Так давайте поробуем с помощью Selenium WebDiver это сделать:
@Test
public void testHTML5CanvasDrawing() throws Exception {
//Get the HTML5 Canvas Element
WebElement canvas = driver.findElement(By.id("imageTemp"));
//Select the Pencil Tool
Select drawtool = new Select(driver.findElement(By.id("dtool")));
drawtool.selectByValue("pencil");
//Create a Action Chain for 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 to verify if the Drawing is performed
FileUtils.copyFile(WebElementExtender.captureElementBitmap(canvas), new File("c:\\tmp\\post.png"));
assertEquals(CompareUtil.Result.Matched, CompareUtil.CompareImage("c:\\tmp\\base_post.png", "c:\\tmp\\post.png"));
}
