前端自动化测试入门教程（puppeteer+jest+allure）

前端自动化测试入门教程

该教程将简单快速的帮你理解和入门（puppeteer+jest+allure）e2e测试。
个人理解，既然是前端的自动化测试，既然是测试，就应该包含 操作 和 操作的实际结果 和 预期结果 的比对。而 puppeteer 就是提供给我们的可对前端页面执行的 操作 ，jest 在这个入门教程里则是提供给我们 操作实际结果 和 操作预期结果 方便的 比对 ，当然 ject 的用处还很多，只是这里不做过多介绍。而 allure 呢，则是让我们更加方便直观的查看测试的结果。

一、准备

1.下载安装所需要的工具和软件：

（1）node.js 安装教程

（2）VSCode 点击下载

（3）Chrome 点击下载

• 补充：
  VSCode设置简体中文，见百度经验。

2.建立初始项目

（1）新建一个空的文件夹，名字随意，这里我们用AutoTest。

（2）在VSCode中打开新建的文件夹，右键文件夹>在终端中打开。

（3）在终端中输入以下命令回车，如果没有需要修改的内容接下来一路回车即可。

npm init

• 后续我们尽可能就在这个啥也没有的项目上做自动化测试的学习。

二、Puppeteer

• Puppeteer是一个由谷歌创建的Node.js库，它提供了一个方便的API来控制Headless Chrome。这也是为什么我们需要使用Chrome浏览器的原因。
• 这是 Puppeteer 的官方入门教程：Puppeteer
  你可以跟着官方的入门教程去学习和理解 Puppeteer ，并知道如何使用它。
• 当然你也可以跟着这篇文章去快速的学习并使用它，本文的初衷是希望你快速的学会使用 Puppeteer、Jest、allure 以及如何将他们集成在一起，后续如果你希望更深入的了解它们，请查阅它们的官网。文章中会出现它们的官网，在文章末尾，笔者也会将它们的官网全部再贴出来。
• 笔者能力有限，如果文中出现你不明白的地方，可以通过查阅官网或百度谷歌帮助你理解。

接下来让我开始吧。

（1）在项目中使用 Puppeteer。打开我们之前建立的空项目，在终端中输入：

npm install puppeteer

（2）在项目根目录新建 testBaidu.js 文件（名字是随意的，接下来我们打算测试 百度一下 作为示例，所以起的这个名），并将以下代码粘贴进去：

const puppeteer = require('puppeteer');

const run = asy