51Testing软件测试论坛
标题:
【原创】Puppeteer 之自动化测试浅梦之旅(三)
[打印本页]
作者:
lsekfe
时间:
2024-9-10 11:37
标题:
【原创】Puppeteer 之自动化测试浅梦之旅(三)
一、前言
第二篇中我们介绍了怎么在51testing论坛网站(
http://bbs.51testing.com
)上完成一个自 动发帖的测试脚本。那么在这第三篇,也就是整个《Puppeteer自动化测试简易入门教 程》系列的最后一篇文章中,我们将结合PageObject设计模式和Mocha测试框架来让这个 脚本更模块化和结构化,使其真正变成一个自动化测试工程项目。
二、PageObject设计模式
[attach]148100[/attach]
Page Object Model是自动化测试领域最著名的一种工程设计模式,最早的概念由Selenium项
目的创始人之一Simon Stewart于2006年提出,之后便广泛应用于几乎所有自动化测试项目 中,可见在软件测试领域工程师们对这种设计模式非常认可。大家在网上可以找到无数关于 PO模式的介绍,我在这里就不浪费篇幅赘述。
我们的项目在使用了PO设计模式之后,用例脚本中将不会出现具体的定位元素和测试数据, 它们会被分类存放到相应的页面文件中,我们写不同的用例脚本时要用到什么元素或数据直接 找到相关页面文件并从中调用它们就行了,这样我们的定位元素和测试数据就可以复用且相当好维护。
[attach]148105[/attach]
举一个我们在第二篇写过的一个场景例子:登录功能。我们登录的步骤一般就是输入用户名
+密码,然后点【登录】就完成了,那这里的【用户名】输入框、【密码】输入框和【登录】 按钮三个定位元素我们就可以写到一个叫LoginPage的文件中,用户数据的话一般也可以写在 这个文件中,有人会再新建一个TestData目录另作存放,这样实现了定位元素和测试数据也相 互隔离也行。
<font face="微软雅黑" size="3">//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);//验证是否登录成功
</font>
复制代码
三、Mocha测试框架
[attach]148106[/attach]
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
)上示例脚本如下:
<font face="微软雅黑" size="3">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);
});
});
});
</font>
复制代码
代码第一行引入的还是Node.js自带的断言库,但Mocha是支持任何一个第三方断言库的,下 载你喜欢的断言库并导入就可以在脚本中使用:
[attach]148107[/attach]
第二行开始是示例脚本正文, describe() 是指测试套件,单引号内的是套件名, it() 是指测 试用例,单引号内的是用例名, describe() 内还可以嵌套 describe() , it() 则是可以有并 列多个意味着测试套件内有多个测试用例,如果 describe() 内只有一个 it() ,那套件名和用 例名基本上可以写成一样。最后一行代码是断言语句。
3. 钩子函数
Mocha的钩子函数有4个: before() 、 after() 、 beforeEach() 和 afterEach() ,看名字就 知道它们的作用和Uni吐est里的 setUp 和 tearDown 是一样的,用来给测试用例执行做前置操作和清理操作,来看看官方给出的描述:
[attach]148108[/attach]
四、修改脚本
了解了PO设计模式和Mocha框架之后,接下来我们就要改造上一篇文章中使用的51testing论 坛网站(
http://bbs.51testing.com
)测试脚本,只不过我把发帖用例去掉,换成退出登录的用 例,这样能使代码简单些。
1. 自定义浏览器
这里我新建了个名为browser.js的文件,里面自定义了2个不同尺寸大小的浏览器,一个是默认 尺寸,一个是最大化尺寸,我可以在用例脚本中任意调用一个来使用。这里要注意,要把方法 名通过 module.exports 来导出,否则将无法在别的文件中调用:
<font face="微软雅黑" size="3">//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;
}
</font>
复制代码
2. 完善用例脚本
将第二节中的PO文件(存放定位元素和测试数据)和测试用例脚本加以完善,注意PO文件中 的所有内容也需要导出供调用:
<font face="微软雅黑" size="3">//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);
})
})
</font>
复制代码
3. 所有项目文件总览
[attach]148109[/attach]
四、执行测试脚本
执行之前有两点需要注意:由于Mocha有一个默认的运行用例时间2S,超过这个时间如果用例 还没执行完将会被判定为失败,所以我们在执行命令中加一个参数 --timeout 30000 ,这里的 时间是HS(毫秒)。另外一点是Mocha会执行test目录下的测试用例脚本,所有我们约定俗成 是在工程中新建一个 test 的目录,然后把所有测试用例脚本都放进去,这样就可以在工作目 录下直接使用 mocha 命令运行脚本。
[attach]148110[/attach]
以下是脚本执行情况,执行之前我把使用的浏览器改成了默认大小的浏览器,这样能方便大家 看到代码编辑器Terminal中的一些输出信息:
[attach]148111[/attach]
我们可以看到两个测试用例 login 和 logout 已经执行完毕,全部通过,并且在执行前后也顺 利执行了启动和关闭浏览器操作。
五、系列总结
到此,连续三篇的《Puppeteer自动化测试简易入门教程》就结束了,我们介绍了Puppeteer的 安装、使用和简单应用,还有一些自动化测试项目中所涉及到的一些知识。其实Puppeteer在 国内算是一款冷门的自动化测试工具,但由于它是Google出品,所以它是现在市面上操控 Chrome浏览器能力最强的自动化测试工具,功能十分强大,它还有很多其它高级的玩法,想 了解的话就去官网上(
https://pptr.dev/
)看看吧。另外它还是爬虫工程师的选择之一,它 也有Python版本——Pyppeteer,会写Python的小伙伴可以尝试以下。
最后附上一张Puppeteer高清壁纸~祝大家玩得开心!
[attach]148112[/attach]
欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)
Powered by Discuz! X3.2