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?