基于Testng + Playwright的H5自动化巡检工具

文章目录

- H5巡检工具必要性
- 代码
- 整体架构
- Demo 试用，一看便知
- 技术细节
- - 1 、页面主要元素检测
  - 2、视觉回归
  - 3、性能分析
  - 4、网络请求资源分析
  - 5、定时巡检
- 开源

H5巡检工具必要性

你是否也遇到过，H5突然·白屏，无法加载的情况？
遇到上述问题，有众多原因：

人为操作不当：配置文件错误、代码错误等
依赖服务异常机房线路问题：阿里云崩了、腾讯云崩了等
机器原因：降配、磁盘不足等导致
Nginx 负载问题
cdn 原因。。。

以上很多因素都是不可控的，从质量保障角度来说，对H5页面得可用性监控是非常必要的！！此篇介绍的就是团队正在用的一个开源工具，online-inspection-tracker

代码

github仓库，点此前往

整体架构

整体使用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 未渲染，页面无法正常访问。

@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 从数据库取数据

@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%，则认为两张图片有差异，代表页面有异常。
实际使用中，经过大量测试，可以确定该阈值可以满足需求。

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计算页面加载时间

// 获取性能数据Object performanceResult = page.evaluate("() => {\n" +"const timing = window.performance.timing; \n" +"return  JSON.stringify(timing.toJSON()); \n" +"}");

4、网络请求资源分析

playwright 的onRequest方法可以监听到所有的请求，通过判断请求的 url 等信息是否是正常请求，如果不是正常请求，则发送报警。

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~