前言：

此文先在其他平台发表，如有雷同，有可能那个也是我~

先了解一下概念

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

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

e2e实战小项目

本文将以百度首页为测试对象，有三个测试目标：

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

涉及技术/工具

1. Node
2. Typescript
3. puppeteer

完整代码地址

https://github.com/XieTongXue/happy-front-end/tree/master/e2e-test

测试流程

项目介绍

目录结构

app.ts 入口、创建测试进程
config.json 测试配置
interface.ts ts类型定义
server-img.ts 图片服务
test-open.ts 页面打开测试
test-search.ts 搜索功能测试
test-request.ts 初始化请求测试

怎么跑起来？

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

npm run server-img // 图片服务

<!-- 当前已有功能 -->

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

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

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

例子1：页面打开测试

放一个例子的缩写版代码让大家大概了解一下流程~

• index.ts

• test-open.ts
  

例子2：搜索功能测试

代码就不讲解了，大家看之前或者看的时候可以带着以下问题

• 搜索功能测试的整体思路是怎样的？
• 如何判断动作1已完成可以执行动作2？

例子3：请求是否正常参数是否有缺失

这个测试目标是平时开发中遇到比较多的，页面初始化时打点数据的采集、性能的上报等等都需要发请求，那么如何保证这些请求有发起，并且参数是正常的呢？请看第三个例子，代码就不讲解啦，感觉还是自己去看然后跑跑好一些，看代码之前可以先思考一下以下问题：

• 如何捕获请求？
• config.json中，假设请求是乱序的，如何保证请求都有测试过
• 如何判断请求全部测试完成？
• 怎么知道浏览器正在测，还是已经测完了？

其他：

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

标签：Node,run,请求,ts,puppeteer,e2e,测试,test
来源： https://blog.csdn.net/Fabulous1111/article/details/115829749