CukeTest+Puppeteer的Web自动化测试

一、初识BDD、Cucumber(黄瓜)、CukeTest

  行为驱动开发(Behavior Driven Development,BDD)。行为驱动开发能够保持文档和测试脚本的一致性,便于维护、也便于业务人员和技术人员沟通,始终保持应用软件的技术实现反映业务的需求。

Cucumber是行为驱动开发最流行的一个框架,它使用自然语言描述的行为来驱动测试代码,也支持多种语言,如Ruby、Python、JavaScript、Java等。

  Cucumber源码:https://github.com/cucumber/cucumber-js

  CukeTest是开发测试自动化脚本的一个灵巧方便的工具。用户可以使用此工具快速创建BDD(行为驱动开发, Behavior Driven Development)测试脚本。它集成了Cucumber框架和JavaScript,可视化编辑,调试功能,并有多个html报告模板可供选择。同时它能够

实现了各种类型应用的自动化,包括Web、Windows、移动设备、API等等。

  CukeTest使用文档:http://www.cuketest.com/zh-cn/

二、Cucumber如何运行的?

  • Features:剧本(测试项的目运行文件都在features目录下,以 .feature 结尾的为剧本文件,一个剧本文件中可以包含多个场景,一个场景包含多个操作步骤。)
  • Scenarios:场景(每个剧本可以有一个或多个场景)
  • Steps:步骤(每个场景由一个或多个步骤组成)
  • Step Definitions:步骤定义(步骤具体代码实现方法或定义,.feature 文件中描述的业务步骤要 运行起来,需要根据业务场景定义操作行为 。)
  • Support Code:支持代码(公共方法或函数可提出作调用)
  • Automation Library:自动化库(自动化API支持)
  • Business Facing:面向业务(自然语言表示的测试用例,开发可读懂)
  • Technology Facing:面向技术(技术代码语言表示的测试代码,开发可读懂)

三、开发工具介绍

  CukeTest和Puppeteer

  Cucumber用自然语言结合JavaScript编写的自动化测试脚本。因为它们是用自然语言编写的,所以你团队中的任何人都可以阅读它们,而且可以用它们来帮助改善团队之间的沟通、协作和信任。

  Puppeteer是一个Node库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless模式运行,但是可以通过修改配置文件运行“有头”模式。

四、CukeTest

创建新项目时,5个项目模板可选择:

  Basic:基本的Cucumber.js项目

  Web:使用selenium-webdriver的Web测试项目

  API:API测试项目

  Windows: Windows测试项目

  Mobile: iOS或安卓应用测试项目

选择Basic模板,新建项目,CukeTest操作页面

例:

1、剧本

  CukeTest是一个强大的剧本文件(或特性文件)编辑器。剧本文件后缀名为*.feature,以(.feature)结尾的文档叫Gherkin文档或剧本文档。在编辑剧本文件时,它提供了2种编辑模式,可视模式和文本模式。

重要知识点:

  1、编辑模式:可视模式和文本模式

  2、场景:添加场景、编辑场景、更改场景类型(背景、场景、场景大纲)

  3、背景:背景允许你在单个剧本中的所有场景中添加“背景”。背景就是一个无标题的场景,包含许多步骤。不同之处在于它们运行的时机:背景在每个场景之前运行,但是在场景的“Before” hook(钩子函数)之后运行。

  4、场景大纲:场景大纲通常用来实现数据驱动的自动化测试

例:

  5、步骤:添加步骤(追加、插入)、编辑步骤、文档字符串(步骤的注释描述定义)、步骤表

重要知识点:

  (1)文档字符串数据将作为参数传递给步骤定义

  (2)步骤表是步骤中的表格数据,它将作为参数传递给步骤定义

  (3)可以选择在步骤中添加文档字符串(Doc String) 或步骤表格(Table) ,二者只能选其一。

  6、标签:标签过滤、执行时标签过滤。(当有很多场景的时候,我们有时只需要运行其中的个别场景,我们可以给不同的场景或剧本添加标签,然后运行的时候可通过标签过滤想要运行的场景。)

例:

  标签表达式:http://www.cuketest.com/zh-cn/cucumber/tag-expressions.html

  标签表达式是一个内嵌的布尔表达式。

