@ blazediff/vitest (英语)

Vitest匹配器,用于用blazediff进行视觉回归测试. 由 @blazediff/ matcher提供.

特征

• 本地维特匹配器数字 : toMatchImageSnapshot() 延长Vitest的预期
• 快照状态跟踪: Vitest报告准确的快照清点(增加/匹配/更新/失败)
• 多重比较算法数字 : core, (中文(简体) ), core-native, (中文(简体) ), ssim, (中文(简体) ), msssim, (中文(简体) ), hitchhikers-ssim, (中文(简体) ), gmsd
• 自动设置: 自动导入和登记
• 更新模式: 工作与维特 -u 旗帜
• 类型脚本支持: 包括完整类型定义

安装

npm install --save-dev @blazediff/vitest

同伴依赖关系(原始内容存档于2018-03-01) (中文(简体) ). Vitest >= 1.0.0

快速启动

import { expect, it } from 'vitest';
import '@blazediff/vitest';

it('should match screenshot', async () => {
  const screenshot = await takeScreenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});

API 参考

到MatchImageSnapshot( 选项 )

图像快照比较的比对器 .

选项

见 @ blazediff/ marcher (英语) 用于完整选项文档.

用法图案

基本快照测试

import { expect, it } from 'vitest';
import '@blazediff/vitest';

it('renders correctly', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});

不同的比较方法

// Fast Rust-native comparison (paths, PNG buffers or raw images)
await expect('/path/to/image.png').toMatchImageSnapshot({
  method: 'core-native',
});

// Pure JavaScript comparison
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'core',
});

// Perceptual similarity (SSIM)
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'ssim',
});

// Gradient-based comparison
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'gmsd',
});

更新快照

# Update all snapshots
vitest -u

# Update snapshots for specific test
vitest -u path/to/test.spec.ts

# Or using environment variable
VITEST_UPDATE_SNAPSHOTS=true vitest

或在方案方面:

await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  updateSnapshots: true,
});

自定义阈值

// Allow up to 100 pixels difference
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  failureThreshold: 100,
  failureThresholdType: 'pixel',
});

// Allow up to 0.1% difference
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  failureThreshold: 0.1,
  failureThresholdType: 'percent',
});

自定义快照目录

await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotsDir: '__image_snapshots__',
});

自定义快照标识符

await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'homepage-desktop-chrome',
});

与剧作家

import { test, expect } from 'vitest';
import '@blazediff/vitest';
import { chromium } from 'playwright';

test('visual regression with Playwright', async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const screenshot = await page.screenshot();
  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });

  await browser.close();
});

否认

// Assert images are different
await expect(screenshot).not.toMatchImageSnapshot({
  method: 'core',
});

序列测试

对于可能相互干扰的测试(如清理快照),使用相继执行:

import { describe, it } from 'vitest';

describe.sequential('Visual regression tests', () => {
  it('test 1', async () => {
    await expect(image1).toMatchImageSnapshot({ method: 'core' });
  });

  it('test 2', async () => {
    await expect(image2).toMatchImageSnapshot({ method: 'core' });
  });
});

快照状态跟踪

这个匹配器与Vitest的快照状态跟踪系统相融合. Vitest将在测试摘要中报告准确的计数:

Snapshots  2 written | 1 updated | 5 passed

匹配者更新了Vitest的内部计数器:

• 写入: 创建了新快照
• 更新: 以 -u 旗帜
• 通过: 现有快照匹配
• 失败: 快照比较失败

设置

自动设置( 建议)

简单地导入测试文件中的软件包 :

import '@blazediff/vitest';

匹配器在导入时自动注册.

手动设置

或者,明确调用设置函数:

import { setupBlazediffMatchers } from '@blazediff/vitest';

setupBlazediffMatchers();

全球设置

为避免在每个测试文件中导入, 请在您的 Vitest 配置中添加 :

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'],
  },
});

// vitest.setup.ts
import '@blazediff/vitest';

类型脚本

包含类型脚本。 要使用 TypeScript 的匹配器 :

import '@blazediff/vitest';

declare module 'vitest' {
  interface Assertion<T = any> {
    toMatchImageSnapshot(options?: Partial<import('@blazediff/matcher').MatcherOptions>): Promise<void>;
  }
}

在导入软件包时自动包含类型增强.

链接

• GitHub 仓库
• 文档
• 国家防范机制一揽子计划
• @ blazediff/ marcher (英语) - 核心匹配者逻辑