使用 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