這一次,Google 終于對(duì) Web 自動(dòng)化下手了!

大家好，我是村長(zhǎng)！

最近 Google 對(duì) Chrome 進(jìn)行了一次比較大的更新，其中一項(xiàng)是腳本錄制回放功能，它可以非常方便我們處理一些自動(dòng)化場(chǎng)景

我們可以在 Chrome 官網(wǎng)下載?Chrome Canary 的最新版本進(jìn)行嘗鮮

PS：Chrome 正式版本是 95，暫時(shí)還未集成

下載地址：

https://www.google.com/intl/zh-CN/chrome/canary/thank-you.html?statcb=1&installdataindex=empty&defaultbrowser=0

下面聊一下具體的使用步驟

1 -?錄制

首先，打開(kāi) Chrome Canary?軟件，F(xiàn)12 進(jìn)入到 Devtools 開(kāi)發(fā)者工具懸浮窗

選擇右上角的更多工具 -?Recorder，進(jìn)入到「 自動(dòng)化流程列表界面 」

點(diǎn)擊「 Start new recording 」按鈕，輸入待錄制流程的名稱，就可以開(kāi)始錄制操作了

默認(rèn)會(huì)以當(dāng)前 Tab 頁(yè)面生成一個(gè)初始 Step

比如，我是從百度首頁(yè)創(chuàng)建的錄制步驟，這里默認(rèn)添加了一個(gè)初始 Step，url 指向當(dāng)前 URL

在左側(cè)瀏覽器中模擬一次搜索操作，即：在輸入框中輸入內(nèi)容，并點(diǎn)擊搜索按鈕

在右側(cè)的錄制頁(yè)面會(huì)同步記錄下操作的流程步驟

PS：點(diǎn)擊底部的 End recording 按鈕后，我們可以對(duì)?url、asserted events 中斷言內(nèi)容進(jìn)行更新

2 -?編輯

在完成錄制操作后，我們可以針對(duì)某一個(gè)操作進(jìn)行二次編輯，可以在前、后添加一個(gè)步驟，或者刪除該步驟

比如，這里在「 點(diǎn)擊輸入框 」前添加了一個(gè)步驟，該步驟類型為等待元素出現(xiàn)，使用元素選擇器選擇目標(biāo)元素

3 - 重放

錄制、編輯完成之后，點(diǎn)擊右上角的「 Replay 」按鈕即可以回放，并且會(huì)在錄制頁(yè)面會(huì)展示回放步驟及結(jié)果

4 - 更多說(shuō)明

在錄制頁(yè)面回放操作時(shí)，可以設(shè)置模擬網(wǎng)速，內(nèi)置了 3 種方式，分別為：No throttling、Slow 3G、Fast 3G

其中，No throttling 為回放默認(rèn)的網(wǎng)速設(shè)置

點(diǎn)擊左上角的導(dǎo)出按鈕可以將當(dāng)前自動(dòng)化步驟以 JS 文件的形式保存到本地

我們查看源碼發(fā)現(xiàn) Chrome?Recorder 錄制回放實(shí)際上基于「?puppeteer 」來(lái)實(shí)現(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?編碼自動(dòng)化腳本，Chrome Recorder 錄制自動(dòng)化流程更加方便快捷！

E?N?D

使用 Django 快速開(kāi)發(fā)圖書(shū)管理系統(tǒng)

Python 標(biāo)準(zhǔn)庫(kù)中最有用的裝飾器