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

【问题标题】：HTML Canvas Testing With Jest-Puppeteer (Javascript)使用 Jest-Puppeteer (Javascript) 进行 HTML 画布测试
【发布时间】：2020-04-20 01:10:20
【问题描述】：

我有一个签名组件 (React.js)，需要使用我使用 Jest-Puppeteer 构建的自动化套件进行测试。该组件是一个<canvas> HTML 元素。

<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 是如何工作的，它是属性等

谢谢！

【问题讨论】：

标签： javascript reactjs canvas jestjs jest-puppeteer

【解决方案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

希望对您有所帮助或帮助您入门。

【讨论】：

【解决方案2】：

由于您提到您在“签名”组件中使用画布，因此您所指的ctx 可能是CanvasRenderingContext2D。

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

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

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

【讨论】：