大家好，我是安果！
最近 Google 對 Chrome 進行了一次比較大的更新，其中一項是指令碼錄製回放功能，它可以非常方便我們處理一些自動化場景
我們可以在 Chrome 官網下載 Chrome Canary 的最新版本進行嚐鮮
PS：Chrome 正式版本是 95，暫時還未整合
下載地址：
下面聊一下具體的使用步驟
1 - 錄製
首先，開啟 Chrome Canary 軟體，F12 進入到 Devtools 開發者工具懸浮窗
選擇右上角的更多工具 - Recorder，進入到「 自動化流程列表介面 」
點選「 Start new recording」按鈕，輸入待錄製流程的名稱，就可以開始錄製操作了
預設會以當前 Tab 頁面生成一個初始 Step
比如，我是從百度首頁建立的錄製步驟，這裡預設新增了一個初始 Step，url 指向當前 URL
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 錄製自動化流程更加方便快捷！
推薦閱讀