转转QA 基于无头浏览器的 M 页监控

笑哼 for 转转QA · 2019年05月03日 · 最后由 李晓 回复于 2023年01月08日 · 3618 次阅读

作者 | 胡茜茜

背景介绍

转转目前有大量的 H5 页面。例如通过魔方后台发布的 H5 页面,以及在一些特定场景使用的 H5 页面。但是,单个活动页面少量的数据接口报错无法触发现有的报警系统。当页面出现部分元素 404、样式未加载完全时,监控无法感知。以上问题,如果不及时发现并处理、单纯依靠等待用户上报,极大程度上影响用户体验,甚至造成用户流失。
对于这些页面,人工无法实时且全面监控。基于以上,我们开始使用无头浏览器对 M 页进行实时监控。

技术介绍

项目主要用到的技术有两点:

  • 数据爬取:使用 Requests 库
  • 监控实现:使用 Puppeteer 库启动无头浏览器 Requests 库 本项目基于 Python 语言的 Requests 库进行数据爬取。 Requests 唯一的一个非转基因的 Python HTTP 库, 旨在让 HTTP 服务人类。它是爬虫中常用的 HTTP 库,下图为官网上的一段警告,可见 Requests 库使用的方便。 注册库完成后,可以很快速的完成网络请求。常用的 GET 请求、POST 请求、设置 Headers、获取结果等。下图为实现一次 GET 请求。 无头浏览器和 Puppeteer 库 本项目基于无头浏览器原理,使用 Puppeteer 库实现监控。 无头浏览器是通过命令行方式,启动一个不带 UI 界面的浏览器,虽然没有界面,但是所有的访问操作支持一个都没有少,可以拿到访问的资源及访问过程,还可以方便拿到经过 Javascript 和 CSS 执行过后的 Dom 树结构。 Puppeteer 库是谷歌团队开发的一套操作 Chrome 浏览器的 Nodejs 框架,支持对浏览器的所有操作,支持启动无头浏览器,支持点击界面元素,支持 User-Agent 的模拟,支持 Cookie 传入等等。这样,就能满足我们各类测试和监控场景的要求。 下图展示使用 puppeteer 请求某一链接的过程资源。

项目介绍

实现一次监控步骤:

  • 爬取活动链接、入库
  • 建立定时任务
  • 绑定活动链接
  • 开启任务、触发监控
  • 异常报警

监控类型:

  • 对访问页面时请求的每一个资源返回状态码进行实时监控,当有错误状态码时,触发报警。
  • 对后端返回的数据进行监控,当返回数据状态码错误时,将返回的错误数据取出并报警。
  • 对 Dom 的分析,当标题为空时触发报警。

及时更新与实时监控:

  • 每天定时爬取魔方后台活动,新建对应任务,更新监控数据源。
  • 每五分钟执行一次任务,全天执行。

同时,还可人工新建数据、填写周期。做到指定监控链接,设置特定的监控周期。
下图为整个项目的大致流程图

实现过程

实现过程基于链接为自动爬取或人工存入而做不同的处理。首先对自动爬取的活动链接做介绍,然后在此基础上介绍人工建立的链接。
获取活动数据源:爬取魔方后台
大致步骤为:

  • 请求魔方后台
  • 获取数据
  • 数据筛选
  • 数据提取
  • 入库

请求魔方后台接口:基于爬虫技术,利用 Requests 库,定义 Headers、Cookie 等基本信息,请求魔方后台数据接口。筛选出线上正在使用的活动链接,提取需要数据,将数据入库。至此,获取本次监控数据源就大功告成了。

设置任务
魔方活动的任务设置是在获取数据源成功后自动添加。步骤如下:

  • 清空存放自动爬取链接数据表
  • 获取数据源
  • 自动创建任务
  • 关联活动链接
  • 丰富任务

    • 设置任务开始时间为当前时间
    • 设置结束时间:由于获取数据源为每天更新,设置任务结束时间为 24 小时后
    • 设置任务状态为执行中
    • 写入自动爬取链接任务标识

开始任务,触发监控
本项目会每 5 分钟扫描一次任务表,筛选出可执行并在有效期的任务,执行任务,触发监控。

  • 遍历任务表,从任务表取出任务状态为执行中的任务
  • 去除过期的任务:如果任务结束时间小于当前时间,将任务设置为已过期
  • 获取可开始执行的任务:如果任务开始时间大于当前时间,开始执行任务
  • 得到此次将要执行的任务表 ID 和活动 ID
  • 根据自动爬取标识判断活动位于的数据表
  • 根据活动 ID 取出活动链接,监控页面

监控
项目基于无头浏览器、使用 puppeteer 库进行监控。目前主要使用的监控类型如下:

  • 监控资源请求过程中返回状态码 错误状态码:4XX、5XX
  • 监控请求数据接口返回 服务端异常:responseCode 不为 0

下图展示监控到的一 CSS 资源 404 错误前后对比。

异常发邮件
当监控到异常时,发送邮件。收件人在加入任务时便已设定好。
1.资源请求状态码错误邮件,如下图:

2.数据接口错误邮件,如下图:

人工添加的活动监控

  • 在人工添加的活动表写入链接
  • 在任务表添加任务,写入开始、结束时间,任务标识
  • 根据任务标识从人工添加的活动表取出数据
  • 如需登录,写入 cookies
  • 进行监控

项目发展

本项目实现了对线上 M 的页实时监控,同时还可配合魔方后台进行回归测试。目前已监控到 7 个有效 BUG,
如下:
1.访问资源 404

  • 红包组件 CSS 资源 404
  • 更新秒杀组件 CSS 资源 404
  • 图片资源 404 由于网络不稳定或操作异常导致的资源 404。从监控数据来看,目前 FE 已经完全修复此问题,避免了资源请求不稳定的情况。 2.接口服务端异常 -下游异常,导致上游服务异常
  • 活动配置问题,导致查询数据异常
  • 查询下游服务异常 由于 Server 端实现逻辑错误或异常场景考虑不全面导致的服务端异常,RD 已及时修复。

项目后续发展方向

  • 平台化:后续将本系统对接到任务平台,方便管理、增强交互。
  • 任务系统化:任务创建、定义、启动等统一管理。
  • 报告产出:多次请求异常数据、生成报告;以及整个项目的报告产出。
  • 更多的异常覆盖:增加更多异常监控类型。
共收到 1 条回复 时间 点赞

思路很赞,使用 puppeteer 是执行编辑好的 ui 自动化用例,执行时获取接口返回信息进行判断报错?

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册