【原创】Puppeteer 之自动化测试浅梦之旅（三）

lsekfe · 发表于 2024-9-10 11:37:53

一、前言
第二篇中我们介绍了怎么在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高清壁纸~祝大家玩得开心！

		自动登录	找回密码
密码			(注-册)加入51Testing

【原创】Puppeteer 之自动化测试浅梦之旅（三）

本帖子中包含更多资源

站长推荐 /1