BackstopJS是否可使用png或svg文件作为referenceUrl？

完全可以使用PNG格式的图片作为视觉回归测试的参考基准，不需要依赖referenceUrl指定在线页面地址。

配置步骤 #

• 第一步：将从Figma提取好的目标视图PNG文件保存到本地，优先存放在BackstopJS项目的backstop_data/bitmaps_reference目录下，方便统一管理
• 第二步：修改backstop.json（或JS格式的配置文件）中的场景配置，删除不需要的referenceUrl字段，新增referenceImage字段指向你的PNG文件路径，参考配置示例：

{
  "id": "visual_test",
  "viewports": [
    {
      "name": "desktop",
      "width": 1920,
      "height": 1080
    }
  ],
  "scenarios": [
    {
      "label": "商品详情页_桌面端",
      "url": "你的测试页面访问地址",
      "referenceImage": "./backstop_data/bitmaps_reference/product_detail_ref.png",
      "delay": 1000
    }
  ]
}

注意事项 #

• 参考PNG的宽高尺寸需要和对应测试场景指定的视口尺寸完全一致，否则会触发不必要的尺寸不匹配报错
• 可以调整misMatchThreshold参数设置允许的像素误差阈值，适配Figma导出图和浏览器实际渲染效果的微小差异
• 如果你有多个PNG参考图，只需要按场景分别配置对应的referenceImage路径即可，不需要其他额外适配

内容的提问来源于stack exchange，提问作者Jwilly