diff --git a/docs/blog/visual-regression.en-US.md b/docs/blog/visual-regression.en-US.md index ce1c31f24e..95ef34715d 100644 --- a/docs/blog/visual-regression.en-US.md +++ b/docs/blog/visual-regression.en-US.md @@ -28,7 +28,7 @@ We built our own visual regression testing solution using jest-puppeteer mention Using GitHub Actions for continuous integration, we automatically capture and upload screenshots to OSS whenever the base branch code changes, ensuring the baseline screenshots stay up-to-date. -For branches requiring visual regression testing, we use [pixelmatch](https://github.com/mapbox/pixelmatch) to compare current screenshots with baseline screenshots. If differences are found, difference screenshots are generated, and the difference report is uploaded to OSS. +For branches requiring visual regression testing, we use [blazediff](https://github.com/teimurjan/blazediff) to compare current screenshots with baseline screenshots. If differences are found, difference screenshots are generated, and the difference report is uploaded to OSS. Further leveraging GitHub Actions, we implement baseline screenshot comparison in PRs. If visual differences are detected, the CI uploads the difference screenshots and report to OSS, displays the visual differences in the PR, and marks it as failed, requiring developers to fix the issues. diff --git a/docs/blog/visual-regression.zh-CN.md b/docs/blog/visual-regression.zh-CN.md index 9b8059a372..2d1bb4b6cb 100644 --- a/docs/blog/visual-regression.zh-CN.md +++ b/docs/blog/visual-regression.zh-CN.md @@ -28,7 +28,7 @@ npm run test:image # 截图将会保存在 imageSnapshots 目录下, 指定组 利用 GitHub Actions 持续集成,可以在每次基准分支的代码变动时,自动截图并上传到 OSS 中,这样就保证了基准截图的实时性。 -对于需要进行视觉回归测试的分支,我们使用 [pixelmatch](https://github.com/mapbox/pixelmatch) 将当前截图与基准截图进行比较,如果有差异,将会生成差异截图,并将差异报告上传到 OSS 中。 +对于需要进行视觉回归测试的分支,我们使用 [blazediff](https://github.com/teimurjan/blazediff) 将当前截图与基准截图进行比较,如果有差异,将会生成差异截图,并将差异报告上传到 OSS 中。 进一步利用 GitHub Actions,实现在 PR 中对比基准截图,如果有视觉差异,CI 会将 PR 中的差异截图和报告上传到 OSS 中,在 PR 中展示视觉差异,同时标记为失败,需要开发者进行修复。 diff --git a/package.json b/package.json index ab70111539..ef09370a0e 100644 --- a/package.json +++ b/package.json @@ -167,6 +167,7 @@ "@antfu/eslint-config": "^5.0.0", "@antv/g6": "^4.8.24", "@biomejs/biome": "^2.2.0", + "@blazediff/core": "^0.7.1", "@codecov/webpack-plugin": "^1.4.0", "@codesandbox/sandpack-react": "^2.19.10", "@dnd-kit/core": "^6.2.0", @@ -209,7 +210,6 @@ "@types/minimist": "^1.2.5", "@types/node": "^24.0.0", "@types/nprogress": "^0.2.3", - "@types/pixelmatch": "^5.2.6", "@types/pngjs": "^6.0.5", "@types/prismjs": "^1.26.4", "@types/progress": "^2.0.7", @@ -285,7 +285,6 @@ "ora": "^8.1.0", "p-all": "^5.0.0", "package-manager-detector": "^1.0.0", - "pixelmatch": "^7.1.0", "pngjs": "^7.0.0", "portfinder": "^1.0.37", "prettier": "^3.4.1", diff --git a/scripts/visual-regression/build.ts b/scripts/visual-regression/build.ts index 0759f49710..e418a416a6 100644 --- a/scripts/visual-regression/build.ts +++ b/scripts/visual-regression/build.ts @@ -8,7 +8,7 @@ import chalk from 'chalk'; import fse from 'fs-extra'; import difference from 'lodash/difference'; import minimist from 'minimist'; -import pixelmatch from 'pixelmatch'; +import blazediff from '@blazediff/core'; import { PNG } from 'pngjs'; import sharp from 'sharp'; import simpleGit from 'simple-git'; @@ -62,7 +62,7 @@ const compareScreenshots = async ( const diffPng = new PNG({ width: targetWidth, height: targetHeight }); - const mismatchedPixels = pixelmatch( + const mismatchedPixels = blazediff( resizedBasePng.data, resizedCurrentPng.data, diffPng.data,