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

Question

我有一个签名组件 (React.js)，需要使用我用 Jest-Puppeteer 构建的自动化套件进行测试。该组件是一个<canvas>HTML 元素。<canvas width="1316" height="500" style="width: 100%; touch-action: none;"></canvas>我找到了这个 npm 包：https ://www.npmjs.com/package/jest-canvas-mock和 StackOverflow 上的另一个解决方案：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.

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

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

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