lostpixel/lost-pixel

前端整体视觉测试Docker镜像

概述与主要用途

该Docker镜像提供了一套全面的前端视觉测试解决方案，专注于帮助开发团队实现UI组件的自动化视觉测试。通过与主流组件开发工具如Storybook、Ladle等的深度集成，简化视觉测试流程，确保UI在开发迭代过程中的一致性和稳定性。主要用于前端项目的视觉回归测试、UI组件一致性验证及自动化测试流程构建。

核心功能与特性

• 一流工具集成：与Storybook、Ladle等主流组件开发工具无缝集成，支持直接基于现有组件故事（Stories）执行视觉测试，无需额外配置
• 整体视觉测试：提供端到端的视觉测试能力，覆盖UI组件渲染、布局、样式、交互状态等多维度视觉元素检测
• 自动化测试流程：支持配置定时或触发式测试任务，自动执行视觉测试用例，减少人工干预成本
• 视觉差异检测：内置智能图像比对算法，精准识别UI渲染差异，生成可视化差异报告，支持像素级对比与差异标注

使用场景与适用范围

• 组件库开发：对UI组件库进行版本间视觉一致性测试，确保组件在迭代过程中视觉表现稳定
• 大型前端应用：在复杂单页应用（SPA）或多页面应用中，对关键页面、模块或交互组件执行视觉回归测试
• CI/CD流程集成：嵌入持续集成/持续部署管道，在代码提交、合并或构建阶段自动触发视觉测试，提前拦截视觉问题
• 跨团队协作项目：多团队协作开发同一前端项目时，确保各团队交付的UI组件符合统一视觉规范

使用方法与配置说明

基本使用命令

bash
docker run -d \
  -v $(pwd)/frontend-project:/app \
  -p 4000:4000 \
  -e STORYBOOK_URL=http://host.docker.internal:6006 \
  -e TEST_MODE=regression \
  your-image-name:latest

参数说明

Docker Compose配置示例

yaml
version: '3'
services:
  visual-test:
    image: your-image-name:latest
    volumes:
      - ./frontend-project:/app
    ports:
      - "4000:4000"
    environment:
      - STORYBOOK_URL=http://storybook:6006
      - TEST_MODE=regression
      - TEST_PATTERN=src/components/**/*.stories.tsx
    depends_on:
      - storybook

  storybook:
    image: storybookjs/storybook
    volumes:
      - ./frontend-project:/app
    ports:
      - "6006:6006"

测试报告访问

测试执行完成后，可通过 http://localhost:4000 访问可视化测试报告，查看测试结果、视觉差异对比及详细错误信息。报告包含通过/失败用例统计、差异图像标注及历史版本对比功能。