📅 2026-06-11 · 快照API技术博客

前端视觉回归测试入门指南

前端改了CSS，结果某个页面布局崩了，上线后才发现？视觉回归测试（Visual Regression Testing）让你的CI/CD流程在每次部署时自动对比页面截图，第一时间发现UI bug。

什么是视觉回归测试？

简单说就是：部署前截一张"基准图"，部署后截一张"当前图"，像素级对比两张图。如果差异超过阈值，说明UI发生了变化——可能是bug，需要人工确认。

CI/CD 集成方案

github-actions.yml

name: Visual Regression Test
on: [pull_request]

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - name: Take screenshots
        run: |
          python scripts/visual_regression.py
        env:
          SNAPAPI_KEY: ${{ secrets.SNAPAPI_KEY }}

Python 对比脚本

visual_regression.py

import requests
from PIL import Image
import imagehash

API_KEY = "sk_your_key"
PAGES = ["/", "/pricing", "/login", "/dashboard"]
BASE = "http://8.222.180.187:8000/api/v1/screenshot"

for path in PAGES:
    r = requests.get(BASE, params={
        "url": f"https://your-site.com{path}",
        "width": 1440, "height": 900
    }, headers={"x-api-key": API_KEY})

    # 下载新截图
    img = Image.open(requests.get(
        r.json()["download_url"], stream=True
    ).raw)

    # 计算感知哈希
    new_hash = imagehash.phash(img)

    # 对比基准
    baseline = imagehash.hex_to_hash(open(f"baselines/{path}.hash").read())
    if new_hash - baseline > 5:
        print(f"⚠️ {path} 视觉差异过大，请检查！")
    else:
        print(f"✅ {path} 通过")

关键配置项

测试页面列表：首页、定价页、登录页、核心功能页
视口尺寸：桌面端1440px + 移动端375px，双端覆盖
等待加载：设置delay参数等JS渲染完成再截图
差异阈值：感知哈希阈值5-10，避免字体渲染微小差异误报

准备好开始了吗？

每月100次免费截图，无需信用卡

免费注册 →