這一次，Google 終于對 Web 自動化下手了！
最近 Google 對 Chrome 進行了一次比較大的更新，其中一項是腳本錄制回放功能，它可以非常方便我們處理一些自動化場景。
想嘗鮮體驗的小伙伴，請把?Chrome 更新到最新版本。
下面聊一下具體的使用步驟
1 -?錄制
首先，打開 Chrome Canary?軟件，F(xiàn)12 進入到 Devtools 開發(fā)者工具懸浮窗
選擇右上角的更多工具 -?Recorder，進入到「 自動化流程列表界面 」
點擊「 Start new recording 」按鈕，輸入待錄制流程的名稱，就可以開始錄制操作了
默認會以當前 Tab 頁面生成一個初始 Step
比如，我是從百度首頁創(chuàng)建的錄制步驟，這里默認添加了一個初始 Step，url 指向當前 URL
在左側(cè)瀏覽器中模擬一次搜索操作，即：在輸入框中輸入內(nèi)容，并點擊搜索按鈕
在右側(cè)的錄制頁面會同步記錄下操作的流程步驟
PS：點擊底部的 End recording 按鈕后，我們可以對?url、asserted events 中斷言內(nèi)容進行更新
在完成錄制操作后，我們可以針對某一個操作進行二次編輯，可以在前、后添加一個步驟，或者刪除該步驟
比如，這里在「 點擊輸入框 」前添加了一個步驟，該步驟類型為等待元素出現(xiàn)，使用元素選擇器選擇目標元素
3 - 重放
錄制、編輯完成之后，點擊右上角的「 Replay 」按鈕即可以回放，并且會在錄制頁面會展示回放步驟及結(jié)果
4 - 更多說明
在錄制頁面回放操作時，可以設(shè)置模擬網(wǎng)速，內(nèi)置了 3 種方式，分別為：No throttling、Slow 3G、Fast 3G
其中，No throttling 為回放默認的網(wǎng)速設(shè)置
點擊左上角的導出按鈕可以將當前自動化步驟以 JS 文件的形式保存到本地
我們查看源碼發(fā)現(xiàn) Chrome?Recorder 錄制回放實際上基于「?puppeteer 」來實現(xiàn)的
const?puppeteer?=?require('puppeteer');
(async?()?=>?{
????const?browser?=?await?puppeteer.launch();
????const?page?=?await?browser.newPage();
????async?function?waitForSelectors(selectors,?frame)?{
??????for?(const?selector?of?selectors)?{
????????try?{
??????????return?await?waitForSelector(selector,?frame);
????????}?catch?(err)?{
??????????console.error(err);
????????}
??????}
??????throw?new?Error('Could?not?find?element?for?selectors:?'?+?JSON.stringify(selectors));
????}
...
相比直接使用?puppeteer?編碼自動化腳本，Chrome Recorder 錄制自動化流程更加方便快捷！
以上就是對 chrome 這一新功能的介紹。
如果文章對你有幫助，歡迎轉(zhuǎn)發(fā)/點贊/收藏~
作者：星安果
_往期文章推薦_