您正在使用过期的浏览器。它可能无法正确显示此网站或其他网站。
您应该升级或使用 替代浏览器.

比较2个画布元素

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我如何比较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']
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
我认为在这种情况下,您需要使用Selenium或其他一些Web测试工具,并在进行图像比较之前和之后进行操作。我认为没有一种通用的方法可以在服务器端进行比较或进行单元/集成测试,而无需编写自己的HTML5解析器解释器。
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我认为在这种情况下,您需要使用Selenium或其他一些Web测试工具,并在进行图像比较之前和之后进行操作。我认为没有一种通用的方法可以在服务器端进行比较或进行单元/集成测试,而无需编写自己的HTML5解析器解释器。
我尝试对此进行研究,但不幸的是找不到适合的解决方案 :(
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
您为什么得出没有适当解决方案的结论?还是一个问题"easy"您正在寻找的解决方案,而不是"proper" solution?
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我尝试下面的代码:

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

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

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
我对第7个帖子的解释是,您正在使用两个不同的变量,但是据我所知,您也在填充这两个变量" 完成某些操作并更改图片"。填充一个变量是否更有意义 动作和其他变量 the action?

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

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我对第7个帖子的解释是,您正在使用两个不同的变量,但是据我所知,您也在填充这两个变量" 完成某些操作并更改图片"。填充一个变量是否更有意义 动作和其他变量 the action?

Also,what is the type of 前Image? Is it a C# string? Or it some special class? normal var beforeimage - string
是的,在操作之前填充一个变量值,在操作之后填充另一个值,即使画布元素图像不同,我在画布元素中面临的唯一问题是两个值都显示相同
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
什么 is the type of 前Image? How are you comparing it with 后Image?
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
What is the type of 前Image? How are you comparing it with 后Image?
var beforeImage =(((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas')[0]; var imgData = canvas.toDataURL();返回imgData;");

//一些动作

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

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
You are not answering my question. What type is that var beforeImage referring to. Is it a string? Is it a JavaScript object?
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
大概这两个字符串比较相同,因此您遇到了这个问题吗?

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

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
大概这两个字符串比较相同,因此您遇到了这个问题吗?

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


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

返回ImageHelpers.ConvertBase64ToBmp(imageBase64);
}
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,531
地点
弗吉尼亚州切萨皮克
编程经验
10+
您为什么认为这会有所帮助?如果前后字符串相同,则使用流中的数据创建的位图也将相同。
 
最佳 底部