Chrome 新功能:支持录制、重放和测试用户操作!

相信大家在平时都做过一些自动化测试的工作,Chrome 在最新的版本(Chrome 97)里面新增了一个非常好用的功能,可以帮助我们录制、回放、测试用户操作,今天就和大家来一起试用一下。

1e64c26d9c4ec80e298c0b1bf054c4f0.gif

Recorder 面板

首先我们打开 Devtools,然后打开 More Tools - Recorder

1125aa42d0b77f810fcab58dcec71121.png

或者也可以使用菜单命令打开 Recorder

644db90a600ae01aa9be875baf47f82d.png

开始录制

点击 Start new recording 后就可以开始录制啦。

01120f47439515ef139560a459d11dba.png

面板显示 Recording... 就表示正在录制:

fb38b0d158b8921b8326ab5df8c1830f.png

Recorder 会记录并展示我们操作过的每个步骤。

68dafb16a5b82ca9d6e57cd1c4177029.png

最后点击 End recording 可以结束录制过程。

重放用户操作

记录完用户操作后,我们可以点击 Replay 来重放整个操作过程,重播进度也会展示在面板的下面。

9318f1eae53163e54844bb3e8d8ea0cd.gif

另外,我们还能通过 Replay settings 来模拟弱网环境:

50bf08a92553e97e08b62cde5d0acef7.png

测试页面性能

我们可以通过点击 Measure performance 来测量用户整个操作过程中的性能。

727ab2fa4eb5c868ff642f0fdb3b37b4.gif

它会自动打开 Performance 面板来进行性能跟踪。

3e6b117f27545d08935ed05b2fe59932.png

编辑操作

整个录制过程都会被转换成代码,这意味着我们可以随意更改每个环节的代码,甚至自己写一段自动化测试的代码:

0955807dc10ed33407e0bac7f8097ac0.png

整体使用下来体验还是非常不错的,之前必须要借助一些工具库实现的流程现在直接用 Chrome 也能实现了,大家快用起来吧 ~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值