0

I'm a beginner in Automation testing and I'm using Java for Selenium WebDriver. I have an HTML5 canvas as a part of web application similar to Paint. Although I was successful in moving an element on the canvas. But now, I want to compare this element(which is an image in pixels) with another image saved on the Hard Drive of my PC. I thought that taking a screenshot of the element on the canvas and then comparing it with another image would be a better idea. But I am not finding enough trustable resources on the Internet through which I can compare those 2 images by taking their screenshots.

So, I want to ask if there is some another better method or any API with the help of which I would be able to compare both of the images?

KhiladiBhaiyya
  • 633
  • 1
  • 14
  • 43
  • 1
    "But this method is not satisfactory." Why not? If you don't explain what the problem is with your current method, how can people suggest a method that doesn't have that problem? – Erwin Bolwidt Aug 14 '17 at 05:13
  • And what does "compare" means here ? – Kaiido Aug 14 '17 at 05:14
  • @Kaiido, By compare, I mean to check whether both of those images are exactly same or not. – KhiladiBhaiyya Aug 14 '17 at 05:16
  • Then you can simply rewrite whatever your `compare` function is to `compare = (imageA, imageB) => false;`. The image drawn on the canvas, has nothing to do with the original one anymore. [see here](https://stackoverflow.com/questions/36273990/canvas2d-todataurl-different-output-on-different-browser/36274211) and [here](https://stackoverflow.com/questions/26615580/is-canvas-getimagedata-method-machine-browser-dependent/26615864#26615864) – Kaiido Aug 14 '17 at 05:18
  • @ErwinBolwidt, I have edited the question. Please read the details again. – KhiladiBhaiyya Aug 14 '17 at 05:19
  • @Kaiido, but how do I reach that newly inserted element in canvas using the Java code? Sorry if it seems a childish question. I'm a newbie in Selenium Webdriver. – KhiladiBhaiyya Aug 14 '17 at 05:21
  • I don't know selenium either, but instead of checking if it is the same as expected, check if there is anything, because none of your users will produce exactly the same output. I don't know what you are trying to check exactly, but if it is just to know if the image has been drawn, you can call the canvas `getImageData` method and check if specific pixels are empty or not. – Kaiido Aug 14 '17 at 05:26

2 Answers2

1

You might want to take a look a this quite handy framework called aShot

Documentation, community and support is pretty robust.

Also, below is an example of the code for screenhsots comparison.

Screenshot comparison

.takeScreenshot() returns a Screenshot object which contains an image and data for comparison. One can ignore some WebElements from comparison.

Screenshot myScreenshot = new AShot()
  .addIgnoredElement(By.cssSelector("#weather .blinking_element")) // ignored element(s)
  .takeScreenshot(driver, yandexWeatherElement);

Use ImageDiffer to find a difference between two images.

ImageDiff diff = new ImageDiffer().makeDiff(myScreenshot, anotherScreenshot);
BufferedImage diffImage = diff.getMarkedImage(); // comparison result with marked differences

Note, you can see more examples following the link above.

Mykola
  • 352
  • 1
  • 9
  • I looked at it but it will become a problem for me while comparing the screenshots when my base image will be of on resolution and the image from screenshot will be of different resolution. – KhiladiBhaiyya Aug 18 '17 at 08:44
  • You can align both images resolutions before doing comparisons, this post explains how: https://stackoverflow.com/q/11563307/5971690 – Mykola Aug 18 '17 at 11:22
  • Actually the problem is that when I'll reduce the size of the screenshot to make it equal to the base Image, then some of the elements in my application such as Toolbar, and all such stuff will get hidden and it will lead to inconsistencies while comparing both of these images. – KhiladiBhaiyya Aug 18 '17 at 11:39
  • I was thinking more of resizing, changing a resolution of the I images and not cutting, cropping them. Basically aligning resolutions of both, original and taken screenshots (of course it should be done with the copy of the original screenshot) at first before doing comparing. Anyways, good luck with finding your solution. – Mykola Aug 18 '17 at 11:50
0

Convert both imagens for Base64 and compare them.

To get the base64 of image in canvas use this code:

WebElement canvas = driver.findElement(By.tagName("canvas"));
JavascriptExecutor js = (JavascriptExecutor) driver;
String canvas_base64_String = js.executeScript("return arguments[0].toDataURL('image/png').substring(22);", canvas).toString();
Razor
  • 447
  • 5
  • 10