文章目录
H5巡检工具必要性
你是否也遇到过,H5突然·白屏
,无法加载的情况?
遇到上述问题,有众多原因:
- 人为操作不当: 配置文件错误、 代码错误等
- 依赖服务异常机房线路问题:阿里云崩了、腾讯云崩了等
- 机器原因:降配、磁盘不足等导致
- Nginx 负载问题
- cdn 原因。。。
以上很多因素都是不可控的,从质量保障角度来说,对H5页面得可用性监控是非常必要的!!此篇介绍的就是团队正在用的一个开源工具,online-inspection-tracker
代码
整体架构
整体使用Testng
+ Playwright
+ SpringBoot
+ Vue
+ Ant-Design
搭建自动化巡检系统,有以下优势:
- 轻量:基于 SpringBoot 和 VUE,使用前后端开发模式,便于把测试用例、数据报告等进行落库和前端展示,非常轻量,易于搭建
- 快速:基于 Playwright,使用 Playwright 请求页面、截取页面元素、页面截图、性能分析、网络请求资源分析等,非常高效快速
- 稳定:基于 Testng,使用 Testng 的断言、参数化、Listener 监听、失败重试、数据报告等功能,易于上手
Demo 试用,一看便知
demo 地址:自动化巡检系统
两种告警
信息
- 一种是主要元素断言失败的报警
提醒:线上巡检有报警!
测试描述:遍历页面可用状态测试类和方法:AutoCheckHtml.testHtmlServiceability(int, java.lang.String, java.lang.String, java.lang.String, java.lang.String, java.lang.String, java.lang.String)[pri:0, instance:com.onlines.onlineSaleTest.AutoCheckHtml@3d5a813c]测试用例:156;线上自动化巡检系统;https://check.itest.ren;
- 一种是视觉回归/图片对比失败的报警
提醒:线上巡检有报警!
测试描述线上自动化巡检系统图片像素对比异常url地址:https://check.itest.ren
图片异常地址 https://xxxxxx.com/faf28987e446835a576383a78a208911.png
技术细节
1 、页面主要元素检测
请求页面后,对页面进行截图,检测页面的 title 是否正常,正常则代表页面 HTML 已进行渲染,否则代表页面 HTML 未渲染,页面无法正常访问。
java
@Test(description = "遍历页面可用状态", dataProvider = "HtmlData")public void testHtmlServiceability(int id, String htmlinfo, String title, String url, String dingKey, String wechatKey, String feishuKey) throws FileNotFoundException, UnknownHostException {
// 访问页面
page.navigate(url);
long currentTimeMillis = System.currentTimeMillis();
String userDir = System.getProperty("user.dir");
String titleCleanInvalid = StrUtil.replace(StrUtil.replace(FileNameUtil.cleanInvalid(title), " ", "_"), "\t", "");
String imageName = titleCleanInvalid.concat("_").concat(Long.toString(currentTimeMillis));
logger.info("基准值地址"+imageName);
String imagePath = userDir.concat(File.separator).concat("online-images").concat(File.separator).concat(imageName).concat(".png");
page.waitForLoadState(LoadState.NETWORKIDLE); // 资源下载完毕
page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get(imagePath)));
// 标题比对
Assert.assertEquals(page.title(), title);}
测试用例利用 TestNg 参数化功能从数据库中进行获取和转化为参数化类型,实现数据驱动;使用 mybatis 从数据库取数据
java
@DataProviderpublic Object[][] HtmlData() {
List<OnlinesPatrol> onlinesPatrols = onlinesPatrolMapper.selectDate();
if (onlinesPatrols == null) {
return null;
}
Object[][] pageData = new Object[onlinesPatrols.size()][7];
for (int i = 0; i < onlinesPatrols.size(); i++) {
OnlinesPatrol onlinesPatrol = onlinesPatrols.get(i);
pageData[i][0] = onlinesPatrol.getId();
pageData[i][1] = onlinesPatrol.getHtmlinfo();
pageData[i][2] = onlinesPatrol.getTitle();
pageData[i][3] = onlinesPatrol.getUrl();
pageData[i][4] = onlinesPatrol.getDingKey();
pageData[i][5] = onlinesPatrol.getWechatKey();
pageData[i][6] = onlinesPatrol.getFeishuKey();
}
return pageData;}
2、视觉回归
首先,把第一次请求的页面截图作为基准值,然后,后续的每次请求的页面截图与基准值进行对比,如果存在差异,则代表页面有异常,异常则会发送钉钉、企微、飞书等报警,需要及时处理。图片对比的阈值设置为 60%,
即如果两张图片的相似度低于 60%,则认为两张图片有差异,代表页面有异常。
实际使用中,经过大量测试,可以确定该阈值可以满足需求。
java
OnlinesPatrol onlinesPatrol = onlinesPatrolMapper.selectByPrimaryKey(id);if (onlinesPatrol != null) { // 若无基准值
if (onlinesPatrol.getDatumAddress() == null) {
onlinesPatrol.setDatumAddress(imageName);
onlinesPatrol.setDatumCreatetime(new Date());
onlinesPatrolMapper.updateByPrimaryKey(onlinesPatrol);
} else {
String pic1 = imagePath; // 本次图片
logger.info("图片1的地址"+pic1);
// 基准值图片
String pic2 = userDir.concat(File.separator).concat("online-images").concat(File.separator).concat(onlinesPatrol.getDatumAddress()).concat(".png");//线上运行获取图片地址
logger.info("图片2的地址"+pic2);
String result = null;
try {
result = imageComp.compareImage(pic2, pic1);
} catch (MalformedURLException e) {
e.printStackTrace();
}
int xiangsi = Integer.parseInt(result);
if (xiangsi > 60) {
Assert.assertTrue(true);
logger.info("图片对比相似率大于60:" + xiangsi);
} else {
String ip = InetAddress.getLocalHost().getHostAddress();
logger.info("服务器IP地址:" + ip);
String picUrl = "http://" + ip + ":9091/patrol/onlines/images?imageName=" + imageName;
DingUtil.sendMsgPic(url, id, picUrl, title, dingKey);
WechatUtil.sendMsgPic(url, id, picUrl, title, wechatKey);
FeishuUtil.sendMsgPic(url, id, picUrl, title, feishuKey);
logger.info("图片对比相似率小于60:" + xiangsi);
}
}
3、性能分析
性能分析有两块,一块是计算测试用例的执行时间,另一块是通过 playwright 执行 js 脚本window.performance.timing
计算页面加载时间
java
// 获取性能数据Object performanceResult = page.evaluate("() => {\n" +
"const timing = window.performance.timing; \n" +
"return JSON.stringify(timing.toJSON()); \n" +
"}");
4、网络请求资源分析
playwright 的onRequest方法可以监听到所有的请求,通过判断请求的 url 等信息是否是正常请求,如果不是正常请求,则发送报警。
java
noLoginPage.onRequest((request) -> {
try {
getTestUrl(idForEnv, request.url());
} catch (Exception e) {
e.printStackTrace();
}});
5、定时巡检
定时功能有很多方案,本次开源项目使用ScheduledExecutorService
,较为轻量设置定时执行间隔为 5 分钟
进行巡检一次,每天会巡检 288
次。
开源
项目开源地址:https://github.com/TheCoolQATeam/online-inspection-tracker
最后,欢迎一起迭代维护,记得 star
~