I'm a beginner in Test Automation and I'm working on a web application like MS Paint and I'm facing a problem. Here is the test scenario: I will drag an element from the toolbar on the HTML5 canvas and then I have to verify using Selenium whether I got the expected result or not.

I firstly approached this problem and solved it by taking the screenshot of the canvas after the element will be dragged and dropped on it. Then I compared this screenshot with an existing image which was stored locally on my PC. The method I used was firstly checking whether the images were of same size or not and then comparing the pixels of each of those images.

But after that, another problem occurred. I was not able to verify the image when the current screenshot was taken on a device with a different screen resolution because my base image (locally stored) was of some other resolution. I searched on Internet but got no satisfactory result for this problem.

Can anyone please help or suggest some other method to verify the result? Is it possible to verify the image dynamically?

  • 1
    You should be able to use canvas api to get image data via javascript for each one and compare it.
    – lauda
    Commented Aug 18, 2017 at 10:08
  • @lauda, but how to get the canvas api using javascript? Sorry, I don't know that much about Javascript. Commented Aug 18, 2017 at 10:22
  • I think in your method, the problem will be similar. Because the size of canvas will be different for every resolution and the images won't be the same in this case. Commented Aug 18, 2017 at 10:26
  • 1
    Should not matter, you need to check the content, check here stackoverflow.com/questions/39479033/… and here w3schools.com/tags/ref_canvas.asp
    – lauda
    Commented Aug 18, 2017 at 11:04


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.