前言：

在csdn混了挺长时间，第一次过来大神聚集地掘金发水文，大佬们多多关照~

概念

自动化测试的类型及工具都有挺多：单元测试、集成测试、UI测试、e2e测试等等，相关概念网上有挺多文章介绍了，就不多聊，比如这篇就不错： 试试前端自动化测试！（基础篇），概念比较模糊的话可以先看看~

单元测试相信大部分人都写过，接下来主要谈谈平时做得比较少的e2e测试

e2e自动化测试实战

Talk is cheap, show you my code，开局先放代码仓库：github地址，把这个例子看完或者跑一遍的话相信你对e2e或者用到的技术node、ts、puppeteer都会有一定的理解。

• puppeteer介绍及api：learnku.com/docs/puppet…

测什么？

测试的目标是大家熟悉的百度首页，分为三个例子：

1. 打开是否正常
2. 搜索功能是否正常
3. 初始化请求是否正常&&参数是否有缺失

大致流程：

代码介绍

• 命令介绍

npm run dev // ts变更监听、编译

npm run server-img // 图片服务

<!-- 当前功能 -->

npm run test-open // 例子1：页面打开测试

npm run test-search // 例子2：搜索功能测试

npm run test-request // 例子3：初始化请求测试

• index.ts

• 测试打开是否正常（最简单的例子，其他的例子有兴趣自行拉仓库代码看哦,控制台有每个步骤的输出）

其他

官方说puppeteer还能做服务端渲染，也试了一下；大致原理：用户请求首页，服务端拿到请求进而请求ssr服务，ssr服务使用puppeteer加载对应的页面，返回给前端。

亲测速度比较慢，如果是为了提高用户体验，不适合用puppeteer做服务端渲染。可用场景：识别爬虫，是爬虫的话再去请求puppeteer ssr服务，仅用于解决seo问题。