例:运行配置文件,标签过滤只运行openPage和pageTwo场景。

2、代码编辑

  剧本对应的测试脚本的编写。

重要知识点:

  1、代码/剧本匹配:剧本步骤与代码的匹配

  2、具体步骤代码的实现(cucumber,puppeteer的API,JavaScript等)

  3、步骤定义:

步骤定义是Gherkin语言写的剧本文件和实际被测试的系统之间的粘合剂. 使用 Given, When, Then. 正则表达式中的匹配组匹配到的结果会作为参数传递给步骤定义。

  4、步骤修改后的代码更新:跳转到原先的定义、更新原先的定义代码、创建新的定义

  5、npm包的管理:包管理器(添加/删除)

  注意:新添加的npm包自动配置用最新的版本,如果您对某个包的版本有特殊要求,请在包列表保存后,手动编辑package.json, 设定需要的版本。

  npm包管理新增后,还得进行npm install 的安装。并不是直接就安装好。只是一个目录而已。或直接通过npm install安装,不用npm包管理

  6、代码工具箱:cucumber一些自带封装的方法(一般用不到,我们用的puppeteer)和cucumber的hook函数

  7、智能提示和自动完成

  8、验证项目:可以帮助用户检查项目中可能出现的各种错误或警告

例:

  9、Hooks(钩子):Hooks(钩子) 用于在每个场景之前和之后设置和清理环境

重点知识点:

  (1)如果定义了多个Before hooks,会按它们被定义的顺序执行。

  (2)多个 After hooks 按照它们被定义的相反顺序执行。

  (3)BeforAll / AfterAll 。所有场景之前或之后完成一些设置/清除工作

  10、超时:默认情况下,异步hook和步骤在5000毫秒后超时。这个可以全局修改:

var {setDefaultTimeout} = require('cucumber');
setDefaultTimeout(60 * 1000);

  超时:http://www.cuketest.com/zh-cn/cucumber/support_files/timeouts.html

  执行及测试报告

  CukeTest的可视化界面使你能够以多种方式运行您的项目或你的部分脚本

重要知识点:

  1、运行项目:运行单个剧本、运行单个场景、运行单个JS文件等

  2、运行配置

   3、执行测试报告

五、Puppeteer

  Puppeteer是NPM库,它提供了NodeJS高级API来控制Chrome。Puppeteer 默认以无头(无界面)方式运行,但也可以配置为运行有界面的Chrome。

使用Puppteer 可以自动化在浏览器中手动执行的大多数事情。比如:

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA(单页面应用程序)并生成预渲染内容(即“SSR”(服务器端渲染)。
  • 自动化表单提交、UI测试、键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
  • 捕获网站的时间线跟踪,以帮助诊断性能问题。
  • 测试Chrome扩展程序。

Puppeteer安装

  在项目中安装puppeteer:npm install puppeteer

  运行:npm install puppeteer,安装的是puppeteer最新的版本

 重点注意:版本兼容问题

  当puppeteer3.0.0和node12.13.0时,运行有报错,提示让你把node更新至最新版本。最新node为14,更新node版本可能会导致其他问题。建议安装puppeteer时用2.1.1。

  兼容报错:(node:13024) ExperimentalWarning: The fs.promises API is experimental

  命令:npm install puppeteer@2.1.1

Puppeteer常用的API

class:Puppeteer

方法名称 方法说明
puppeteer.launch(options) 创建一个Browser实例。创建浏览器实例Brower对象,启动浏览器

class:Browser

方法名称 方法说明
browser.newPage() 创建一个 Page 实例。通过Brower对象创建页面Page实例对象
browser.close() 关闭浏览器
browser.pages() 获取所有打开的Page实例。打开多个Tab页处理时切换page操作页面

class:Page

方法名称 方法说明
page.goto(url) 打开指定网站
page.screenshot(options) 当前页面截图
page.$(selector) 获取单个元素
page.$$(selector) 获取一组元素
page.click() 点击一个元素
page.waitFor() 设置等待或超时时间
page.evaluate(pageFunction, …args) pageFunction 表示要在页面执行的函数, args 表示传入给 pageFunction 的参数。如引用外部JS时使用