一、序言
二、PageObject设计模式
三、Mocha测试框架
1. 安装
2. 示例脚本
3. 钩子函数
四、修正脚本
1. 自定义浏览器
2. 完善用例脚本
3. 所有项目文件总览
四、实行测试脚本
五、系列总结
一、序言
第二篇中我们先容了怎么在51testing论坛网站（http://bbs.51testing.com）上完成一个自 动发帖的测试脚本。那么在这第三篇，也便是全体《Puppeteer自动化测试大略单纯入门教 程》系列的末了一篇文章中，我们将结合PageObject设计模式和Mocha测试框架来让这个 脚本更模块化和构造化，使其真正变成一个自动化测试工程项目。
二、PageObject设计模式
Page Object Model是自动化测试领域最著名的一种工程设计模式，最早的观点由Selenium项
目的创始人之一Simon Stewart于2006年提出，之后便广泛运用于险些所有自动化测试项目 中，可见在软件测试领域工程师们对这种设计模式非常认可。大家在网上可以找到无数关于 PO模式的先容，我在这里就不摧残浪费蹂躏篇幅赘述。
我们的项目在利用了PO设计模式之后，用例脚本中将不会涌现详细的定位元素和测试数据， 它们会被分类存放到相应的页面文件中，我们写不同的用例脚本时要用到什么元素或数据直接 找到干系页面文件并从中调用它们就行了，这样我们的定位元素和测试数据就可以复用且相称
好掩护。
举一个我们在第二篇写过的一个场景例子：登录功能。我们登录的步骤一样平常便是输入用户名
+密码，然后点【登录】就完成了，那这里的【用户名】输入框、【密码】输入框和【登录】 按钮三个定位元素我们就可以写到一个叫LoginPage的文件中，用户数据的话一样平常也可以写在 这个文件中，有人会再新建一个TestData目录另作存放，这样实现了定位元素和测试数据也相 互隔离也行。
//loginPage.js locators: {
usernameInputCss: '#ls_username', passwordInputCss: '#ls_password',
loginBtnCss: 'button[type="submit"].pn.vm', nameTextCss: '.vwmy',
logoutBtnCss: '#um p:nth-child(2) > a:last-child',
logoutMsgCss: '#messagetext',
},
testData: {
url: 'http://bbs.51testing.com',
username: 'tino',
password: 'xxx',
}
//testcase.js
await page.type(homePage.locators.usernameInputCss,
homePage.testData.username);//输入用户名
await page.type(homePage.locators.passwordInputCss,
homePage.testData.password);//输入密码
await page.click(homePage.locators.loginBtnCss);//点击【登录】按钮
await page.waitForSelector(homePage.locators.nameTextCss);//验证是否登录成功
三、Mocha测试框架Mocha是一款JavaScripts测试框架，它就即是Python界的Uni吐est和Java界的JUnit，只不过后两者是已经集成在各自措辞中了，而Mocha是须要安装的。实在JS有很多测试框架，除了 Mocha还有Jest、Jasmine、CasperJS等，这里先容Mocha是由于它简洁的语法和优雅的风格， 更便于我们学习。
1. 安装
在项目目录下实行 npm install mocha 安装或 npm install --global mocha 全局安装，这里
我建议是全局安装，这样运行测试用例脚本时可以不用指定路径直接写 mocha xxx.js 。
2. 示例脚本
官网（ https://mochajs.org/#getting-started ）上示例脚本如下：
var assert = require('assert'); describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() { assert.equal([1, 2, 3].indexOf(4), -1);
});
});
});
代码第一行引入的还是Node.js自带的断言库，但Mocha是支持任何一个第三方断言库的，下 载你喜好的断言库并导入就可以在脚本中利用：
第二行开始是示例脚本正文， describe() 是指测试套件，单引号内的是套件名， it() 是指测 试用例，单引号内的是用例名， describe() 内还可以嵌套 describe() ， it() 则是可以有并 列多个意味着测试套件内有多个测试用例，如果 describe() 内只有一个 it() ，那套件名和用 例名基本上可以写成一样。末了一行代码是断言语句。
3. 钩子函数Mocha的钩子函数有4个： before() 、 after() 、 beforeEach() 和 afterEach() ，看名字就 知道它们的浸染和Uni吐est里的 setUp 和 tearDown 是一样的，用来给测试用例实行做前置操作
和清理操作，来看看官方给出的描述：
四、修正脚本
理解了PO设计模式和Mocha框架之后，接下来我们就要改造上一篇文章中利用的51testing论 坛网站（http://bbs.51testing.com）测试脚本，只不过我把发帖用例去掉，换成退出登录的用 例，这样能使代码大略些。
1. 自定义浏览器
这里我新建了个名为browser.js的文件，里面自定义了2个不同尺寸大小的浏览器，一个是默认 尺寸，一个是最大化尺寸，我可以在用例脚本中任意调用一个来利用。这里要把稳，要把方法 名通过 module.exports 来导出，否则将无法在别的文件中调用：
//browser.js
const puppeteer = require('puppeteer');
module.exports = { browser_default, browser_max
}//导出模块
async function browser_default(){
const browser = await puppeteer.launch({ headless: false,
slowMo: 100, executablePath:
`C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe`
});
return browser;
}
async function browser_max(){
const browser = await puppeteer.launch({ headless: false,
slowMo: 100, executablePath:
`C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe`,
args: [
'--window-size=1920,1080',
],
defaultViewport: null
});
return browser;
}
2. 完善用例脚本将第二节中的PO文件（存放定位元素和测试数据）和测试用例脚本加以完善，把稳PO文件中 的所有内容也须要导出供调用：
//homePage.js module.exports = {
locators: {
usernameInputCss: '#ls_username', passwordInputCss: '#ls_password', loginBtnCss: 'button[type="submit"].pn.vm', nameTextCss: '.vwmy',
logoutBtnCss: '#um p:nth-child(2) > a:last-child', logoutMsgCss: '#messagetext',
},
testData: {
url: 'http://bbs.51testing.com', username: 'tino',
password: 'xxx',
},
assertMsg: {
logoutMsgTxt: '您已退出站点，现在将以游客身份转入退出前页面，请稍候…… '
}
}
//51testing.js
const browser_max = require('../common/browser.js').browser_max;//导入自定义浏览器 const homePage = require('../pageObjects/homePage.js');//导入定位元素
describe('51testing', async () => { let browser, page;
before(async () => {
browser = await browser_max();//利用最大化浏览器 page = await browser.newPage();
})
after(async () => {
await browser.close();
})
it('login', async () => {
await page.goto(homePage.testData.url);
await page.type(homePage.locators.usernameInputCss, homePage.testData.username);
await page.type(homePage.locators.passwordInputCss, homePage.testData.password);
await page.click(homePage.locators.loginBtnCss);
await page.waitForSelector(homePage.locators.nameTextCss);
})
it('logout', async () => {
await page.click(homePage.locators.logoutBtnCss);
await page.waitForSelector(homePage.locators.usernameInputCss);
})
})
3. 所有项目文件总览
四、实行测试脚本
实行之前有两点须要把稳：由于Mocha有一个默认的运行用例韶光2S，超过这个韶光如果用例 还没实行完将会被剖断为失落败，以是我们在实行命令中加一个参数 --timeout 30000 ，这里的 韶光是HS（毫秒）。其余一点是Mocha会实行test目录下的测试用例脚本，所有我们约定俗成 是在工程中新建一个 test 的目录，然后把所有测试用例脚本都放进去，这样就可以在事情目 录下直策应用 mocha 命令运行脚本。
以下是脚本实行情形，实行之前我把利用的浏览器改成了默认大小的浏览器，这样能方便大家 看到代码编辑器Terminal中的一些输出信息：
我们可以看到两个测试用例 login 和 logout 已经实行完毕，全部通过，并且在实行前后也顺 利实行了启动和关闭浏览器操作。
五、系列总结
到此，连续三篇的《Puppeteer自动化测试大略单纯入门教程》就结束了，我们先容了Puppeteer的 安装、利用和大略运用，还有一些自动化测试项目中所涉及到的一些知识。实在Puppeteer在 海内算是一款冷门的自动化测试工具，但由于它是Google出品，以是它是现在市情上操控 Chrome浏览器能力最强的自动化测试工具，功能十分强大，它还有很多其它高等的玩法，想 理解的话就辞官网上（ https://pptr.dev/ ）看看吧。其余它还是爬虫工程师的选择之一，它 也有Python版本——Pyppeteer，会写Python的小伙伴可以考试测验以下。
末了附上一张Puppeteer高清壁纸~祝大家玩得愉快！
