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

您所在的位置：网站首页 › protractor怎么读 › 使用 Protractor、Cucumber 和 Typescript 开发自动化测试项目

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

2023-12-12 18:29| 来源: 网络整理| 查看: 265

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

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

前提条件

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

Java JDK 1.8: 来支持运行 Selenum serverNode.js TLS version: 来支持运行 protractorVisual 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

【本文地址】

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

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

今日新闻

推荐新闻