作者：AirPython

來源：星安果

大家好，我是安果！

最近 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 錄制自動化流程更加方便快捷！