原文来自:https://www.yuque.com/hengwenzhangdamao/weagvh/kuw84c

某君在 TesterHome 社区发了一贴,说 Recorder 要失业了?(不知道为啥要发到匿名贴)就想起以前谷歌推出的各种各样的工具,每次出来都说某某要被干掉了,比如 AgularJs,我现在几乎已经听不到它的声音,谷歌还做很多其他的东西,都死了。有兴趣的同学可以看看《这座 “坟墓” 埋葬着谷歌那些年死去的产品》。

当然,这个 Recorder 还是值得研究下的。英文好的可以直接移步官方文档——《Record, replay and measure user flows》。那想体验下的同学,可以跟着我 step by step 来玩一把!

下载 Chrome 97

因为目前最新的正式版是 96,所以我们必须去下载开发者版本、尝鲜版或者探索者版(金丝雀)。那我自己是下载的金丝雀。直接去官方下载吧,https://www.google.com/intl/zh-CN/chrome/

找到 Recorder

打开 ChromeDevTools,

在最右侧找到 Recorder,看到有个烧杯的标签,说明是试用功能!

开始录制用户流程

点击 Start new recording 即可,然后你可以去网页上操作,直接看官方的小视频吧,和自己操作一模一样。
/

回放用户流程

直接点击 Replay 即可,
/

是不是非常的方便?

在回放的时候,还可以选择速度,这个不是就是弱网自动化么?(下面是录制在社区搜索自动化测试 user flow)

页面性能测试

在回放的过程中,还可以获取页面的性能数据。点击 Measure Performance。
/

在社区搜索自动化测试 user flow 的性能数据,这个怎么分析可以参考《https://segmentfault.com/a/1190000023272526

编辑用户流程

添加多条用户流程,Recorder 是可以支持多条用户流程的。可惜不支持一起执行。

你也可以导出脚本,脚本是使用Puppeteer写的,方便你后续编辑。所以感觉以后的自动化就可以先用 Recorder 录制,录制完之后,导出 puppeteer 脚本,然后进行修改,最后大规模使用。

编辑用户流程的步骤

在用户流程里的每一个点,都是一个步骤,我们可以在前后加入新的步骤。我们来解读下第一步和第二步的意思:

第一步

type: naviagte 表示打开网页,然后 url 是 testerhome.com。断言(asserted)里面判断了 type,url 和 title。

第二步

type: click 表示点击,然后 target 表示主页。这里有两个选择器,这是 Recorder 默认的,如果通过第一个选择器能找到,第二个就不用了。offset 就是点击的坐标了。

这里的 type 还有 waitForElement 这种(应该还有很多其他的,但是没有文档)。

总结

总体来看,这个工具还是很不错的,目前文档还是比较缺失,同时功能也比较简陋,比如缺少基本的单步调试,不能多用户流程串行或者并行跑等等,期待正式版出来有更多好用的功能。


↙↙↙阅读原文可查看相关链接,并与作者交流