基于Puppeteer的Chrome Recorder初试

织部里沙女朋友

已于 2023-01-31 00:24:37 修改

阅读量1.1k

点赞数

分类专栏：测试dog 开发和测试工具文章标签： chrome 前端功能测试测试用例 Powered by 金山文档

于 2023-01-21 18:34:57 首次发布

本文链接：https://blog.csdn.net/qq_35466511/article/details/128747014

版权

测试dog 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

开发和测试工具

3 篇文章 0 订阅

订阅专栏

文章介绍了ChromeRecorder工具的使用，它能方便地录制和回放用户操作，简化客户端测试的自动化过程。通过录制用户流，分析和修改操作序列，以及利用断点调试，ChromeRecorder提供了一种高效的方法来创建和管理测试用例。此外，文章还提及了Puppeteer库在自动化测试中的作用，以及与Chrome无头浏览器的配合使用。

摘要由CSDN通过智能技术生成

参考资料

https://developers.google.cn/codelabs/devtools-recorder?hl=zh-cn#0

https://pptr.dev/

引言

使用Web页面，做对应服务端和客户端测试时经常会碰到自动化的选择问题，服务端一般来说业务测试的都是各种各样的服务端API接口，分别模拟外部系统、其他组件或者客户端的调用。

在JS统治Web客户端开发后，基于JS以及各种其他分支（比如TS）的开发框架，使得客户端的开发迭代变得更加迅速，基于HTML5可以实现的能力也越来越强大。测试客户端时，常见的手工测试难以满足快速迭代的交付需求，也无法达到很好的守护效果，故客户端用例自动化势在必行。

当前的项目使用的框架是Selenium，运行方式是以Chrome插件的形式，外面又封了一层框架做用例集管理以及与操作系统交互的API接口（bash、python脚本等均可）。

近两天在使用Chrome进行服务端和客户端问题定界时发现，多出的2个测试中功能，其中1个叫Recorder好像挺有意思的，简单试用一下，发现意外的很易用，故做个简单的记录。

一、录制自己的用户流

关于这里的称呼，“用户流”是从官方文档里抠出来的解释，从测试人员的角度理解其实就是一个独立的用户行为组合，可以看作是1条用例，我认为怎么理解都可以。

首先选择加号，输入自己的用户流名称，然后选择开始录制。

完成需要录制的客户端操作后，点击完成录制后效果如下。能够看到，对应操作都被记录了下来。

二、查看录制的用户流

我们开始尝试着分析一下用户流的一些关键数据和支持的修改动作，首先是和selenium用例相似的，需要通过url定位到对应的界面，对应的就是Current Page，然后进行了移动Viewport的动作，相当于鼠标滚动并移动光标，然后开始准备跳转至新的页面。

再往下看，Navigate这个动作即表示当前页面进行了重新定位，页面定位到的url为https://www.liaoxuefeng.com/wiki/1016959663602400/1017804782304672，随后就能够看到显示的定位信息发生改变，到了“HTTP协议简介 - 廖雪峰的官方网站”随后我又进行了多次点击操作，其中第3次是选中了界面的元素“HTML简介”然后点击。

对应的界面操作如下，在wiki的页面选择了左侧的树状结构并点击1个叶子节点，相当于跳转到了新的页面。

最后，再次发起一个搜索栏的搜索动作，能够看到录制的结果如下，操作顺序为：找到搜索栏->修改搜索栏的内容->按下Enter键发起搜索

在搜索时，是通过selectors来找到对应的页面元素，然后通过修改value来传递值给游览器，最后按下按键来触发服务端接口调用并跳转至搜索结果的界面进行呈现。

三、修改录制的用户流

另一方面，能够通过右侧的...按钮点击后看到，单次的操作可支持调整顺序、删除、增加断点、拷贝为文本脚本的功能。前2个都是修改的常见操作，还有增加断点和拷贝为文本脚本的功能，下面就分别尝试一下。

首先是增加断电，和代码调试一样，这里是增加了用户流的断点，便于调试录制的结果，对于某个步骤加上断点后，如果选择Replay就会停在对应的断点处。这里选择在点击“WSGI接口”时加上断点，然后发起Replay即可。

附执行失败的一张截图，界面上由于没有操作展开树状图的叶子节点“HTML简介”，导致单个步骤执行超时。

如果希望修改用户流单个步骤的内容，只需要展开后双击对应的元素，即可快速完成编辑的动作，操作非常高效。

如果希望将用户流放到本地编辑和查看，可使用上面提到的copy as xxx操作，以json为例，结果如下。


{
    "type": "click",
    "assertedEvents": [
        {
            "type": "navigation",
            "url": "https://www.liaoxuefeng.com/wiki/1016959663602400/1017805396770016",
            "title": "HTML简介 - 廖雪峰的官方网站"
        }
    ],
    "target": "main",
    "selectors": [
        [
            "#\\31 017805396770016 > a"
        ],
        [
            "xpath///*[@id=\"1017805396770016\"]/a"
        ],
        [
            "aria/HTML简介111"
        ]
    ],
    "offsetX": 65.5,
    "offsetY": 22
}