3分钟快速上手Visual-Regression-Tracker：从安装到首次图像对比

3分钟快速上手Visual-Regression-Tracker从安装到首次图像对比【免费下载链接】Visual-Regression-TrackerBackend and Frontend application for tracking differences via image comparison项目地址: https://gitcode.com/gh_mirrors/vi/Visual-Regression-TrackerVisual-Regression-Tracker是一款通过图像对比跟踪差异的前后端应用能帮助开发者快速发现UI变化保障界面一致性。本文将带你在3分钟内完成从安装到首次图像对比的全过程轻松掌握这款强大的视觉回归测试工具。1. 一键安装Visual-Regression-Tracker安装Visual-Regression-Tracker非常简单只需执行项目根目录下的安装脚本即可。确保你的系统已安装Docker和Docker Compose若未安装可参考官方文档进行安装。在终端中运行以下命令# 克隆仓库 git clone https://gitcode.com/gh_mirrors/vi/Visual-Regression-Tracker cd Visual-Regression-Tracker # 执行安装脚本 ./vrt-install.sh安装脚本会自动下载所需的Docker配置文件docker-compose.yml和环境变量文件.env并根据你的配置启动服务。默认情况下前端服务将运行在 http://localhost:8080后端API服务运行在 http://localhost:4200。2. 启动Visual-Regression-Tracker服务安装完成后Docker Compose会自动启动所有必要的服务包括前端UI、后端API、PostgreSQL数据库等。你可以在终端中看到服务启动的日志输出。服务启动后打开浏览器访问 http://localhost:8080即可看到Visual-Regression-Tracker的主界面。3. 首次运行图像对比测试Visual-Regression-Tracker支持多种测试框架如Cypress、Selenium等。下面以Cypress为例展示如何进行首次图像对比测试。3.1 配置测试环境在你的Cypress测试项目中安装Visual-Regression-Tracker的Cypress插件npm install visual-regression-tracker3.2 编写测试用例创建一个新的测试文件例如cypress/integration/example.spec.js并添加以下测试代码import { VisualRegressionTracker } from visual-regression-tracker; describe(Visual Regression Tracker Example, () { it(Whole page example, () { cy.visit(https://example.cypress.io/commands/viewport); cy.screenshot(whole-page-example); }); });3.3 运行测试用例在终端中运行Cypress测试npx cypress run首次运行测试时由于没有基线图像测试会失败并提示“无基线图像”。3.4 查看测试结果并设置基线打开Visual-Regression-Tracker的Web界面你可以看到刚刚运行的测试结果。点击“APPROVE”按钮将当前图像设置为基线图像。3.5 再次运行测试修改测试页面的内容然后再次运行测试。这次测试会将新的截图与基线图像进行对比并显示差异。如果差异在可接受范围内你可以再次点击“APPROVE”按钮更新基线图像如果差异不可接受则需要检查UI变化并修复问题。4. 测试成功的标志当测试通过时Cypress的测试结果会显示绿色的对勾Visual-Regression-Tracker的Web界面也会显示测试通过的状态。至此你已经完成了Visual-Regression-Tracker的安装和首次图像对比测试。通过这款工具你可以轻松跟踪UI的变化确保前端代码的修改不会引入意外的视觉差异。希望本文能帮助你快速上手Visual-Regression-Tracker如果你想了解更多高级功能可以查阅项目的官方文档或源码。【免费下载链接】Visual-Regression-TrackerBackend and Frontend application for tracking differences via image comparison项目地址: https://gitcode.com/gh_mirrors/vi/Visual-Regression-Tracker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考