开源测试工具 埋点自动化测试工具

少年 · 2019年11月01日 · 最后由 烂漫一枝花 回复于 2021年02月24日 · 3883 次阅读

埋点自动化测试 Demo 展示

maidianDemoTest 是基于 nodejs 以及 puppeteer 开发的一个埋点自动化测试框架,可以在框架原有的基础上适配公司业务进行埋点测试。框架通过 Demo 展示如何对常见的 webclick 事件以及一些需要复杂操作触发的自定义类型的事件进行监听和校验。我们可以对已有的埋点进行回归测试,也可以对新迭代的埋点进行触发测试,你只需要做的是填好 excel 的表格,并根据 Demo 示例适配自己的业务。

Github 源代码: https://github.com/ShaoNianyr/maidianDemoTest.git (欢迎来 Star ~)

方案设计

通过读取 excel 表中的埋点数据,借助 puppeteer 去触发埋点和监听埋点上报的信息,最后取出关键字段进行校验和统计,并将成功和错误的信息打印在不同的日志中方便查看和 debug 。框架的文件结构如下:

├── demo.js     // 脚本启动文件
├── eventCheck
│   └── eventCheck.js  // 适配业务埋点的触发及校验的封装
├── excel
│   └── getExcel.js    // 通用的读取 excel 数据的封装
├── logs
│   ├── logs
│   │   ├── debuglog  // 错误信息日志
│   │   └── infolog   // 成功信息日志
│   └── logUtils.js      // 通用的记录 log 数据的封装
├── package.json         // npm 依赖包
├── picture              // README 文档截图
├── README.md
├── selector.xlsx        // 统计埋点数据的 excel 表
└── test
    ├── testExcel.js     // 自测通用读取 excel 数据封装的功能
    └── testLog.js       // 自测通用记录 log 数据封装的功能

校验错误类型

1. 埋点没有上报
2. 埋点重复上报
3. 埋点上报信息不正确
4. puppeteer 执行错误或 excel 填写错误数据等其他信息
...

快速体验

// 首先要准备好 nodejs && npm 环境
git clone https://github.com/ShaoNianyr/maidianDemoTest.git
cd maidianDemoTest
npm install // 最好用 cnpm ( 安装 puppeteer 的时候如果卡住并用 ctrl c 取消,下次安装会默认跳过,请先卸载以后再重新安装 )
node demo.js 

一切正常的话,你可以看到:

ConsoleMessage {
  _type: 'log',
  _text:
   '{ "properties": { "$element_name": "name1", "$title": "page1" }}',
  _args:
   [ JSHandle {
       _context: [ExecutionContext],
       _client: [CDPSession],
       _remoteObject: [Object],
       _disposed: false } ],
  _location:
   { url: '__puppeteer_evaluation_script__',
     lineNumber: 0,
     columnNumber: 15 } }
ConsoleMessage {
  _type: 'log',
  _text:
   '{ "properties": { "$element_name": "name1", "$title": "page1" }}',
  _args:
   [ JSHandle {
       _context: [ExecutionContext],
       _client: [CDPSession],
       _remoteObject: [Object],
       _disposed: false } ],
  _location:
   { url: '__puppeteer_evaluation_script__',
     lineNumber: 0,
     columnNumber: 15 } }

[2019-11-08T11:18:46.938] [ERROR] datelogFail - hadOpenUrl: 1 hadClick: 1 hadSent: 1 nonRepeatReport: 0 hadNameTrue: 1  
[2019-11-08T11:18:46.940] [ERROR] datelogFail - Webclick 埋点 1 页面: page1
[2019-11-08T11:18:46.940] [ERROR] datelogFail - Webclick 埋点 1 name1 事件重复上报

ConsoleMessage {
  _type: 'log',
  _text: '{ "properties": { "login_position": "location2" }}',
  _args:
   [ JSHandle {
       _context: [ExecutionContext],
       _client: [CDPSession],
       _remoteObject: [Object],
       _disposed: false } ],
  _location:
   { url: '__puppeteer_evaluation_script__',
     lineNumber: 0,
     columnNumber: 15 } }

[2019-11-08T11:18:47.043] [ERROR] datelogFail - hadSent: 1 nonRepeatReport: 1 hadLocationTrue: 0
[2019-11-08T11:18:47.043] [ERROR] datelogFail - Login 埋点 1 当前登录位置为 【 location2 】 预期登录位置为 【 location1 】 断言失败
[2019-11-08T11:18:47.044] [INFO] datelogSuc - 埋点总数: 2
[2019-11-08T11:18:47.044] [INFO] datelogSuc - 埋点正确个数: 0
[2019-11-08T11:18:47.044] [ERROR] datelogFail - 埋点错误个数: 2
[2019-11-08T11:18:47.045] [ERROR] datelogFail - 错误埋点分别为: [ 'Webclick 埋点1 name1', 'Login 埋点1 location1' ]

