使用Jest Puppeter（Javascript）进行HTML画布测试

我有一个签名组件（React.js），需要使用我用Jest Puppeter构建的自动化套件进行测试。该组件是一个

HTML元素

我找到了这个npm包：和StackOverflow的另一个解决方案：

但是，我想知道是否有人能给出更全面的解释，说明如何在

标记上自动化一个过程，然后用Jest Puppeter理想地断言它，即

ctx

如何工作，它的属性等

---

谢谢大家!

既然您提到在“签名”组件中使用画布，那么您所指的

ctx

可能就是

canvasrrenderingcontext2d

您可以将

CanvasRenderingContext2D

视为一个有状态的绘图机器人，它可以在创建它的

Canvas

实例上进行绘制。您可以设置机器人的属性，如绘制颜色和笔刷宽度，然后调用其方法将其移动并绘制到它所属的

画布上

与所有浏览器API一样，Mozilla开发者网络可能是您学习的最佳参考，因为它们有“如何”和“所有内容列表”，甚至有“X在Y浏览器中工作”类型的文档。这个链接应该可以帮助你开始

既然您提到在“签名”组件中使用画布，那么您所指的
ctx
可能就是
canvasrendingcontext2d

您可以将
CanvasRenderingContext2D
视为一个有状态的绘图机器人，它可以在创建它的
Canvas
实例上进行绘制。您可以设置机器人的属性，如绘制颜色和笔刷宽度，然后调用其方法将其移动并绘制到它所属的
画布上

与所有浏览器API一样，Mozilla开发者网络可能是您学习的最佳参考，因为它们有“如何”和“所有内容列表”，甚至有“X在Y浏览器中工作”类型的文档。这个链接应该可以帮助你开始

HTML5画布是一个功能丰富的东西，但出于测试目的
要看的一件事是
toDataURL
方法，它将为您提供一个表示画布内容图像的字符串。您可以将此字符串传递回木偶演员/节点上下文，并检查画布是否正确（可能通过将其转换回图像或数组）

另外，
getImageData
方法将直接获取图像数组
但是您必须将ImageData
Uint8ClampedArray
转换为列表才能传递它
从“浏览器”到“节点”上下文（我认为）

然后像这样从木偶演员那里调用这个函数

// this runs in the puppeteer/node context
const data = await page.evaluate("get_canvas_data_json_object()")

下面是一个类似的工作示例


从浏览器上下文中的WebGL画布获取数据，如下所示：


并在木偶演员/节点上下文中阅读：


希望这对您有所帮助或帮助您入门。
HTML5画布是一个功能丰富的东西，但出于测试目的
要看的一件事是
toDataURL
方法，它将为您提供一个表示画布内容图像的字符串。您可以将此字符串传递回木偶演员/节点上下文，并检查画布是否正确（可能通过将其转换回图像或数组）

另外，
getImageData
方法将直接获取图像数组
但是您必须将ImageData
Uint8ClampedArray
转换为列表才能传递它
从“浏览器”到“节点”上下文（我认为）

然后像这样从木偶演员那里调用这个函数

// this runs in the puppeteer/node context
const data = await page.evaluate("get_canvas_data_json_object()")

下面是一个类似的工作示例


从浏览器上下文中的WebGL画布获取数据，如下所示：


并在木偶演员/节点上下文中阅读：


希望这能帮助你开始