使用 playwright 进行截图测试

[xiaoiver]

[English Template / 英文模板]

🤔 这个变动的性质是？

• 新特性提交
• 日常 bug 修复
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 工作流程
• 版本更新
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

#2140

💡 需求背景和解决方案

由于 vite 对 yarn workspace 支持并不好，再加上 L7 用了一些 rollup plugin，因此暂时仍然使用 dumi 做为开发服务器。
在 CI 截图测试开始前，启动该服务器，使用 Playwright 访问示例 URL 并截图，后续每次都和基准图片进行像素级 diff，确保渲染效果的稳定性。

添加一个新的测试用例步骤如下：

在 __tests__/e2e/tests.ts 中添加测试用例名称到 URL 的映射关系。由于目前 L7 使用的是 dumi，测试用例写在 tsx 中通过 md 引用，暂时没法像 G2、G6 使用的 vite 那样直接获取，因此需要手动维护：

export const tests = {
  'point-circle': 'features/point/circle',
}

然后 dumi 示例中需要修改，CI 环境使用不带底图的 Map。这是由于高德地图每次渲染都会有微小差别（见下方评论）：

import { GaodeMap, Map } from '@antv/l7-maps';

const scene = new Scene({
  map: new (process.env.CI ? Map : GaodeMap)({})
});

同时如果有动画也需要根据 process.env.CI 决定是否禁用，否则截图也会不稳定。例如 citybuilding layer：

pointLayer
  .animate({
    enable: !process.env.CI, // CI 环境禁用动画
  })

CI 执行后，从 github workflow artifacts 上下载截图，作为后续的基准图片，可以参考这个 CI 任务：
https://github.com/antvis/L7/actions/runs/7217389172

最后从 CI 运行时间上看，由于目前测试用例较少，执行时间约 2min，主要还是安装依赖、构建以及启动 dumi 开发服务器时间较长。

📝 更新日志

语言	更新描述
🇺🇸 英文
🇨🇳 中文

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

---

[xiaoiver]

如果直接截取 <canvas> 区域，高德地图底图每次会有差异。下图为本地环境连续两次运行截图 diff：

CI 环境也是如此，下图为连续两次 CI 截图的 diff：

因此考虑截图前隐藏底图，仅截取 L7 <canvas> 部分