Puppeteer：被低估的自动化测试利器，功能太强大了！（2）

lsekfe

一、前言

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



二、设计测试用例

操作步骤	预期结果
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. 验证登录状态
登录成功后，找到已登录状态下的首页的一个特有元素作为登录成功的判断依据：

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

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




五、总结
贴上所有代码，并附上注释：

1. <font face="微软雅黑" size="3">const puppeteer = require('puppeteer'); const assert =  require('assert');//导入断言库
   
2. 
   
3. (async () => {
   
4. const browser = await puppeteer.launch({ headless: false,
   
5. slowMo: 100,
   
6. //降低脚本执行速度，这个参数在执行脚本的时候相当有用，因为Puppeteer的执行相当快，会引发不少问题 executablePath:
   
7. `C:\\Program  Files\\Google\\Chrome\\Application\\chrome.exe`,
   
8. 
   
9. 
   
10. 
    
11. 
    
12. 
    
13. 
    
14. 
    
15. });
    
16. 
    
17. args: [
    
18. '--window-size=1920,1080',//设置浏览器尺寸，这里这两个数字是我显示器的分辨率
    
19. ],
    
20. defaultViewport:  null//设置页面为最大分辨率（与浏览器尺寸保持同步）
    
21. 
    
22. 
    
23. const page = await browser.newPage();
    
24. await page.goto('http://bbs.51testing.com'); await page.type('#ls_username', 'tino'); await page.type('#ls_password', 'xxx');
    
25. await page.click('button[type="submit"].pn.vm');
    
26. await page.waitForSelector('.vwmy');
    
27. 
    
28. await page.click('h2>a[href="forum-279-1.html"]'); await page.click('img[alt="发新帖"]');
    
29. await page.type('.fwinmask #subject',  'pptr标题');
    
30. await page.type('.fwinmask .area textarea', 'pptr内容'); await page.click('#postsubmit');
    
31. await page.waitForSelector('.alert_info p', 3000);
    
32. //等待弹窗，最大等待时间为3s，如这里不填入时间则默认为30s
    
33. 
    
34. 
    
35. const alertmsg = await page.$eval('.alert_info p', (txt) => txt.textContent); assert.equal(alertmsg,  '新主题需要审核，您的帖子通过审核后才能显示', '发新帖失败！');
    
36. 
    
37. await browser.close(); console.log('用例执行完毕！');
    
38. })();
    
39. </font>

复制代码

最后建议大家经常查阅Puppeteer的官方文档API，尤其是page
（ https://pptr.dev/api/puppeteer.page ），基本上大多数核心的内容都在page中，我们看到上面的代 码也基本上都是page.xx这种操作。