English Version

• 项目简介
• 功能特性
• 演示地址
• 致谢
• 技术架构
• 快速开始
  • 环境要求
  • Docker部署
  • 本地开发部署
• 使用指南
  • 添加巡检用例
  • 配置告警通知
  • 查看巡检结果
• 巡检规则
• 项目结构
• 常见问题
• 贡献指南
• 联系方式
• 许可证

本项目是一个线上UI自动化巡检工具，旨在帮助开发人员和测试人员快速、高效地检测线上Web应用的UI界面是否存在异常。通过自动化巡检，可以及时发现并修复潜在的问题，提升用户体验和产品质量。

该项目利用Playwright自动化测试框架，定期访问配置的网页URL，检查页面是否正常加载，并进行像素级别的页面对比，确保线上页面与基准图片保持一致。

• 🤖 自动化巡检：定时执行巡检任务，无需人工干预
• 🔍 多种检测方式：
  • 页面可用性检测（白屏检测）
  • 页面像素级别对比（视觉回归测试）
  • 页面标题验证
• 📊 实时结果展示：可视化展示巡检结果，包含详细统计数据
• 🚨 即时告警通知：支持钉钉、企业微信、飞书等多种通知方式
• 🖼️ 截图对比：自动保存问题页面截图，便于问题分析
• ⚙️ 灵活配置：支持自定义巡检频率、告警阈值等参数
• 📱 响应式界面：基于Vue3构建的现代化前端界面

• 地址1： https://check.itest.ren/ @zdx0122
• 地址2： https://check.aolifu.org/ @Oliverwqcwrw

欢迎各位开发者提供已部署的项目供大家访问使用，共享巡检资源。

本项目被收录在阮一峰老师的《科技爱好者周刊》第324期：http://www.ruanyifeng.com/blog/2024/11/weekly-issue-324.html

感谢TesterHome社区公众号的帮助推广：https://mp.weixin.qq.com/s/994En7SFl2TqXBuGvA-WQw

感谢所有为项目贡献的开发者和使用者，以及提供演示环境的合作伙伴。

• Docker 20.0+
• Docker Compose 1.29+

• node version >= 20.0.0
• JDK 1.8
• Maven 3.6+
• MySQL 5.7+

1. 克隆项目代码：

git clone https://github.com/TheCoolQATeam/online-inspection-tracker.git
cd online-inspection-tracker

2. 修改配置： 编辑docker/web/default.conf文件，将server_name 127.0.0.1中的127.0.0.1替换为您的服务器IP。

3. 启动服务：

cd docker
docker-compose -f docker-compose-arm64.yml up

4. 访问应用： 启动完成后，在浏览器中访问 http://你的服务器IP:5173/

1. 克隆项目代码：

git clone https://github.com/TheCoolQATeam/online-inspection-tracker.git
cd online-inspection-tracker

2. 初始化数据库：

# 创建数据库
mysql -u root -p -e "CREATE DATABASE online_inspection_tracker;"

# 执行DDL脚本创建表
mysql -u root -p online_inspection_tracker < ../db/ddl.sql

3. 启动后端服务：

cd online-server
# 修改application.yml中的数据库连接配置
mvn spring-boot:run

4. 启动前端服务：

# node版本需要20.0.0以上
cd online-client
npm install
npm run dev

5. 访问应用：

• 后端API：http://127.0.0.1:9091/
• 前端界面：http://127.0.0.1:5173/

1. 在左侧导航栏点击"H5用例"
2. 点击"新增"按钮
3. 填写以下信息：
   • 页面标题：用于标识该巡检用例
   • 巡检URL地址：需要检测的网页地址
   • 业务线：用于分组管理
   • 告警通知配置：配置钉钉/企业微信/飞书机器人key（可选）
4. 点击提交

项目支持三种通知方式：

1. 钉钉机器人：

   • 在钉钉群中添加自定义机器人
   • 获取Webhook地址中的access_token值
   • 在用例配置中填写告警机器人key

2. 企业微信机器人：

   • 在企业微信群中添加机器人
   • 获取Webhook地址中的key值
   • 在用例配置中填写告警机器人key

3. 飞书机器人：

   • 在飞书群中添加Webhook机器人
   • 获取Webhook地址中的token值
   • 在用例配置中填写告警机器人key

1. 巡检记录：

   • 在左侧导航栏点击"巡检记录"
   • 可查看当天所有用例的执行情况

2. 数据看板：

   • 在左侧导航栏点击"数据看板"
   • 可查看历史统计数据和趋势图表

系统默认每5分钟执行一次巡检任务，检测内容包括：

1. 页面可用性检测：

   • 检查页面是否能正常访问
   • 检测是否存在白屏现象

2. 页面像素比对：

   • 对比当前页面与基准图片的相似度
   • 当相似度低于60%时触发告警

3. 用例执行时长统计：

   • 记录每次巡检的响应时间
   • 用于性能监控和趋势分析

.
├── db                    # 数据库脚本
├── docker                # Docker配置文件
├── docs                  # 文档资料
├── online-client         # 前端Vue项目
│   ├── src
│   │   ├── api           # API接口封装
│   │   ├── components    # 公共组件
│   │   ├── views         # 页面视图
│   │   └── ...
│   └── ...
├── online-server         # 后端Spring Boot项目
│   ├── src
│   │   ├── controller    # 控制器层
│   │   ├── service       # 服务层
│   │   ├── mapper        # 数据访问层
│   │   └── ...
│   └── ...
└── ...

开源前考虑过这个问题，卡点主要是在登录信息泄露的安全风险上，所以开源版本未做这个功能。 但可以在内部团队自行实现，自行实现容易考虑好安全风险，更加可控、合规。

自行实现是很简单的，主要原理是playwright支持浏览器上下文进行隔离测试，详情可参考： Issue #3

欢迎各位开发者贡献代码、文档和建议！

1. Fork本项目至你的GitHub仓库
2. 在你的仓库中创建并切换到新的开发分支
3. 进行代码修改、添加文档或提交其他贡献
4. 提交你的更改并推送至你的GitHub仓库
5. 发起Pull Request至本项目的主分支

我们将对提交的Pull Request进行审查和测试，一旦通过，将合并至主分支并发布新版本。

受机器资源限制，demo站点仅能使用少量URL供大家体验，欢迎各位开发者提供已部署的项目供大家访问使用，共享巡检资源。

如有任何疑问、建议或需求，欢迎通过以下方式与我们联系：

• GitHub仓库提交ISSUE
• 邮箱：zdx0122@gmail.com
• 微信号：zdx0122,请备注"开源巡检"
• 微信群交流
  • 添加微信zdx0122拉群（请备注：巡检开源，进群）

本项目采用Apache许可证。在使用本项目时，请遵守相关许可协议。