参考资料

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
}

三、保存和导入导出用户流

录制完成的用户流也支持导入导出功能，方便于在本地管理多个用户流，在下图的上载按钮旁边则是切换用户流的下拉列表，呈现当前Chrome打开的用户流文件，就不再赘述。

导出后的文件作为附件上传，可以进一步解读，其实应该就是满足puppeteer定义的js文件或者1个单纯的json文件。

这是导出的puppeteer JS文件，定义了对应的界面操作动作。

这是导出的json文件，可以理解为一个传统的文本用例，仅作为用户流数据导入导出，能够被Chrome Recorder的引擎所识别。

基于固定的文件结构，后续应考虑通过代码和脚本自动生成对应的用户流文件，然后再导入Chrome中执行，可用于实现业务代码和测试脚本的关联。

其中有1个细节，我们能够看到单个step执行过后，还有有1个单独的assertedEvents，用于断言当前Web界面的内容，这一块后续可以单独展开说一说，感觉支持的能力意外的强大？

四、Puppeteer初探

根据wiki百科和官方资料，puppeteer是一个用于自动化 Chrome 的Node.js库吗，属于现代网络应用程序中的测试自动化（网络测试）中的一种。可以搭配无头游览器（Headless Explorer）使用，即没有图形界面的游览器，比如Chrome现在也支持这样的特性，参见如下的说明：

https://developer.chrome.com/blog/headless-chrome/

实战参考：

https://developer.aliyun.com/article/727915

五、关于Chrome Recoder中的assertedEvents

待更新。。。