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目录另作存放,这样实现了定位元素和测试数据也相 互隔离也行。


  1. <font face="微软雅黑" size="3">//loginPage.js locators: {
  2. usernameInputCss: '#ls_username', passwordInputCss: '#ls_password',
  3. loginBtnCss: 'button[type="submit"].pn.vm', nameTextCss: '.vwmy',
  4. logoutBtnCss: '#um p:nth-child(2) > a:last-child',

  5. logoutMsgCss: '#messagetext',
  6. },
  7. testData: {
  8. url: 'http://bbs.51testing.com',
  9. username: 'tino',
  10. password: 'xxx',
  11. }


  12. //testcase.js
  13. await page.type(homePage.locators.usernameInputCss,
  14. homePage.testData.username);//输入用户名
  15. await page.type(homePage.locators.passwordInputCss,
  16. homePage.testData.password);//输入密码
  17. await  page.click(homePage.locators.loginBtnCss);//点击【登录】按钮
  18. await  page.waitForSelector(homePage.locators.nameTextCss);//验证是否登录成功
  19. </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 )上示例脚本如下:
  1. <font face="微软雅黑" size="3">var assert = require('assert'); describe('Array', function() {
  2. describe('#indexOf()', function() {
  3. it('should return -1 when the value is not present', function() { assert.equal([1, 2, 3].indexOf(4), -1);
  4. });
  5. });
  6. });
  7. </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 来导出,否则将无法在别的文件中调用:

  1. <font face="微软雅黑" size="3">//browser.js
  2. const puppeteer = require('puppeteer');


  3. module.exports = { browser_default, browser_max
  4. }//导出模块

  5. async function browser_default(){
  6. const browser = await puppeteer.launch({ headless: false,
  7. slowMo: 100, executablePath:
  8. `C:\\Program  Files\\Google\\Chrome\\Application\\chrome.exe`
  9. });
  10. return browser;
  11. }


  12. async function browser_max(){
  13. const browser = await puppeteer.launch({ headless: false,
  14. slowMo: 100, executablePath:
  15. `C:\\Program  Files\\Google\\Chrome\\Application\\chrome.exe`,
  16. args: [
  17. '--window-size=1920,1080',
  18. ],
  19. defaultViewport: null
  20. });
  21. return browser;
  22. }
  23. </font>
复制代码


2. 完善用例脚本
将第二节中的PO文件(存放定位元素和测试数据)和测试用例脚本加以完善,注意PO文件中 的所有内容也需要导出供调用:

  1. <font face="微软雅黑" size="3">//homePage.js module.exports = {
  2. locators: {
  3. usernameInputCss: '#ls_username', passwordInputCss: '#ls_password', loginBtnCss: 'button[type="submit"].pn.vm', nameTextCss: '.vwmy',
  4. logoutBtnCss: '#um p:nth-child(2) > a:last-child', logoutMsgCss: '#messagetext',
  5. },
  6. testData: {
  7. url: 'http://bbs.51testing.com', username: 'tino',
  8. password: 'xxx',

  9. },
  10. assertMsg: {
  11. logoutMsgTxt:  '您已退出站点,现在将以游客身份转入退出前页面,请稍候…… '
  12. }
  13. }


  14. //51testing.js
  15. const browser_max = require('../common/browser.js').browser_max;//导入自定义浏览器 const  homePage  = require('../pageObjects/homePage.js');//导入定位元素

  16. describe('51testing', async () => { let browser, page;

  17. before(async () => {
  18. browser = await browser_max();//使用最大化浏览器 page = await browser.newPage();
  19. })


  20. after(async () => {
  21. await browser.close();
  22. })


  23. it('login', async () => {
  24. await page.goto(homePage.testData.url);
  25. await page.type(homePage.locators.usernameInputCss, homePage.testData.username);
  26. await page.type(homePage.locators.passwordInputCss, homePage.testData.password);
  27. await page.click(homePage.locators.loginBtnCss);
  28. await  page.waitForSelector(homePage.locators.nameTextCss);
  29. })


  30. it('logout', async () => {
  31. await page.click(homePage.locators.logoutBtnCss);
  32. await  page.waitForSelector(homePage.locators.usernameInputCss);
  33. })
  34. })
  35. </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