比较2个画布元素

[帕沙]

我如何比较2个没有图像的画布元素，因为代码来自c＃中的客户端？
在我的自动化测试中，我有案例要在执行某些操作之后比较图像之前和之后，但是问题是画布元素和图像是从客户端创建的，因此我无法理解如何在这种情况下进行比较：

HTML源代码：

<div class="canvas-container" style="宽度：492px；高度：492px；职位：相对用户选择：无；"><canvas _ngcontent-ctc-c5 ="" id="collage-canvas" class="lower-canvas" width="492" height="492" style="位置：绝对；宽度：492px；高度：492px；左：0px；顶部：0px；触摸动作：无；用户选择：无；"></canvas><canvas class="upper-canvas " width="492" height="492" style="位置：绝对；宽度：492px；高度：492px；左：0px；顶部：0px；触摸动作：无；用户选择：无； cursor: move;"></canvas></div>


我需要比较的画布


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

 

[跳伞]

我认为在这种情况下，您需要使用Selenium或其他一些Web测试工具，并在进行图像比较之前和之后进行操作。我认为没有一种通用的方法可以在服务器端或单元/集成测试中进行这种比较，而无需编写自己的HTML5解析器解释器。

 

[帕沙]

我认为在这种情况下，您需要使用Selenium或其他一些Web测试工具，并在进行图像比较之前和之后进行操作。我认为没有一种通用的方法可以在服务器端或单元/集成测试中进行这种比较，而无需编写自己的HTML5解析器解释器。

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

 

[跳伞]

您为什么得出没有适当解决方案的结论？还是一个问题"easy"您正在寻找的解决方案，而不是"proper" solution?

 

[帕沙]

我尝试下面的代码：

var 之前Image =（（（IJavaScriptExecutor）Driver）.ExecuteScript（"var canvas = document.getElementsByClassName（'upper-canvas'）[0]; var imgData = canvas.toDataURL（）;返回imgData;");

但是在这段代码中，即使前后图像不一样，图像也一样

 

[跳伞]

您在哪里得到残像？

 

[帕沙]

您在哪里得到残像？

仅在完成某些操作并更改图像后才使用此代码-然后仅使用相同的代码进行变量更改

 

[跳伞]

我对第7个帖子的解释是，您正在使用两个不同的变量，但是据我所知，您也在填充这两个变量"后 完成某些操作并更改图片"。填充一个变量是否更有意义 之前 动作和其他变量 后 那个行动？

Also,what is the type of 之前Image? Is it a C# 串? Or it some special class?

 

[帕沙]

我对第7个帖子的解释是，您正在使用两个不同的变量，但是据我所知，您也在填充这两个变量"后 完成某些操作并更改图片"。填充一个变量是否更有意义 之前 动作和其他变量 后 那个行动？

Also,what is the type of 之前Image? Is it a C# 串? Or it some special class? normal var 之前image - 串

是的，在操作之前填充了一个变量值，在操作之后填充了另一个值，即使画布元素图像不同，我在画布元素中面临的唯一问题是两个值都显示相同

 

[跳伞]

什么 is the type of 之前Image? How are you comparing it with 后Image?

 

[帕沙]

What is the type of 之前Image? How are you comparing it with 后Image?

var 之前Image =（（（IJavaScriptExecutor）Driver）.ExecuteScript（"var canvas = document.getElementsByClassName（'upper-canvas'）[0]; var imgData = canvas.toDataURL（）;返回imgData;");

//一些动作

var 后Image =（（（IJavaScriptExecutor）Driver）.ExecuteScript（"var canvas = document.getElementsByClassName（'upper-canvas'）[0]; var imgData = canvas.toDataURL（）;返回imgData;");

 

[跳伞]

You are not answering my question. 什么 type is that var 之前Image referring to. Is it a 串? Is it a JavaScript 目的?

 

[帕沙]

You are not answering my question. 什么 type is that var 之前Image referring to. Is it a 串? Is it a JavaScript 目的?

串

 

[跳伞]

大概这两个字符串比较相同，因此您遇到了这个问题吗？

也许GUI是按老式方式设计/实现的：实际上有两个画布，并且根据状态，显示特定的画布。这与AJAX的工作方式相反，后者只有一个画布，并且该画布的内容已替换。

 

[帕沙]

大概这两个字符串比较相同，因此您遇到了这个问题吗？

也许GUI是按老式方式设计/实现的：实际上有两个画布，并且根据状态，显示特定的画布。这与AJAX的工作方式相反，后者只有一个画布，并且该画布的内容已替换。

我认为以下对我有帮助


公共静态位图GetImageFromCanvas（此IWebDriver驱动程序，IWebElement元素）
{
var imageBase64 = Driver.ExecuteJavaScript<object>("返回参数[0] .toDataURL（'image / png'）。substring（22）;", element);

返回ImageHelpers.ConvertBase64ToBmp（imageBase64）;
}

 

[跳伞]

您为什么认为这会有所帮助？如果前后字符串相同，则使用流中的数据创建的位图也将相同。