chrome上更好的录制回放工具?Jesteer介绍及试用
之前跟大家分享后 chrome 上原生的录制回放功能,今天看到了一款最新的的录制回放工具 jesteer,于是第一时间来了解和试用一下。
主要功能
- 不用写代码,直接可以录制和回放
- 可以录制基本的页面交互
- 自动创建基于 Puppeteer 的脚本
- 回放时的快照检查功能
- 简单舒适的 web ui
安装
jesteer 是一款 chrome 插件,直接去 chrome 商店里所有 jesteer 点击安装既可。
界面
jesterr 的界面很简单,就 3 个按钮
- Record:开始录制
- Take a snapshot:dom 高亮
- Copy to clipboard
简单上手使用
- 点击 Record 开始录制
- 录制过程中点击 Take a snapshot 进行断言
- 点击 Stop Recording 停止录制
- 点击 Copy to clipboard 拷贝生成的代码到剪切板
这几步还是非常简单的,后来我遇到了一个问题,怎么进行用例的回放呢?之前 chrome 自带的 Recorder 是可以录制完成后直接回放的,而 jesteer 则找不到回放按钮。折腾一小会后我终于找到了答案。
把生成的代码粘贴到测试项目中
为了可以运行生成的代码,我决定新建一个 nodejs 项目来进行尝试。
mkdir jesteer_example
cd jesteer_example
npm init
npm install --save-dev jest
npm install --save-dev puppteer
touch example.test.js
修改 package.json