CukeTest+Puppeteer的Web自动化测试(二)
wuwei丶 人气:0上一篇我们讲了CukeTest+Puppeteer的相关理论知识,带大家认识熟悉了CukeTest如何运行与如何编写剧本,Puppeteer大体的理论体系与如何结合使用,但一直没有给大家进行上手实战操作。这一篇,我就带大家一起来实战燥起来~~~
测试页面以百度首页为例,我们用CukeTest+Puppeteer编写功能测试Demo,将上篇讲的相关知识点结合起来练手。
CukeTest官方文档:http://www.cuketest.com/zh-cn/
Puppeteer官方文档:https://zhaoqize.github.io/puppeteer-api-zh_CN/
一、实例1
功能测试:参数化形式打开多个网页
1、打开CukeTest我们来新建一个空项目,安装Node和Puppeteer,注意(两者版本兼容问题),上文中已提到过的。
2、编辑剧本相关参数
3、编写剧本对应的脚本
4、运行
如下图
剧本的文本如下
# language: zh-CN 功能: 百度首页 打开百度首页 @openPage 场景大纲: 页面打开 假如打开百度首页"<param1>" @pageOne 例子: | param1 | | https://www.baidu.com/ | | https://www.runoob.com/ | @pageTwo 例子: | param1 | | https://www.csdn.net/ | | https://www.cnblogs.com/ | @baiduSearch 场景: 百度首页搜索 打开百度首页,搜索'puppeteer',百度查询并截图保存结果 假如打开百度首页"https://www.baidu.com/" 当输入"puppeteer",点击百度一下 那么截图保存搜索结果
剧本对应的脚本
1 //引用cucumber和puppeteer,使用各自相关的API 2 const { 3 Given, 4 When, 5 Then 6 } = require('cucumber'); 7 const puppeteer = require('puppeteer'); 8 //默认情况下,异步hook和步骤在5000毫秒后超时,这个可以全局修改超时时长 9 const { 10 setDefaultTimeout 11 } = require('cucumber'); 12 setDefaultTimeout(60 * 1000); 13 //变量定义 14 let browser = null; 15 let page = null; 16 17 //// 你的步骤定义 ///// 18 19 Given("打开百度首页{string}", async function (arg1) { 20 /* 21 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 创建一个 Browser 对象。 22 创建一个 Browser 类的实例对象 23 executablePath:可运行 Chromium 或 Chrome 可执行文件的路径 24 headless: 是否以 无头模式 运行浏览器 25 defaultViewport: null, args: ['--start-maximized']:视图窗口最大化 26 defaultViewport选项设置为null以禁用800x600分辨率。它需要最大分辨率 27 ignoreDefaultArgs: ['--enable-automation']: 28 禁止展示chrome左上角有个Chrome正受自动软件控制,避免puppeteer被前端JS检测到 29 */ 30 browser = await puppeteer.launch({ 31 executablePath: 'D:\\Demo\\node_modules\\puppeteer\\.local-chromium\\win64-722234\\chrome-win\\chrome.exe', 32 headless: false, 33 defaultViewport: null, 34 args: ['--start-maximized'], 35 ignoreDefaultArgs: ['--enable-automation'] 36 }); 37 //创建一个新的Page对象 38 page = await browser.newPage(); 39 //打开链接 40 await page.goto(arg1); 41 //等待3s 42 await page.waitFor(3000); 43 //关闭chromium 44 await browser.close(); 45 });
运行:浏览器按顺序打开剧本中编辑的四个网页,打开一个网页后关闭浏览器,紧接着打开下一个。
二、实例2
功能:打开百度首页搜索,并保存截图。
在基于上面的实例1,接着编写场景2,如下图
场景对应的脚本:
1 //场景2:百度首页搜索 2 When("输入{string},点击百度一下", async function (arg1) { 3 //匹配定位元素,定位输入框元素,并输入'puppeteer' 4 await page.type('#kw', arg1); 5 //等待2s 6 await page.waitFor(2000); 7 //点击“百度一下”按钮 8 await page.click('#su'); 9 //等待3s 10 await page.waitFor(3000); 11 }); 12 13 Then("截图保存搜索结果", async function () { 14 //截图并保存,截图路径为path,截图类型可以是 jpeg 或者 png,默认 'png'. 15 await page.screenshot({ path: 'baiduHomeSearch.png' }); 16 //关闭chromium 17 await browser.close(); 18 });
加载全部内容