前端自动化测试入门教程
该教程将简单快速的帮你理解和入门（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 = async () => {
const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1366, height: 768 } });
const page = await browser.newPage();
await page.goto('https://www.baidu.com', { waitUntil: 'domcontentloaded' });
const input_baiduyixia = await page.$("#kw");
await input_baiduyixia.type("puppeteer");
const btn_baiduyixia = await page.$("#su");
btn_baiduyixia.click();
}
run();
- async / await
- puppeteer.launch()：打开一个新的Chromium（Chrome）窗口，默认无参为打开一个无头模式浏览器，headless指定是否为无头模式，defaultViewport指定打开的默认窗口大小。无头模式浏览器将在后台运行，即你将看不到浏览器窗口及接下来的操作，为了更直观的看到测试步骤，我们指定headless:false以便我们观察测试的运行。
- browser.newPage()：打开一个新页面。
- page.goto('www.baidu.com') ：跳转至某个网址，这里我们跳转至 百度 ，{ waitUntil: 'domcontentloaded' }：指定我们的代码将等待，直到DOM内容加载完毕。
- await page.$("#kw")：选择获取指定页面元素，如何获取元素选择器？， 需要注意的是，虽然跳转页面的时候我们已经指定等待dom内容加载完毕后再继续操作，但是dom加载完毕不代表他已经被渲染在页面上，而元素还未被渲染在页面上的时候，我们是无法使用 puppeteer 正确操作某个元素的，如 await page.$("#kw") ，如果执行此操作时你所选定的元素未被渲染他将返回空值，这个时候你利用返回值进行其他操作就会报错，那么如何避免这种情况，我们建议你在执行某一步操作的时候，都等待他的前置条件完成，如 await page.$("#kw") 的前置条件应该是该元素已经被渲染在页面上，那么这个时候我们在这个语句之前加一句 await page.waitFor("#kw") ：它指定了程序将等待，直至等到该元素被渲染至页面上再继续执行接下来的操作，它还可以等待很多操作，后续你将经常使用它： page.waitFor()
- input_baiduyixia.type("puppeteer")：向输入框中输入 puppeteer 。
- 以上选择输入框，向输入框中输入元素两个步骤可以使用 page.type('#kw','puppeteer') 代替，是一样的效果。
const btn_baiduyixia = await page.$("#su");
这一行选择了 百度一下 按钮。
- btn_baiduyixia.click()：点击该按钮。
（3）在终端中输入以下命令，你将会看到一个Chrome被打开，并跳转至 百度一下 ，之后输入 puppeteer 并点击 百度一下 按钮开始搜索。
以上就是 Puppeteer 的基本使用，如果你想要了解更多关于 Puppeteer 的使用或其他知识，可以访问 Puppeteer官网 。
三、Jest
关于 jest 就不做过多的介绍了，前面说过，它在这里目前提供给我们的，就是一个比对 操作预期结果 和 操作实际结果 的比对，关于 jest 更多的内容可以访问 Jest官网。
接下来让我们开始吧。
（1）还是在之前建的项目里，运行以下代码安装 Jest。
npm install --save-dev jest
（2）新建一个名为 sum.test.js 的文件，开始编写我们的测试代码。
test('adds 1 + 2 to equal 3', () => {
expect((1+2)).toBe(3);
});
这段代码的意思是，执行一段测试test()：test()第一个参数为该段测试得标题，第二个参数传入一个函数，函数中写入你需要执行得操作。
expect((1+2)).toBe(3)：意思为比对 1+2 的值是否等于 3 。更多的比对方法见Jest官网。
（3）将下面的配置部分添加到你的 package.json 里面：
{
"scripts": {
"test": "jest"
}
}
（4）项目终端中运行：
npm run test
Jest 将打印下面这个消息：
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)
ok，你成功的进行了第一次 Jest 测试。
是不是超级简单，Jest 很强大，还有许多功能等着你去使用：Jest官网。
四、Puppeteer+Jest
前面我们已经简单的学习了 Puppeteer 和 Jest ，现在我们要把他们集成起来以便对前端进行测试了。
现在，让我们开始吧。
（1）在项目终端中输入以下代码安装必要的包。
npm install jest-puppeteer
这里我们多安装一个 jest-cli ，不安装 jest-cli ，之前我们运行 npm run test 。默认执行项目中所有的测试文件，而安装了 jest-cli 我们就可以运行
npm run test <文件名>
来单独运行指定的测试文件。
安装 jest-cli 。
npm install -g jest-cli
（2）在项目根目录中创建名为 jest.config.js 的文件，这个文件指定了我们在项目中使用 Jest 的一些配置。
在 jest.config.js 中粘贴以下代码：
module.exports = {
preset: "jest-puppeteer", // *必须，指示了Jest和puppeteer可以一起使用
globals: { // 全局变量，你可以在项目中直接使用它们
BAIDU_URL: "https://www.baidu.com"
},
// testMatch: [ // 匹配文件，指示了Jest应该在那些文件夹中寻找哪些文件
// "**/test/**/*.test.js"
// ],
verbose: true,
testTimeout: 60000, // 每个测试的超时时间，超过这个时间本次测试算失败
}
（3）在项目根目录创建名为 jest-puppeteer.config.js 的文件，用于指示 jest-puppeteer 的相关配置。 在 jest-puppeteer.config.js 中粘贴以下代码：
module.exports = {
launch: { // 这里的参数将会传给 puppeteer.launch（）
headless: false, // 是否为无头模式
defaultViewport: { width: 1500, height: 700 }, // 默认窗口的大小
// slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0, // 是否慢动作执行测试
devtools: true
},
browserContext: 'incognito', // 无痕模式
exitOnPageError: false, // 默认为true，出现全局错误会导致测试中断
}
（4）接下来让我们开始编写测试代码，在项目的根目录中创建名为 baidu.test.js 的测试文件，粘贴以下代码：
beforeAll(async () => { // 这段代码将会执行在所有代码之前
await page.goto(BAIDU_URL, {waitUntil: 'domcontentloaded'});
});
describe('百度一下，你就知道', () => {
it('标题测试', async () => {
const title = await page.title();
expect(title).toBe('百度一下，你就知道');
});
});
it() 与 test() 同义。
上面这段代码，表示了打开浏览器，跳转至 百度一下 ，然后我们获取页面的标题，与 ” 百度一下，你就知道 " 对比，查看是否一致。
我们再项目终端中运行以下代码执行它：
npm run test baidu.test.js
当测试跑完后成功后你会在终端见到以下提示：
PASS src/test/baidu.test.js
百度一下，你就知道
√ 标题测试 (107 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.964 s, estimated 3 s
Ran all test suites matching /baidu.test.js/i.
到这里，你应该已经基本了解前端自动化测试的流程了，我们通过 Puppeteer 提供的 API 模拟人工在浏览器上的操作（点击、输入、鼠标移动等等... Puppeteer 提供了很多方法，如果你想了解更多，请访问 Puppeteer官网 ）并获取操作的结果，通过 Jest 提供的比对方法（断言）去测试实际操作结果是否与你预期的结果相同以达到测试的目的。
五、Puppeteer+Jest+Allure
前面我们已经学习了 Puppeteer + Jest 的基本使用，现在我们来学习本教程的最后一个内容：向项目中集成 Allure 以生成测试的可视化报告 （需要注意的是，在安装 Allure 之前你需要先安装 jdk ） 。
要在项目中集成 Allure ，我们首先需要先下载并配置一下 Allure 。
（1）下载 Allure ，Allure官网 ，或者点击下载：allure-2.13.1 。
（2）解压下载下来的Zip，拷贝你想放的位置下，配置系统环境变量指向解压后的bin目录（官网一直在更新，如果官网下载的包解压后目录不一致请点击这里下载：allure-2.13.1 ）：
（3）进入命令行，运行以下指令，出现版本号提示说明allure服务已经安装配置完毕。
C:\Users\user>allure --version
2.13.1
C:\Users\user>
（4）打开我们之前建的项目，在项目根目录打开终端，输入以下命令安装依赖：
npm install jest-allure
（5）然后我们需要修改一下配置文件 jest.config.js ：
module.exports = {
launch: { // 这里的参数将会传给 puppeteer.launch（）
headless: false, // 是否为无头模式
defaultViewport: { width: 1500, height: 700 }, // 默认窗口的大小
// slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0, // 是否慢动作执行测试
devtools: true
},
browserContext: 'incognito', // 无痕模式
exitOnPageError: false, // 默认为true，出现全局错误会导致测试中断
setupFilesAfterEnv: ['jest-allure/dist/setup'], // 每次执行测试前执行这个文件以便让allure生成测试结果报告
}
（6）现在在执行测试文件之后，你就可以运行以下命令生成测试报告了：
allure generate --clean
--clean 参数指示本次报告覆盖之前的报告
（7）执行以下命令在浏览器中查看测试报告
allure serve
以上就是本教程的全部内容，你可以访问以下官网或使用搜索引擎来获取相关的更多知识：
Puppeteer官网
Jest官网
Allure官网