这里展现了埋点的两种错误,一种是 webclick 类型的埋点重复上报,另外一种是自定义类型的埋点上报的登录位置与 excel 表格当中的不匹配。

更多体验

在 ./eventCheck/eventCheck.js 的 demo 示例代码中,可以自行选择类型体验:
(demo 中演示的是新增的埋点重复上报校验的功能)

//正常上报自测代码
// await page.evaluate(() => console.log('{ "properties": { "$element_name": "name1", "$title": "page1" }}'));

//无上报自测代码
// await page.evaluate(() => console.log(''));

//重复上报自测代码
await page.evaluate(() => console.log('{ "properties": { "$element_name": "name1", "$title": "page1" }}'));
await page.evaluate(() => console.log('{ "properties": { "$element_name": "name1", "$title": "page1" }}'));


//过滤无用的事件上报自测代码
// await page.evaluate(() => console.log('{ "properties": { "$element_name": "name1", "$title": "page1" }}'));
// await page.evaluate(() => console.log('???'));

原理讲解

提取的 excel 表数据

cd test && node testExcel.js

然后我们可以看到:

[ [ { key: 1,
      url: 'https://yourUrl.com',
      selector: 'elementSelectorPath',
      element_name: 'name1' } ],
  [ { key: 1,
      url: 'https://yourUrl.com/login?xxx',
      telInput: 'telInputSelectorPath',
      getCode: 'getCodeSelectorPath',
      submit: 'submitSelectorPath',
      loginPosition: 'location1' } ] ]

list[0] 对应 sheet1 的 webclick 事件,list[1] 对应 sheet2 的 login 事件。自己新增的 sheet 可以在 ./excel/getExcel.js 里面加 if 来新增。

普通的 webclick 事件

普通的 webclick 事件被填写在 excel 表的 sheet1 中,读取后构造的数据如下:

{ key: 1,
  url: 'https://yourUrl.com',
  selector: 'elementSelectorPath',
  element_name: 'name1' }

因为 webclick 事件只需要埋点的 url 位置,以及要点击事件的 selector 定位,点击以后监听事件即可。

自定义的 login 事件

自定义的 login 事件被填写在 excel 表的 sheet2 中,读取后构造的数据如下:

{ key: 1,
  url: 'https://yourUrl.com/login?xxx',
  telInput: 'telInputSelectorPath',
  getCode: 'getCodeSelectorPath',
  submit: 'submitSelectorPath',
  loginPosition: 'location1' }

因为 login 事件需要输入用户名密码,或者手机号验证码等等,还要点击登陆,只需要在新的 sheet 里面加,然后给 puppeteer 去模拟操作即可。

如何监听埋点上报事件

page.on('console', msg = {
    ...
});

hadSent 字段代表事件是否有上报, hadNameTrue 字段代表校验是否通过。由于 Demo 中并未以真实网站作为例子,所以涉及 puppeteer 的所有动作操作均以注释,通过用 page.evaluate() 来模拟上报一个事件,并打印在控制台当中作为监听对象,相关代码如下:

// 实际业务代码 (使用 puppeteer 去点击元素从而触发埋点)
// await page.waitForSelector(sheet[i][j].selector);
// await page.click(sheet[i][j].selector);

// demo 演示代码 (直接使用 puppeteer 伪造一个事件的上报)
await page.evaluate(() => console.log('{ "pageLocation": "location2", "elementName": "name2" }'));    

实际使用过程中应该参考实际业务代码的部分来触发元素的埋点上报,demo 演示代码仅做功能展示。

PS:技术交流 QQ 群 552643038

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 10 条回复 时间 点赞

nodejs 的不多见啊,点个赞,回头看看。

陈子昂 回复

嗯,puppeteer 就是 nodejs 版的 selenium,但是包装了 chromeDevTools 的很多功能在里面。

少年 #11 · 2019年11月08日 Author

重构并优化了一下代码,新增了不少 demo 体验演示和 debug 信息,也支持过滤无用上报事件和重复事件上报的检测 ~

少年 埋点自动化测试工具 Pro 中提及了此贴 11月19日 16:00
少年 埋点自动化测试工具 Pro 中提及了此贴 11月19日 16:12
6楼 已删除

你的项目埋点上报会打出 consolelog 吗?

匿名 #8 · 2020年03月09日
少年 回复

上面的图就是开发帮忙加的 consolelog,没有 url,也没有 selector 我根本定位不了呀

url 和 selector 要自己在页面里面找,console 里面不需要有, console 里面只要有埋点名称就行。

匿名 #4 · 2020年03月09日
少年 回复

selectname 也没有

少年 #11 · 2020年03月09日 Author

你只要让开发加个 name 属性进来,作为埋点预期值就够了。

匿名 #12 · 2020年04月11日

验证同一个页面的多个埋点,action.js 应该怎么写呢

👏 学习一下

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