chore: use jsdom in screenshot

[xiaoiver]

使用 JSDOM 进行截图测试，相比 node-canvas 有以下好处：

• 无需本地环境编译不会出现安装失败问题
• SVG 字符串与平台环境无关，最大程度兼容性
• 运行速度快
  方案详见：https://www.yuque.com/antv/ou292n/sf9hp989kfme4gln

存在差异的截图上传到 github workflow artifacts，便于下载到本地和基准图片进行比对。
原有的测试用例逻辑无需更改，断言需要修改：

// before
await expect(canvas).toMatchCanvasSnapshot(dir, 'anchor-empty');

// after
await expect(canvas).toMatchSVGSnapshot(dir, 'anchor-empty');

生成截图存放路径发生改变，只存在 SVG 截图：

// before
snapshots/canvas/anchor

// after
snapshots/anchor

其他问题：

• G6 存在多层画布，可以分别截图。如果想合并两层画布的 SVG，可以用 JSDOM 操作。

await expect([canvas, labelCanvas]).toMatchSVGSnapshot(
  dir,
  'treegraph-graphdata-changedata',
);

• 但直接拼接两个 SVG 使用浏览器预览时会报错：

error on line 106 at column 1: Extra content at the end of the document

• WebGL / Canvas 截图如何测试？由底层渲染引擎保证效果一致性
• 3D 大图测试可以参考：g2-extension-3d 使用 Playwright 截图

[Aarebecca]

playwright 测试环境区别导致文字差异的问题可以通过设置统一的字体规避吗

[xiaoiver]

playwright 测试环境区别导致文字差异的问题可以通过设置统一的字体规避吗

我在 G2 测试下来不行。同样的 Playwright 安装相同版本的 Chrome，在 CI 环境和本地，文本效果也不一致：

[Aarebecca]

playwright 测试环境区别导致文字差异的问题可以通过设置统一的字体规避吗

我在 G2 测试下来不行。同样的 Playwright 安装相同版本的 Chrome，在 CI 环境和本地，文本效果也不一致：

这种看起来像是字体问题，可能是 ci 机器上没有对应的字体文件？
我们可以这样吗，比如在测试环境下 G 渲染的字体强制设置为不同操作系统都支持的字体，例如 Arial, Times New Roman

[xiaoiver]

这种看起来像是字体问题，可能是 ci 机器上没有对应的字体文件？ 我们可以这样吗，比如在测试环境下 G 渲染的字体强制设置为不同操作系统都支持的字体，例如 Arial, Times New Roman

即使是相同的字体，在不同环境下也会有差异的。
比如上面图上的 label 实际是 G2 用 HTML 绘制的，CI 和本地都用 Chrome 也会有 diff。
但 SVG 就不存在这个问题，适应性是最好的。