大家好，我是安果！
最近 Google 对 Chrome 进行了一次比拟大的更新，其中一项是脚本录制回放性能，它能够十分不便咱们解决一些自动化场景
咱们能够在 Chrome 官网下载 Chrome Canary 的最新版本进行尝鲜
PS：Chrome 正式版本是 95，临时还未集成
下载地址：
https://www.google.com/intl/z…
上面聊一下具体的应用步骤
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 录制自动化流程更加方便快捷！
举荐浏览
挪动端自动化 AutoJS 疾速入门指南（上）
小技巧 | Get 到一个 Web 自动化计划，绝了！
阿里最强 Python 自动化工具开源了！
聊聊 PC 端自动化最佳计划 – Pywinauto
聊聊 PC 端自动化最佳计划 – WinAppDriver
厉害了！举荐一个 Web 端自动化神器 – Automa