使用Jest-Puppeteer (Javascript)进行HTML Canvas测试

Question

我有一个签名组件(React.js)，它需要用我用Jest-Puppeteer构建的自动化套件进行测试。该组件是一个<canvas>超文本标记语言元素。

<canvas width="1316" height="500" style="width: 100%; touch-action: none;"></canvas>

我在StackOverflow上找到了这个npm包：https://www.npmjs.com/package/jest-canvas-mock和另一个解决方案：HTML Canvas Unit testing

但是，我想知道是否有人可以更全面地解释如何在<canvas>标记上自动执行流程，然后使用Jest-Puppeteer断言它，即ctx是如何工作的，它的属性等。

谢谢!

Answer 1

HTML5画布是一个功能非常丰富的东西，但是为了测试的目的，有一件事需要注意，那就是toDataURL方法https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL，它将提供一个字符串来表示画布内容的图像。您可以将此字符串传递回Puppeteer/node上下文，并检查它以查看画布看起来是否正确(可能是通过将其转换回图像或数组)。

此外，getImageData方法https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData将直接获取图像数组，但您必须将ImageData节点节点转换为列表，以便将其从“https://developer.mozilla.org/en-US/docs/Web/API/ImageData”上下文传递到“Uint8ClampedArray”上下文(我认为)。

// This runs in the browser context

var get_canvas_data_json_object = function() {
    // get the 4 by 4 upper left pixel values from the canvas_context
    var image_data = canvas_context.getImageData(0,0,4,4);
    var data_array = image_data.data;
    // 4 8-bit RGBA color values by 4 rows by 4 columns as a serializable list
    var data_list = Array.from(data_array);
    return data_list;
};

然后从puppeteer调用此函数，如下所示

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

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

https://github.com/flatironinstitute/radiation_viz

它从浏览器上下文中的WebGL画布获取数据：

https://github.com/flatironinstitute/radiation_viz/blob/master/docs/main.js#L322

并在这里的puppeteer/node上下文中读取：

https://github.com/flatironinstitute/radiation_viz/blob/master/image_capturer/scrape_images.js#L66

希望这对你有帮助或帮助你开始。

Answer 2

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

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

与所有浏览器API一样，Mozilla Developer Network可能是您学习的最佳参考资料，因为它们有“如何”以及“所有内容的列表”，甚至还有"X在Y浏览器中工作“类型的文档。这个链接应该会帮助你入门！

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D