chrome上更好的录制回放工具?Jesteer介绍及试用
乙醇 创建于 9 months 之前
最后更新: 9 months 之前
阅读数: 899
之前跟大家分享后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
{
"scripts": {
"test": "jest"
}
}
我打开一个空白页,然后输入www.itest.info,跳转到搜索页面后,添加一个snapshot断言,最后结束录制。下面是录制出来的脚本。
/*
This test suite was created using JESTEER, a project developed by
Tim Ruszala, Katie Janzen, Clare Cerullo, and Charissa Ramirez.
Learn more at https://github.com/oslabs-beta/Jesteer .
*/
const puppeteer = require('puppeteer'); // v13.0.0 or later
jest.setTimeout(10000);
describe('', () => {
let browser, page, timeout;
beforeAll(async () => {
browser = await puppeteer.launch({
headless: true,
});
});
beforeEach(async () => {
page = await browser.newPage();
timeout = 5000;
page.setDefaultTimeout(timeout);
});
afterEach(async () => {
await page.close();
});
afterAll(async () => {
await browser.close();
});
it('', async () => {
{
const promises = [];
promises.push(page.waitForNavigation());
await page.goto('chrome://newtab/');
await Promise.all(promises);
}
await page.waitForNavigation();
await page.keyboard.type('itest.info');
await page.keyboard.press('Enter');
{
const element = await page.waitForSelector('#su');
await element.click();
}
{
const element = await page.waitForSelector('HTML > BODY:nth-child(2)');
await element.click();
}
await page.waitForNavigation();
{
const snapped = await page.$eval('#1 > DIV:nth-child(1) > DIV:nth-child(1) > H3:nth-child(1) > A:nth-child(1)', el => el.innerHTML);
expect(snapped).toMatchSnapshot();
}
});
});
使用npm run test命令来运行,不出意外运行失败。
FAIL ./sum.test.js
✕ (297 ms)
● ›
net::ERR_INVALID_URL at chrome://newtab/
37 | const promises = [];
38 | promises.push(page.waitForNavigation());
> 39 | await page.goto('chrome://newtab/');
| ^
40 | await Promise.all(promises);
41 | }
42 |
at navigate (node_modules/puppeteer/src/common/FrameManager.ts:226:13)
at FrameManager.navigateFrame (node_modules/puppeteer/src/common/FrameManager.ts:198:17)
at Frame.goto (node_modules/puppeteer/src/common/FrameManager.ts:792:12)
at Page.goto (node_modules/puppeteer/src/common/Page.ts:1781:12)
at Object.<anonymous> (sum.test.js:39:1)
查了一下代码,应该是打开chrome的新tab页面之后自动等待的代码报错导致。
初步结论
初步结论现在应该有了,jesteer录制出来的代码其实没办法自动识别上下文,也就是说如果在地址栏上输入url并按回车键打开一个新页面,我们期望的结果是直接录制成goto url,但是jesteer只能忠实的还原我们的操作,而这些操作有可能导致回放失败。
总结
先说优点
- jesteer作为一款纯录制工具,其提供的snapshot比对功能还是非常强大的,等于是支持了在录制时候直接录制断言的能力;
- jesteer可以录制用户的一系列简单交互,对于一些页面来说还是很管用的;
- 根据jesteer的文档描述,jesteer比chrome原生的recorder录制准确性更高;
- jesteer录制出的脚本集成了jest框架,等于可以直接录制用例,而不是一系列的操作,省去了把脚本加工成用例的过程;
再说不足
- jesteer需要用户对nodejs有一定的了解,不能直接录制完就一键回放;
- jesteer录制出的脚本需要进行一些加工,比如上文可以感知到的修改goto的语句的工作;
- jesteer帮助文档比较简单,想上手用起来需要发挥一点点的想象力
最后
对于一些简单的操作和场景,且不介意使用jest作为测试框架的话,jesteer还是比较推荐的,可以极大的提升生产力;其他情况下就不推荐了。