compare 2 canvas elements

[Palak Shah]

How do I compare 2 canvas elements which do not have image as code is from client side in c#?
In my automated test - I have case to compare before and after image after certain action is performed, But the problem is it is having canvas element and image is created from client side so I am not able to understand how do I compare in such scenario:

HTML Source Code:

<div class="canvas-container" style="width: 492px; height: 492px; position: relative; user-select: none;"><canvas _ngcontent-ctc-c5="" id="collage-canvas" class="lower-canvas" width="492" height="492" style="position: absolute; width: 492px; height: 492px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas><canvas class="upper-canvas " width="492" height="492" style="position: absolute; width: 492px; height: 492px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: move;"></canvas></div>


The canvas which I need to compare


//canvas[@class='upper-canvas ']

 

[Skydiver]

I think in that case, you'll need to use Selenium or some other web testing tool and do before and after image comparisons. I don't think there is a general way you can do the kind of comparison on server side or a unit/integration test without writing your own HTML5 parser interpreter.

 

[Palak Shah]

I think in that case, you'll need to use Selenium or some other web testing tool and do before and after image comparisons. I don't think there is a general way you can do the kind of comparison on server side or a unit/integration test without writing your own HTML5 parser interpreter.

I tried researching on that but unfortunately couldn't find any proper solution for that

 

[Skydiver]

Why did you come to that conclusion that there is not a proper solution? Or is it a matter of an "easy" solution that you are looking for, rather than a "proper" solution?

 

[Palak Shah]

I tried below code:

var beforeImage = ((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas ')[0]; var imgData = canvas.toDataURL(); return imgData; ");

But in this code before and after image comes same even though it is not same

 

[Skydiver]

Where are you getting the after image?

 

[Palak Shah]

Where are you getting the after image?

I used this code only after certain action done and image changes - then used same code just the variable change

 

[Skydiver]

My interpretation of your post #7 is that you are using two different variables, but as I understanding things you are also populating those two variables "after certain action done and image changes". Wouldn't it make more sense to populate one variable before the action, and the other variable after the action?

Also,what is the type of beforeImage? Is it a C# string? Or it some special class?

 

[Palak Shah]

My interpretation of your post #7 is that you are using two different variables, but as I understanding things you are also populating those two variables "after certain action done and image changes". Wouldn't it make more sense to populate one variable before the action, and the other variable after the action?

Also,what is the type of beforeImage? Is it a C# string? Or it some special class? normal var beforeimage - string

Yes correct, one variable value populates before the action and other value after the action, the only problem I am facing in canvas element both value shows same even though canvas element image is different

 

[Skydiver]

What is the type of beforeImage? How are you comparing it with afterImage?

 

[Palak Shah]

What is the type of beforeImage? How are you comparing it with afterImage?

var beforeImage = ((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas ')[0]; var imgData = canvas.toDataURL(); return imgData; ");

// some action

var afterImage = ((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas ')[0]; var imgData = canvas.toDataURL(); return imgData; ");

 

[Skydiver]

You are not answering my question. What type is that var beforeImage referring to. Is it a string? Is it a JavaScript object?

 

[Palak Shah]

You are not answering my question. What type is that var beforeImage referring to. Is it a string? Is it a JavaScript object?

string

 

[Skydiver]

And presumably, the two strings compare the same and hence this issue you are running into?

Perhaps the GUI is designed/implemented the old fashioned way: there are actually two canvases and depending on the state, a particular canvas is displayed. This is opposed to the AJAX way of doing things which has only a single canvas and the contents of that canvas is replaced.

 

[Palak Shah]

And presumably, the two strings compare the same and hence this issue you are running into?

Perhaps the GUI is designed/implemented the old fashioned way: there are actually two canvases and depending on the state, a particular canvas is displayed. This is opposed to the AJAX way of doing things which has only a single canvas and the contents of that canvas is replaced.

I think below will help me


public static Bitmap GetImageFromCanvas(this IWebDriver Driver, IWebElement element)
{
var imageBase64 = Driver.ExecuteJavaScript<object>("return arguments[0].toDataURL('image/png').substring(22);", element);

return ImageHelpers.ConvertBase64ToBmp(imageBase64);
}