谷歌浏览器开发者工具系列28:用户操作回退历史线

介绍

Chrome 开发者工具现在提供了一个令人激动的小功能:记录用户的操作历史,然后进行回退播放。这个小功能就是Recorder Panel,通过它记录一段用户操作界面的历史行为并进行追溯播放。基本的应用场景包括:
1. 测试网页应用的功能(例如:自动化测试)。
2. 重复使用这个历史回退的功能让使用者可以发现重复的操作会带来哪些性能影响,从而考虑如何去优化它们。

操作步骤

Recorder目前是作为一个面板而存在:
1. 使用快捷键(Cmd + Shift + P)打开Recorder面板。
2. 选择Start new recording 然后为你的操作流命名,例如:注册或者滚动。
3. 在界面上做一些操作,如点击,滚动,放大,播放等操作,然后选择End recording
recorder playback - 谷歌浏览器开发者工具系列28:用户操作回退历史线

现在你刚刚的操作行为就会以脚本的形式被记录下来了!接下来你可以开始做以下一些事情:
– 重播(Replay)用户操作流:界面就会回播你刚刚的操作。
– 评估性能(Performance profile):选择Profiling begins,在界面重复播放操作,Performance会立即记录这些结果以生成界面的性能报告。
– 导出(Export)用户的操作流:作为Puppeter脚本。这样就能后续用程序来执行你刚刚的操作代码了(下面有说明)。
– 修改(Edit)用户的操作流:在开发者工具界面上,点击single action来编辑这个流。

Puppeteer 脚本

Puppeteer是一个Node语言编写的自动测试框架。它能够让开发者编写脚本在无头(headless)浏览器中模拟用户的各种点击行为。当你导出了Recorder的脚本,并且在Puppeteer中使用这些脚本,那么你就可以形成一次基本的用户操作记忆流程。举例来说我们可以模拟目标元素相应Enter事件:

const targetPage = page;
await targetPage.keyboard.up("Enter");

或者模拟用户的点击:

const targetPage = page;
const element = await waitForSelectors([["#button"]], targetPage);
await element.click({ offset: { x: 22.75, y: 16} });

这些代码可以帮助到你重复进行功能测试。极大地提高测试效率,避免无效的测试用例回归。

兼容性

在chrome97版本及以上或者Chrome Canary中可以使用该功能。

发表回复 0