前端UI自动化puppeteer实践

Posted 2023-05-04

参考技术A

背景
在表单（web页面）测试过程中，要经常对表单基本功能进行回归，曾经考虑过使用webUI自动化工具，减少重复性的操作，但是因为之前用过appium，对UI自动化的体验不是很好，所以有些纠结，但是，再仔细想一下，有可能存在比较好用又确实能提升效率的工具，也不妨去尝试一下。
上网查询了一下，puppeteer具有可以使用录制脚本的工具puppeteer-recorder、截图等功能，找了个demo开始试了一下，发现坑较少，安装方便，使用比较流畅。
puppeteer介绍
Puppeteer 是一个Node库， 它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless。详见文末参考链接。
效果展示
目录结构
cases：用例脚本
config：配置文件，可区分测试、线上环境
screenshot_outputs：输出的截图文件
utils：用到的通用方法

测试思路
1、在脚本中写入测试执行步骤
2、运行脚本
3、查看执行结果（截图），查看是否符合预期。
这样操作会使简单很测试很多。就拿表单人工审核为例，全部人工操作的话，需要填写并提交表单，登录表单运营后台，找到对应的目录及表单，对表单进行审核，再重新打开表单并进行查看，而自动化的话，在写好脚本（在脚本中可进行接口请求）之后，就可以直接运行脚本，查看结果。

环境搭建
1、安装puppeteer：npm install puppeteer（前提是安装了node、npm）
2、安装chrome插件puppeteer-recorder（可自行百度，比较简单）
3、npm init，初始化一个项目
脚本编写

遇到问题
1、puppeteer-recorder只能录制获取元素、点击元素操作，没有获取到填写文本的操作，需要修改或添加已录制好的脚本
2、有些地方例如截图前，接口请求结束后，需要使用等待方法。await page.waitFor(3000)
3、使用await进行接口请求，不然会出现同步异步问题，后面的语句开始执行（但是要用到的参数还没有获取到）
参考：
https://zhuanlan.zhihu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b

UI 自动化测试学习

UI自动化我使用的是 puppeteer+jest+typescript 的框架，记录一下我的学习过程。

首先看了B站的视频，讲的 puppeteer ，很详细，可以直接看项目实战，操作中遇到问题再去前面的基础内容里找。

B站链接：https://space.bilibili.com/306107070?share_medium=android&share_source=copy_link&bbid=XY8DBEB8F83314327DF1AFA94A3B364948946&ts=1590578435901

然后看了 puppeteer+jest+typescript 框架整合的两篇博客

https://www.cnblogs.com/totoro-cat/p/11384034.html

https://www.cnblogs.com/totoro-cat/p/11401482.html

基本看完这些就可以上手进行 UI 自动化测试了

 

在 UI 自动化测试过程中也遇到了一些问题

一、chromium 浏览器下载不下来

在安装 puppeteer 的时候，会自动去下载 chromium 浏览器，但是这个对网络要求比较高，可能会下载不下来。我的解决办法是下载淘宝镜像，再通过淘宝镜像下载puppeteer

淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用 cnpm install 去下载

有些博客介绍的是可以跳过浏览器下载，我没有试过

 

二、报错找不到选择器

有时候页面还没有加载完成，代码已经去找了指定的选择器，这时候就会报错找不到选择器

解决办法是：

1、使用 await page.waitForSelector(‘‘);

但是这种情况最多会等待3秒，3秒选择器还没有出现的话，还是会报错

2、需要长时间加载的页面，在对某一个选择器进行操作之间可以加上

await page.waitFor（4000）；

表示让页面等到4秒再进行操作

 

三、测试用例 timeout 

每个 test 的执行时间上限默认是30秒，超过30秒就会 timeout 

解决办法：

1、在每个 test 重写 timeout 的时间

test(‘TEST_002‘ , async() => {

 

 

    }，60000);

2、在用例之前设置 timeout 的时间

在 describe 之前添加 jest.setTimeout(600000);就是设置 timeout 时间为600秒

 

我的UI自动化水平也就是初窥门径，这篇博客只做自己的学习记录，等我有提升了再来修改。