如何为Storybook中的Angular及Web组件配置Loki视觉回归测试

其实Loki的核心逻辑是对Storybook页面做截图对比，和组件底层框架无关——不管是React、Angular还是Web Components，只要Storybook能正常运行并访问，就能用Loki做测试。你已经搞定React的配置，Angular和Web Components的配置思路完全一致，只是指定对应的Storybook端口即可，具体步骤如下：

1. 单框架测试配置 #

针对Angular组件（端口6004） #

• 先确保Angular组件的Storybook已启动在6004端口（比如执行yarn storybook:angular这类启动命令）
• 直接运行以下命令执行测试：

  yarn loki test -- --port 6004
  

• 如果需要单独管理Angular的基准图和差异图，可以创建专属配置文件loki.angular.js：

  module.exports = {
    target: 'chrome.app',
    port: 6004,
    referenceDirectory: './.loki/angular-references',
    diffDirectory: './.loki/angular-diffs'
  };
  

  再用命令调用该配置：

  yarn loki test --config loki.angular.js
  

针对Web Components（端口6002） #

• 启动Web Components的Storybook在6002端口
• 执行测试命令：

  yarn loki test -- --port 6002
  

• 同样可以创建loki.web-components.js配置文件隔离基准图目录：

  module.exports = {
    target: 'chrome.app',
    port: 6002,
    referenceDirectory: './.loki/web-components-references',
    diffDirectory: './.loki/web-components-diffs'
  };
  

  运行命令：

  yarn loki test --config loki.web-components.js
  

2. 批量测试脚本优化 #

为了方便执行所有框架的测试，可以在package.json的scripts里添加批量命令：

{
  "scripts": {
    "loki:react": "loki test -- --port 6003",
    "loki:angular": "loki test -- --port 6004",
    "loki:web": "loki test -- --port 6002",
    "loki:all": "yarn loki:react && yarn loki:angular && yarn loki:web"
  }
}

之后只需运行yarn loki:all就能一次性完成三个框架的视觉回归测试。

注意事项 #

• 测试前必须确保对应端口的Storybook已启动并可访问，否则Loki无法抓取页面截图
• Web Components的Shadow DOM不会影响Loki截图，Puppeteer（Loki依赖的浏览器工具）默认支持渲染并截取包含Shadow DOM的内容
• 如果遇到组件渲染不全的问题，可以在Loki配置里增加waitForTimeout参数，给浏览器足够加载时间：

  module.exports = {
    // 其他配置
    waitForTimeout: 3000 // 等待3秒后截图
  };
  

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