<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          Chrome 新功能:支持錄制、重放和測試用戶操作!

          共 848字,需瀏覽 2分鐘

           ·

          2021-11-12 23:18

          大家好,我是 ConardLi,周末愉快 ~

          相信大家在平時(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)了,大家快用起來吧 ~


          往期推薦


          2021 TWeb 騰訊前端技術(shù)大會(huì)精彩回顧(附PPT)
          面試題:說說事件循環(huán)機(jī)制(滿分答案來了)
          專心工作只想搞錢的前端女程序員的2020

          最后


          • 歡迎加我微信,拉你進(jìn)技術(shù)群,長期交流學(xué)習(xí)...

          • 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端,做個(gè)專業(yè)的技術(shù)人...

          點(diǎn)個(gè)在看支持我吧
          瀏覽 61
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評論
          圖片
          表情
          推薦
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  欧美日韩爱爱 | 99re免费视频在线观看 | 精品人伦一区二区三区蜜桃网站 | 亚洲视频欧美视频日韩视频 | 日本免费黄色小视频 |