99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

登錄
首頁大數(shù)據(jù)時代這一次，Google 終于對 Web 自動化下手了
這一次，Google 終于對 Web 自動化下手了
2021-11-15
收藏
這一次，Google 終于對 Web 自動化下手了

作者：AirPython

來源：星安果

大家好，我是安果！

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

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

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

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

1 - 錄制

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

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

這一次，Google 終于對 Web 自動化下手了

點擊「 Start new recording 」按鈕，輸入待錄制流程的名稱，就可以開始錄制操作了

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

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

這一次，Google 終于對 Web 自動化下手了

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

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

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

這一次，Google 終于對 Web 自動化下手了

2 - 編輯

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

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

這一次，Google 終于對 Web 自動化下手了

3 - 重放

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

這一次，Google 終于對 Web 自動化下手了

4 - 更多說明

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

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

這一次，Google 終于對 Web 自動化下手了

點擊左上角的導(dǎo)出按鈕可以將當(dāng)前自動化步驟以 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 錄制自動化流程更加方便快捷！

數(shù)據(jù)分析咨詢請掃描二維碼

若不方便掃碼，搜微信號：CDAshujufenxi

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進(jìn)行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調(diào)，回調(diào)的第一個參數(shù)驗證碼對象，之后可以使用它調(diào)用相應(yīng)的接口 initGeetest({ // 以下 4 個配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺檢測極驗服務(wù)器是否宕機(jī) new_captcha: data.new_captcha, // 用于宕機(jī)時表示是新驗證碼的宕機(jī) product: "float", // 產(chǎn)品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說明請參見：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計時完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }