51Testing软件测试论坛

标题: Puppeteer:被低估的自动化测试利器,功能太强大了!(2) [打印本页]

作者: lsekfe    时间: 2024-6-25 10:40
标题: Puppeteer:被低估的自动化测试利器,功能太强大了!(2)
一、前言

第一篇中我们介绍了如何安装和简单使用Puppeteer,接下来第二篇我将使用我们测试人员熟悉的
51testing论坛网站(h仕p://bbs.51testing.com)来完成一个简单的自动化测试脚本。

[attach]147570[/attach]


二、设计测试用例
操作步骤 预期结果
1.访问论坛首页 访问成功
2.登录 登录成功
3.进入“自动化测试工具及框架”板块并发表一个帖子 帖子发表成功

三、编写测试脚本

根据以上用例,我们编写测试脚本。


1. 访问论坛首页
  1. <font face="微软雅黑" size="3">await page.goto('http://bbs.51testing.com');</font>
复制代码
2. 登录操作
分别找到“用户名”输入框、“密码”输入框和“登录”按钮的定位元素,然后输入对应信息执行登录操作:


  1. <font face="微软雅黑" size="3">await page.type('#ls_username', 'xx'); await page.type('#ls_password', 'xx');
  2. await page.click('button[type="submit"].pn.vm');
  3. </font>
复制代码
3. 验证登录状态
登录成功后,找到已登录状态下的首页的一个特有元素作为登录成功的判断依据:

[attach]147571[/attach]
  1. <font face="微软雅黑" size="3">await page.waitForSelector('.vwmy');</font>
复制代码
4. 发帖子
在“自动化测试工具及框架”板块中发一个新帖子:

  1. <font face="微软雅黑" size="3">await page.click('h2>a[href="forum-279-1.html"]');//进入“自动化测试工具及框架”板块 await  page.click('img[alt="发新帖"]');//点击【发新帖】按钮
  2. await page.type('.fwinmask #subject',  'pptr标题');//输入标题
  3. await page.type('.fwinmask .area textarea', 'pptr内容');//输入内容 await  page.click('#postsubmit');//点击【发表帖子】按钮
  4. </font>
复制代码
5. 断言
发表成功后会有一个提示需要审核的弹窗,我们对其中的弹窗提示文字做断言即可。另外这里要提一下, 由于本段脚本没有使用断言库,所以采用了Node.js自带的assert断言方法:



  1. <font face="微软雅黑" size="3">const alertmsg = await page.$eval('.alert_info p', (txt) => txt.textContent); assert.equal(alertmsg,  '新主题需要审核,您的帖子通过审核后才能显示', '发新帖失败!');</font>
复制代码


6. 关闭浏览器

await browser.close(); console.log('用例执行完毕!');//打印输出脚本执行情况到Terminal



四、执行测试脚本
以下是脚本执行情况:



[attach]147572[/attach]
五、总结
贴上所有代码,并附上注释:

  1. <font face="微软雅黑" size="3">const puppeteer = require('puppeteer'); const assert =  require('assert');//导入断言库

  2. (async () => {
  3. const browser = await puppeteer.launch({ headless: false,
  4. slowMo: 100,
  5. //降低脚本执行速度,这个参数在执行脚本的时候相当有用,因为Puppeteer的执行相当快,会引发不少问题 executablePath:
  6. `C:\\Program  Files\\Google\\Chrome\\Application\\chrome.exe`,







  7. });

  8. args: [
  9. '--window-size=1920,1080',//设置浏览器尺寸,这里这两个数字是我显示器的分辨率
  10. ],
  11. defaultViewport:  null//设置页面为最大分辨率(与浏览器尺寸保持同步)


  12. const page = await browser.newPage();
  13. await page.goto('http://bbs.51testing.com'); await page.type('#ls_username', 'tino'); await page.type('#ls_password', 'xxx');
  14. await page.click('button[type="submit"].pn.vm');
  15. await page.waitForSelector('.vwmy');

  16. await page.click('h2>a[href="forum-279-1.html"]'); await page.click('img[alt="发新帖"]');
  17. await page.type('.fwinmask #subject',  'pptr标题');
  18. await page.type('.fwinmask .area textarea', 'pptr内容'); await page.click('#postsubmit');
  19. await page.waitForSelector('.alert_info p', 3000);
  20. //等待弹窗,最大等待时间为3s,如这里不填入时间则默认为30s


  21. const alertmsg = await page.$eval('.alert_info p', (txt) => txt.textContent); assert.equal(alertmsg,  '新主题需要审核,您的帖子通过审核后才能显示', '发新帖失败!');

  22. await browser.close(); console.log('用例执行完毕!');
  23. })();
  24. </font>
复制代码
最后建议大家经常查阅Puppeteer的官方文档API,尤其是page
https://pptr.dev/api/puppeteer.page ),基本上大多数核心的内容都在page中,我们看到上面的代 码也基本上都是page.xx这种操作。











欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2