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

Recorder 面板

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

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

開始錄制

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

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

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

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

重放用戶操作

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

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

測試頁面性能

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

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

編輯操作

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

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