专栏首页京东技术Web自动化测试 | 充分利用浏览器记录的信息

Web自动化测试 | 充分利用浏览器记录的信息

来这里找志同道合的小伙伴!

>>>> 前言

一切和效率提升,质量提高相关的工具/脚本都隶属于自动化的测试范围,所以这里要介绍的不是单纯的UI自动化和接口测试脚本。

Web页面的展示依托于浏览器,当用户请求一个URL的时候,浏览器会记录下从HTTP请求到页面渲染成功这个过程的所有信息。我们通过开发者工具可以看到:元素信息、CSS、网络、性能等方面的所有数据。所以如果可以拿到浏览器记录的信息加以利用,一定会对测试有巨大的帮助。

>>>> 如何与浏览器进行交互获取数据

我们可以通过很多方式和浏览器进行交互,这里以Tampermonkey(油猴)为例,将一一介绍。

>>>> 一、什么是油猴?

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome、Microsoft Edge、Safari、Opera Next 和 Firefox。

>>>> 二、油猴能够实现哪些功能?

从Greasyfork中搜索和jd.com相关的代码,可以看到如下几个:

我们打开一个名为京东每日签到助手的脚本,可以看到核心思路是通过脚本打开不同的页面如会员签到页面,店铺抽奖页面等等,定位并点击对应的签到/抽奖按钮。

至此,我们大概了解到Tampermonkey能实现以下几个功能:

  1. 获取页面信息
  2. 操作页面元素
  3. 改变DOM结构
  4. 引入自定义JS脚本,CSS等

>>>> 三、油猴的内置API?

在Tampermonkey的官网中可以查看到该工具自带的API:

这里不一一介绍每个API的使用方法,可以在官网自行查看

(https://tampermonkey.net/documentation.php?version=4.6)

>>>> 四、如何在测试过程中使用油猴

这里举几个例子来展示,在实际测试中如何使用油猴提升一定的测试效率。

1、Web页面的性能数据展示

这张图展示了页面请求过程以及对应的计算方式, 那么数据本身可以从API中获取,在console窗口中输入window.performance.timing即可查看所有数据:

这些基础数据稍加处理就可以拿到页面的性能数据, 我们可以通过chrome插件或者油猴的方式来进行获取和计算,这里重点介绍油猴的方式。下面的例子展示了页面加载完成之后打印对应的性能数据,如果有数据超过期望的可以做alert提示。

2、事件代码展示

这里以一个实际测试过程中的Demo为例,下图展示的是查询/操作商品的后台页面:

测试人员在测试过程中无外乎常见的两种方法:手工和自动化测试。手工输入各种条件进行查询或者操作并验证实际的结果,自动化测试编写UI自动化脚本来进行回归测试。

现在通过油猴编写了一个辅助工具来帮助大家更好的测试这里的业务逻辑,优化测试用例的设计。

  1. 这里的按钮点击后有的会触发一个接口请求,或者触发form的提交。如果测试人员通过JS代码来校验这里的功能,可以直接定位到基础的处理逻辑和究竟调用了哪些接口。
  2. 测试人员如何来查看对应的代码呢? 在审查元素(Chrome)中获取元素的定位信息,比如这里使用的是name属性。

在Sources中搜索该属性的值,找到对应的click事件,确认代码:

代码展示如下,这里描述了在提交之前做的基础数据处理,并调用了网络接口。

  1. 通过以上的步骤我们可以顺利的拿到对应事件的处理代码,但是整个过程还是略显繁琐,现在通过编写油猴脚本可以解决这个问题。 首先,获取所有关心事件绑定的元素,比如change事件的元素使用绿色虚线框,click事件的元素使用红色虚线框。

添加move事件,鼠标移到绑定事件的元素上时直接显示源代码:

  1. 可以看出测试人员/开发人员可以非常方便的看到元素的事件源代码,大大提升了工作效率。 这里我们测试的域名一般包含 jd.com, 所以在油猴脚本上添加匹配URL的规则即可,这样所有满足规则的URL都会以这种方式展示。
3、网络接口访问

使用油猴脚本中的GM_xmlhttpRequest可以解决跨域请求,所以这意味着我们可以通过在浏览器中请求接口来做数据处理,比如请求接口和前端内容进行比对,比如获取页面数据并传输给测试服务等等。

这里举一个简单的例子,使用百度翻译接口对页面元素进行翻译。

  1. 这里以ware.jd.com为例,按钮原始显示的是中文重置
  1. 注册百度翻译API并获取相关用法。
  1. 将翻译的结果替换到页面上。

>>>> 总结

以上就是Tampermonkey在测试中使用Demo,结合自己的业务测试需求可以实现更多的测试功能提升测试效率,这篇文章就作为抛砖引玉之用。

本文分享自微信公众号 - 京东技术(jingdongjishu)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 京东物流性能测试理论梳理 ——性能测试的正确打开方式

    京东全球年中购物节火热进行中,2018年6月1日0点到6月18日24点累计下单金额达1592亿元,出库订单金额同比增长超过37%!618期间,90%以上自营订单...

    京东技术
  • 小巧“玲珑”—京东物流自动化测试平台核心功能首次曝光

    负责京东物流研发的全部产品线的质量保障工作,是京东集团最早开始全面实施自动测试的团队之一。经过多年的技术沉淀,围绕质量、效率、过程改进、技术提升等方面,去发现、...

    京东技术
  • 老板们不知道的秘密:开启自动化测试,让我们一起以逸待劳

    我认为所有的UI自动化测试都分成基本的三个步骤:定位元素,操作元素和执行断言。大家在做UI自动化不同的主要是方案的选型,封装优化的方式不同。目前移动App的更新...

    京东技术
  • Android Notification的使用

    叶应是叶
  • SQL题,Python做

    这个SQL题来源于自己的 Python 学习交流群,具体是这样的:用一条SQL语句查询出每门课都大于80的学生姓名和总成绩。

    罗罗攀
  • 从JVM角度看看Java的clone操作

    欢迎关注专栏:Java架构技术进阶。里面有大量batj面试题集锦,还有各种技术分享,如有好文章也欢迎投稿哦。 最近在给熔断器组件增加一个降级策略(Hystri...

    慕容千语
  • Python(3):文件读写与异常

    访问路径: 文件读写必然涉及到文件会放在某个路径下。在python里,可以通过引入os包来实现切换当前访问的路径: 1 # 假设我在 /home/zyq/Ki...

    SecondWorld
  • YOLO 升级到 v3 版,速度相比 RetinaNet 快 3.8 倍

    雷锋网 AI 研习社按,YOLO 是一种非常流行的目标检测算法,速度快且结构简单。日前,YOLO 作者推出 YOLOv3 版,在 Titan X 上训练时,在 ...

    AI研习社
  • 交互可视化plotly之3D plot

    分别以wt,hp,qsec为xyz轴作图 add_markers(p, x = NULL, y = NULL, z = NULL, …, data = NUL...

    生信编程日常
  • 记一次惊心的网站TCP队列问题排查经历

    此时问题已经影响到整个网站的正常业务,我的那个心惊的呀,最主要报警系统没有任何报警,服务运行一切正常,瞬时背上的汗已经出来了。但还是要静心,来仔细寻找蛛丝马迹,...

    顶级程序员

扫码关注云+社区

领取腾讯云代金券