大家好,我是 ConardLi
,周末愉快 ~
相信大家在平时都做过一些自动化测试的工作,Chrome
在最新的版本(Chrome 97
)里面新增了一个非常好用的功能,可以帮助我们录制、回放、测试用户操作,今天就和大家来一起试用一下。
![](https://filescdn.proginn.com/fdfec93f7bdec94ad2913c8454423808/c400b8d09cdd7242fbb159932dc6b2e7.webp)
Recorder 面板
首先我们打开 Devtools
,然后打开 More Tools - Recorder
。
![](https://filescdn.proginn.com/02ebc41d8723512a4e0799f2f00ad219/bbf1eba73d25fd004ffab3a8a15a54e4.webp)
或者也可以使用菜单命令打开 Recorder
:
![](https://filescdn.proginn.com/d3ffdc0784654f3538f5d34b093cd0a8/a7d54e36f7c57b8e984c6b4550a3c316.webp)
开始录制
点击 Start new recording
后就可以开始录制啦。
![](https://filescdn.proginn.com/6306a7655229cd700dd24248c08e7c43/5a3c3daef6e604702b2e949e468d36fe.webp)
面板显示 Recording...
就表示正在录制:
![](https://filescdn.proginn.com/b50ef290199d5dfc136047fd1bcddf3b/6b1af53294761dbf056b610e07263cd4.webp)
Recorder
会记录并展示我们操作过的每个步骤。
![](https://filescdn.proginn.com/bc9a6dd6c512d123b4b268a895efc7a4/e9df3cbd83d253fca82cd87894defac9.webp)
最后点击 End recording
可以结束录制过程。
重放用户操作
记录完用户操作后,我们可以点击 Replay
来重放整个操作过程,重播进度也会展示在面板的下面。
![](https://filescdn.proginn.com/d208200c9bd1fd625a37993d8d22d362/dd0250c0bd05c9c186d9be43093c114e.webp)
另外,我们还能通过 Replay settings
来模拟弱网环境:
![](https://filescdn.proginn.com/c47523c1762a85a209cfdf4131c96651/e0a275f53a1472347b91468134e30cdc.webp)
测试页面性能
我们可以通过点击 Measure performance
来测量用户整个操作过程中的性能。
![](https://filescdn.proginn.com/0dc6bf4b16d61dcee6972a55bd823eca/77e5c065f7eb0e45920df16f7e3f612b.webp)
它会自动打开 Performance
面板来进行性能跟踪。
![](https://filescdn.proginn.com/35da2c6098196c6704ddc7d3110e0e9a/c02c263a647b935226d163bfce44f3cb.webp)
编辑操作
整个录制过程都会被转换成代码,这意味着我们可以随意更改每个环节的代码,甚至自己写一段自动化测试的代码:
![](https://filescdn.proginn.com/94ebe566706a6edd8308b0ffd8a2dcbd/329b4fdaebb75bc46a3a592057b318e5.webp)
整体使用下来体验还是非常不错的,之前必须要借助一些工具库实现的流程现在直接用 Chrome 也能实现了,大家快用起来吧 ~