大家好,我是安果!
最近 Google 對 Chrome 進行了一次比較大的更新,其中一項是腳本錄製回放功能,它可以非常方便我們處理一些自動化場景
我們可以在 Chrome 官網下載 Chrome Canary 的最新版本進行嚐鮮
PS:Chrome 正式版本是 95,暫時還未集成
下載地址:
下面聊一下具體的使用步驟
1 - 錄製
首先,打開 Chrome Canary 軟件,F12 進入到 Devtools 開發者工具懸浮窗
選擇右上角的更多工具 - Recorder,進入到「 自動化流程列表界面 」
點擊「 Start new recording」按鈕,輸入待錄製流程的名稱,就可以開始錄製操作了
默認會以當前 Tab 頁面生成一個初始 Step
比如,我是從百度首頁創建的錄製步驟,這裏默認添加了一個初始 Step,url 指向當前 URL
在左側瀏覽器中模擬一次搜索操作,即:在輸入框中輸入內容,並點擊搜索按鈕
在右側的錄製頁面會同步記錄下操作的流程步驟
PS:點擊底部的 End recording 按鈕後,我們可以對 url、asserted events 中斷言內容進行更新
2 - 編輯
在完成錄製操作後,我們可以針對某一個操作進行二次編輯,可以在前、後添加一個步驟,或者刪除該步驟
比如,這裏在「 點擊輸入框 」前添加了一個步驟,該步驟類型爲等待元素出現,使用元素選擇器選擇目標元素
3 - 重放
錄製、編輯完成之後,點擊右上角的「 Replay 」按鈕即可以回放,並且會在錄製頁面會展示回放步驟及結果
4 - 更多說明
在錄製頁面回放操作時,可以設置模擬網速,內置了 3 種方式,分別爲:No throttling、Slow 3G、Fast 3G
其中,No throttling 爲回放默認的網速設置
點擊左上角的導出按鈕可以將當前自動化步驟以 JS 文件的形式保存到本地
我們查看源碼發現 Chrome Recorder 錄製回放實際上基於「 puppeteer 」來實現的
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 錄製自動化流程更加方便快捷!
推薦閱讀