相信大家在平時(shí)都做過(guò)一些自動(dòng)化測(cè)試的工作，Chrome 在最新的版本（Chrome 97）里面新增了一個(gè)非常好用的功能，可以幫助我們錄制、回放、測(cè)試用戶操作，今天就和大家來(lái)一起試用一下。

Recorder 面板

首先我們打開 Devtools，然后打開 More Tools - Recorder。

或者也可以使用菜單命令打開 Recorder：

開始錄制

點(diǎn)擊 Start new recording 后就可以開始錄制啦。

面板顯示 Recording... 就表示正在錄制：

Recorder 會(huì)記錄并展示我們操作過(guò)的每個(gè)步驟。

最后點(diǎn)擊 End recording 可以結(jié)束錄制過(guò)程。

重放用戶操作

記錄完用戶操作后，我們可以點(diǎn)擊 Replay 來(lái)重放整個(gè)操作過(guò)程，重播進(jìn)度也會(huì)展示在面板的下面。

另外，我們還能通過(guò) Replay settings 來(lái)模擬弱網(wǎng)環(huán)境：

測(cè)試頁(yè)面性能

我們可以通過(guò)點(diǎn)擊 Measure performance 來(lái)測(cè)量用戶整個(gè)操作過(guò)程中的性能。

它會(huì)自動(dòng)打開 Performance 面板來(lái)進(jìn)行性能跟蹤。

編輯操作

整個(gè)錄制過(guò)程都會(huì)被轉(zhuǎn)換成代碼，這意味著我們可以隨意更改每個(gè)環(huán)節(jié)的代碼，甚至自己寫一段自動(dòng)化測(cè)試的代碼：

整體使用下來(lái)體驗(yàn)還是非常不錯(cuò)的，之前必須要借助一些工具庫(kù)實(shí)現(xiàn)的流程現(xiàn)在直接用 Chrome 也能實(shí)現(xiàn)了，大家快用起來(lái)吧 ～