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

少年 · November 19, 2019 · Last by 少年 replied at March 30, 2020 · 2589 hits

埋点自动化测试 Pro

Buried-Point-Pro 开源代码: github Buried-Point-Pro 【 欢迎来 Star !】

Buried-Point-Pro,基于 nodejs 和 puppeteer 开发的埋点自动化测试框架,对外暴露 puppeteerScripts 的脚本文件夹,可以放置所有写好或录制好的 puppeteer 的业务流程脚本,并自动遍历执行所有脚本,监听并记录所有脚本流程的埋点信息。

框架仅输出每个流程的所有埋点信息的 excel 表,每个脚本分不同的 sheet 记录,以及根据点击元素的 name 属性和该元素上报的事件名字进行对比校验。对埋点的校验方式支持二次扩展开发。

更多详情见下方项目原理图。

项目原理(我觉得还是看图吧!)

项目原理图高清链接

快速体验

// 首先要准备好 nodejs && npm 环境
git clone https://github.com/ShaoNianyr/Buried-Point-Pro.git
cd Buried-Point-Pro
npm install // 最好用 cnpm
node test.js

实际使用

  • 通过第三方工具 puppeteer-recorder 一键录制复杂的脚本 / 手写 puppeteer 脚本 放到 puppeteerScripts 文件夹下

  • 注释掉 test.js 中的 " // demo 演示代码... "下的代码,启用 " // 实际业务代码... "下的代码

  • node test.js

为什么要做埋点 Pro

maidianDemoTest 在投入使用的过程中发现,只能对静态页面的埋点进行检测,动态页面需要根据业务逻辑手动去写代码并新增 excel 来设计,非常的麻烦,尤其是当业务流程很复杂又很多的时候,一样显得非常麻烦。在这样的一种前提下,重写了整个项目,由此而来的就是 Buried-Point-Pro.

Buried-Point-Pro 换了另外一种方式来执行埋点的脚本,可以通过第三方工具 puppeteer-recorder 一键录制复杂的脚本,无需手动 copy selector 定位和写大量重复的 click 语句,脚本运行的时候,会遍历 puppeteerScripts 文件夹下所有的执行脚本,并记录过程中的上报埋点,并将这一系列的流程保存到单独的 sheet 里面,方便定位到具体某个业务流程的埋点。这样无惧复杂的业务流程,且但项目迭代时,你只需要重新录制一遍相关改动的业务流程即可,其他的脚本就可以作为埋点的回归测试。

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

更多原理层内容见 Buried-Point-Pro 项目的前身:https://testerhome.com/topics/21136

少年 回复

您好,我想咨询一下,console log里怎么会有埋点数据啊

show88118 回复

这个要看你们项目里面埋点上报的 SDK 是怎么写的,比如神策,只要收集到上报的事件就会在 console 里面打印出来,不然开发自测的时候怎么知道自己写的埋点有被正确触发呢?当然不同的埋点方案有不同的设计,这里以 console 打印埋点信息为例。

少年 回复

明白了,你这个依赖于埋点上报要打出consolelog才行,谢谢

show88118 回复

对的,所以要看具体项目的埋点方案,或者在 SDK 里面加入 console.log ,一般来说这样做比较方便调试。

6Floor has been deleted
少年 #7 · March 04, 2020 作者

如果你用的是 Buried-Point-Pro 这个项目,不需要定义预期埋点名称,它会直接从 name 属性里面动态获取作为预期埋点名称。

少年 回复

我看到了是在test.js里面定义的name属性,demo的那个例子是直接写死的一个name=“name1”,相当于name1是预期的值,上面实际业务那个没看懂,即"const name = await page.$eval(obj.properties.$element_selector, el => el.getAttribute('name'));"这个是去哪获取预期的值呢

少年 #9 · March 04, 2020 作者
luobo-zhang 回复

对应你填的 selector 定位到的 DOM 元素里面的 name 属性。

10Floor has been deleted
Author only
少年 #12 · March 05, 2020 作者
luobo-zhang 回复

定位不到你这个 selector 的位置。你的 Scripts 脚本写的有问题。所有点击的最前面,加了 await page.goto(your_url) 了吗,要先到那个页面。

Author only
少年 回复

你看我截的图,应该是加了

少年 #15 · March 05, 2020 作者
luobo-zhang 回复

刚刚翻了我的 demo 应该没有那段吧,里面只要 goto 一直到 click 的部分。也就是打开页面和点击操作部分,打开浏览器关闭浏览器这些都是在外部统一的了,只把其中的页面和操作暴露出来作为第三方 module 自定义执行。

少年 回复

明白了,运行成功了,非常感谢

少年 #17 · March 05, 2020 作者
luobo-zhang 回复

那就行

少年 回复

看这段还是有点不明白,预期值expectName是现实意义中的什么值呢?我理解的是我需要自己定义一下预期值,再跟consolelog中拿到的值对比

少年 #19 · March 05, 2020 作者
luobo-zhang 回复

前端写代码的时候一般都会配置 name 属性的,基本上 name 属性会跟埋点上报的名称保持一致。拿 name 属性的意义在于,有些时候上架的产品是会变更的,这样通过 name 去查获得的预期名字,也会同步更新,不需要自己人为去改脚本代码。不希望这种动态验证的,可以采用项目前身的 demoTest ,那个就是直接写死的,就是比较麻烦。

20Floor has been deleted
少年 #21 · March 05, 2020 作者

私有一下图片问题。pageview不算点击事件吧,这个不用验证都可以,obj.properties.$title 就可以拿到该值,但是这个没有预期值,要验证只能写好 excel 读 excel 里面的预期值。

Author only
少年 #23 · March 05, 2020 作者
luobo-zhang 回复

可以的。20楼删一下。obj.properties.$element_type肯定是可以拿到该值的,怎么去断言验证就是你的事情了。

少年 回复

OK,明白了

有个问题请教一下,web埋点是异步接口上报的,但是puppeteer方法执行触发埋点事件后,没有调用埋点接口就执行结束了,headless:true的情况下有这个问题,headless:false没有,一开始以为是执行太快直接被关了,加了等待如:await page.waitFor(1000);在headless:true的情况下感觉没有起效,啥问题

少年 #26 · March 30, 2020 作者
DL3L 回复

没加载好没点到,或者是点击还处于不可点的时候点了,或者点击元素不在当前可视区域,没等移动到就点了等等可能。打断点排查一下执行的顺序,在 click 前加 waitForSelector 兼容一下。

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up