【免费下载】 Loki项目配置详解：从基础到高级用法

Loki项目配置详解：从基础到高级用法

【免费下载链接】loki 👁 Visual Regression Testing for Storybook 项目地址: https://gitcode.com/gh_mirrors/loki/loki

什么是Loki配置

Loki是一个视觉回归测试工具，它通过比较组件在不同环境下的截图来确保UI一致性。配置是Loki的核心部分，它决定了测试的运行方式、目标平台以及各种比较参数。本文将全面解析Loki的配置系统，帮助你高效使用这个强大的工具。

基础配置方式

Loki支持多种配置方式，最常见的是在项目的package.json中添加loki字段：

{
  "loki": {
    "chromeSelector": "#app-container",
    "configurations": {
      "desktop": {
        "target": "chrome.app",
        "width": 1920,
        "height": 1080
      }
    }
  }
}

除了package.json，你还可以使用以下独立配置文件：

• .lokirc
• .lokirc.json
• loki.config.js

独立配置文件特别适合大型项目或需要复杂配置的场景。

核心配置参数详解

chromeSelector：精准截图选择器

chromeSelector允许你指定页面中需要截图的部分。这个CSS选择器不是截取DOM元素本身，而是根据元素的边界框来裁剪截图。这意味着：

• 绝对定位在目标区域上方的元素也会被包含
• 适合去除装饰性元素，保留核心组件
• 示例：#app-container > .main-content

图像差异比较引擎

Loki提供三种图像比较引擎，各有特点：

1. pixelmatch（默认）

   • 纯JavaScript实现，无需额外依赖
   • 对大尺寸图像变化更敏感
   • 抗锯齿干扰较小

2. GraphicsMagick (gm)

   • 需要安装GraphicsMagick库
   • 速度最快
   • 差异计算基于整张图片

3. looks-same

   • 纯JavaScript实现
   • 速度较慢
   • 差异计算基于相邻像素，适合不同像素密度的比较

配置示例：

{
  "loki": {
    "looks-same": {
      "tolerance": 5,
      "ignoreCaret": true
    }
  }
}

测试过滤机制

Loki提供了灵活的测试过滤选项：

• storiesFilter：正则表达式，只测试匹配的story
• skipStories（已废弃）：改用storybook原生的.add.skip()方法
• fetchFailIgnore：忽略特定失败网络请求的正则表达式

文件名格式化

通过fileNameFormatter可以自定义截图文件的命名方式和存储结构：

// loki.config.js
module.exports = {
  fileNameFormatter: ({ configurationName, kind, story }) => 
    `${configurationName}/${kind.replace(/\s+/g, '-')}/${story.toLowerCase()}`
};

目标平台配置

Loki支持多种测试环境，通过configurations字段配置：

Chrome系列配置

参数	说明	示例值
target	目标平台类型	chrome.app/chrome.docker/chrome.aws-lambda
preset	预设设备配置	iPhone 7/Retina Macbook Pro 15
width	视口宽度	1366
height	视口高度	768
deviceScaleFactor	像素密度	2（Retina）
mobile	是否模拟移动设备	true/false

移动设备原生模拟

• iOS模拟器：target: "ios.simulator"
• Android模拟器：target: "android.emulator"

高级配置技巧

1. 媒体查询模拟：通过media参数模拟不同的CSS媒体条件
2. 特性模拟：使用features数组模拟特定设备特性
3. 差异模式：设置diffOnly: true只更新失败的测试截图
4. 视口高度控制：disableAutomaticViewportHeight可禁止自动调整高度

最佳实践建议

1. 为不同团队环境创建独立配置：

   "configurations": {
     "designer": {
       "target": "chrome.app",
       "preset": "Retina Macbook Pro 15"
     },
     "ci": {
       "target": "chrome.docker",
       "width": 1280,
       "height": 720
     }
   }
   

2. 结合Storybook参数实现条件测试：

   // 在story文件中
   storiesOf('Button').add('Primary', () => <Button primary />, {
     loki: { skip: true }  // 跳过这个story的测试
   });
   

3. 大型项目推荐使用loki.config.js，便于管理复杂配置和自定义函数。

通过合理配置Loki，你可以构建出适合项目需求的视觉回归测试体系，在保证UI一致性的同时提高开发效率。

【免费下载链接】loki 👁 Visual Regression Testing for Storybook 项目地址: https://gitcode.com/gh_mirrors/loki/loki