使用 Protractor、Cucumber 和 Typescript 开发自动化测试项目

Github Project: https://github.com/lijiachuan1982/protractor-cucumber-typescript

这是一个基础的项目/框架，用来使用 Protractor、Cucumber 和 Typescript 进行自动化测试，使用 Visual Studio Code 做为开发工具。

前提条件

在使用这个框架前，你需要先安装好下边的软件/工具：

• Java JDK 1.8: 来支持运行 Selenum server
• Node.js TLS version: 来支持运行 protractor
• Visual Studio Code: 作为开发工具
• VS Code Extension: Cucumber (Gherkin) Full Support: 具有自动补足 Gherkin 代码以及将 Gherkin 语句跟对应的 step definition 相关联

快速开始

想要快速尝试该框架并探索 Protractor 和 Cucumber 是如何工作的，可以 clone 这个项目代码：

git clone https://github.com/lijiachuan1982/protractor-cucumber-typescript.git

在 VS Code 中打开下载的文件夹，然后在 VS Code 中打开一个 terminal 窗口(Ctrl+Shift+`)。

因为 protractor 是一个 Node.js 的程序，使用 npm install 安装所有的依赖库。

要运行 Selenium Server，需要使用下边的命令下载相关的二进制文件(第一次安装的时候可能会报错，重新再运行一次应该可以解决问题)：

.\node_modules\.bin\webdriver-manager update

使用下边的命令启动 Selenium Server：

.\node_modules\.bin\webdriver-manager start

如果 Selenium Server 成功启动的话，在 terminal 窗口中会看到下边的信息：

[SeleniumServer.boot] - Selenium Server is up and running on port 4444

我们需要保持当前的 terminal 窗口给这个 Selenium Server，点击 terminal 面板中的 “+” 图标打开一个新的窗口。在新的窗口中使用 npm test 来开始一个自动化测试的过程，这个示例会访问 Baidu.com 然后进行一个关键字搜索。检索过程结束后，在 reports 文件夹下会生成 cucumber report 并在 reports\html\screenshots 中存有截图。

背后的逻辑

如果想了解更多的底层的工具和技术，可以继续阅读。在下边的部分中，我们会详细介绍这个框架的不同部分。

Code 结构

Root
+-- .vscode
| +-- settings.json    // VS Code 关于支持 Cucumber 的配置
+-- node_modules       // 通过 npm install 安装的依赖包
+-- outputjs           // 编译后的 .js 文件存放目录
+-- reports            // Cucumber html reports
+-- src                // 源代码
| +--features          // 使用 Gherkin 编写的 Cucumber feature 文件
| +--pages             // Page 对象文件
| +--steps             // Step 定义文件
| +--utils             // Utility 方法
| +--conf.ts           // Protractor 和 cucumber 的配置
| +--reporter.ts       // Cucumber report 的配置和功能
| +--timeout.ts        // Cucumber step 超时配置
| +--typings.d.ts      // .json 的类型文件
+-- testdata           // Json 测试数据
+-- package.json
+-- README.md
+-- tsconfig.json      // Typescript 配置

示例都做了什么

这个示例做了以下三步：

• 打开 baidu.com 首页
• 在检索框中输入关键字并点击检索按钮
• 确认返回的每个检索结果标题中包含关键字

编译 .ts 为 .js

因为我们将所有的源代码放在了 src 文件夹下，所以我们需要让 Typescript 知道只需要把 src 文件夹下的 .ts 文件编译为 .js。需要在 Typescript 的配置文件 tsconfig.json 的 compilerOptions 部分，加入下边的代码：

"rootDir": "src"

为了保持更好的文件夹结构，我们将源代码和生成的 .js 代码分别放在不同的文件夹下。需要在 Typescript 的配置文件 tsconfig.json 的 compilerOptions 部分，加入下边的代码：

"outDir": "outputjs"

Angular 还是 Non-Angular

Protractor 默认会将网站看作是 Angular 的网站，如果你测试一个非 Angular 网站的话，会遇到下边的错误：

Error: Angular could not be found on the page https://abc.com/. If this is not an Angular application, you may need to turn off waiting for Angular.
Please see 
https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load

为了解决这个问题，在 Protractor 的配置文件(conf.ts) 的 onPrepare 部分添加下边的代码:

browser.waitForAngularEnabled(false);

5000 million seconds timeout

Cucumber step 默认会以 5 秒钟(5000 毫秒) 作为超时时长，如果测试的步骤不能在 5 秒中之内完成，会遇到下边的错误：

Error: function timed out, ensure the promise resolves within 5000 milliseconds

为了解决这个问题，创建一个名为 timeout.ts 的文件，用下边的代码设置全局的超时时间：

import { setDefaultTimeout } from "@cucumber/cucumber"

setDefaultTimeout(60 * 1000);

然后在 conf.ts 的 cucumberOpts/require 部分添加这个 timeout 文件，所以新的 timeout 时间就会被用在测试当中了。

仅当元素在页面中显示之后再进行操作

当前的网站很多会使用异步的方式来动态加载内容。当我们想要对一个元素进行操作（click、sendkey 等）的时候，我们需要确保这个元素是要在页面中显示的。

这个问题可以通过 protractor 的 ExpectedConditions 以及 presenceOf 的条件来解决。当我们需要找到一个元素的时候，browser 会等到这个元素在页面上出现后才会继续。

这个功能写在了名为 pageElement.ts 的 utils 文件中。可以参考示例的 step definition 来了解如何使用。

Cucumber reporting 和 screenshot

我们使用 cucumber-html-reporter 类库来生成 cucumber reports，并且使用 mkdirp 类库来创建 report 目录（如果它不存在的话）。

Reporting 相关的功能是在 reporter.ts 文件以及 conf.ts 中定义的：

• 在 cucumberOpts 部分，指定了 report 的格式
• 在 onPrepare 部分，调用了创建 report 文件夹的功能 Reporter.createDirectory(outputDir)
• 在 onComplete 部分，调用了创建 report 的功能 Reporter.createHTMLReport()

Screenshot 相关的功能是在 hooks.ts 中定义的，它使用了 Cucumber 的 After hook。在 conf.ts 的 cucumberOpts 部分，将 hook 文件添加到了 require 的部分，所以会在程序启动的时候被加载到程序中。

使用 Chai 的 Assertation

我们使用了 Chai 的 assertation 来确定结果是不是跟期望的是一样的。

使用 .json 文件作为测试数据源

为了使用 Json 文件作为测试数据源，我们需要创建一个 typings.d.ts 的文件并把下边的内容放到文件中：

declare module "*.json" {
    const value: any;
    export default value;
}

在代码中，可以使用 import * as keyword from '../../testdata/keyword.json' 将数据引入到代码中。

以上内容参考了一个外国小哥儿的一系列视频：
Protractor e2e testing Intro _ Step by step setup to run tests using typescript

Setup for protractor e2e testing on non angular sites

Handle WebElement using Protractor - Part1 - textbox button and alerts

Handle WebElement using Protractor - Part2 - dropdown and alerts

Handle WebElement using Protractor - Part3 - table or ng-repeater

Implement page object model (POM) in protractor typescript

Utility methods for browser actions in a better way in Protractor TS

Use .JSON and .ts file as test data source for protractor typescript e2e

Cucumber for BDD - Part1

Cucumber for BDD - Part 2 _ All about Gherkin syntaxes

Configuring Protractor with Cucumber in VSCode _ Reporting

Implement Cucumber with PageObjectModel in Protractor