Lost Pixel：开源的视觉回归测试工具

最新推荐文章于 2024-09-15 07:57:48 发布

赵鹰伟Meadow

最新推荐文章于 2024-09-15 07:57:48 发布

阅读量560

点赞数 12

本文链接：https://blog.csdn.net/gitblog_00017/article/details/142272340

版权

Lost Pixel：开源的视觉回归测试工具

lost-pixel Holistic visual testing for your Frontend 🖼 First class integration with Storybook, Ladle, Playwright & other frontend libraries. 项目地址: https://gitcode.com/gh_mirrors/lo/lost-pixel

项目介绍

Lost Pixel 是一个开源的视觉回归测试工具，旨在为开发者提供一个简单、高效的解决方案，用于在 Storybook、Ladle 和 Histoire 等前端组件库中进行视觉回归测试。无论是现代前端应用如 Next.js、Gatsby 还是 Remix，Lost Pixel 都能帮助你确保应用的视觉一致性。

项目技术分析

Lost Pixel 的核心是一个强大的视觉回归测试引擎，支持多种浏览器（如 Chrome、Firefox、Safari）和不同的视口尺寸。它不仅支持 Storybook 和 Ladle 等组件库的集成，还能直接对应用页面进行测试。此外，Lost Pixel 还提供了灵活的阈值设置、测试重试机制以及 UI 元素的遮罩功能，确保测试的准确性和稳定性。

项目及技术应用场景

Lost Pixel 适用于以下场景：

前端组件库测试：无论是 Storybook、Ladle 还是 Histoire，Lost Pixel 都能轻松集成，确保组件的视觉一致性。
现代前端应用测试：对于使用 Next.js、Gatsby 或 Remix 等框架构建的应用，Lost Pixel 可以对应用页面进行视觉回归测试，确保每次更新都不会引入视觉问题。
自定义测试集成：如果你使用 Cypress 或 Playwright 进行测试，Lost Pixel 支持自定义截图，方便你将视觉回归测试集成到现有的测试流程中。

项目特点

开源免费：Lost Pixel 是一个完全开源的项目，你可以自由使用并根据需要进行定制。
多浏览器支持：支持 Chrome、Firefox 和 Safari 等多种浏览器，确保跨浏览器的一致性。
响应式测试：支持不同视口尺寸的测试，确保应用在不同设备上的显示效果。
灵活的阈值设置：允许开发者根据需求调整视觉差异的敏感度，避免误报。
测试重试机制：自动重试失败的测试，减少因网络波动或临时问题导致的误报。
UI 元素遮罩：可以遮罩不需要测试的 UI 元素，确保测试的准确性。
集成平台：Lost Pixel 还提供了一个托管平台，支持团队协作、测试结果的审核和批准流程，适合企业级应用。

快速开始

Storybook 集成

假设你正在使用 Storybook 的基本示例，以下设置将在每次推送时对所有 Storybook 故事运行视觉回归测试。

首先，在项目根目录下添加 lostpixel.config.ts 文件：

import { CustomProjectConfig } from 'lost-pixel';

export const config: CustomProjectConfig = {
  storybookShots: {
    storybookUrl: './storybook-static',
  },
  // OSS 模式
  generateOnly: true,
  failOnDifference: true,
  
  // Lost Pixel 平台模式（如需使用平台模式，请注释掉 OSS 模式并取消注释此部分）
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

然后，添加 GitHub Action 配置文件 .github/workflows/lost-pixel-run.yml：

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build Storybook
        run: npm run build-storybook

      - name: Run Lost Pixel
        run: npx lost-pixel

通过以上步骤，你就可以在每次代码推送时自动运行视觉回归测试，确保应用的视觉一致性。