开始使用Newbe.Pct-Web自动化测试

前篇介绍了，使用 Newbe.Pct 以前的准备工做。本篇将开始介绍如何使用本项目运行第一个测试用例。

阅前语

从本篇开始，读者将会接触到使用一些代码。但愿读者没必要纠结于语法自己。出现代码的地方都会伴有必定的解释，读者只须要关系代码起到的做用便可。

读者能够在查看过本篇的整体介绍，体验项目自己的所提供的功能，再来决定是否要学习语法。

下载模板

Web E2E 自动化测试其实是经过编写脚本对浏览器进行自动控制实现的。所以编写代码是必不可少的。而在长久的代码实践中，使用代码版本管理软件对代码进行管理是很是必要且正确的实践。

所以，建议开发者在使用本项目前，先学会使用一种代码版本控制软件。

对于使用Git的用户，能够经过Git克隆本项目的代码。可用的地址有：

• https://github.com/newbe36524/Newbe.Pct
• https://gitee.com/yks/Newbe.Pct 国内地址，中国大陆速度更快

若是读者使用的是其余的代码版本管理软件，或者尚未打算使用代码版本管理软件。

能够经过以上连接页面上的下载按钮，实现源码的下载。

源码下载以后，解压到读者本身的工做目录当中便可。

测试用例说明

首先，描述一下测试用例：

在谷歌浏览器中，使用 newbe 这个关键词在 必应搜索 国内版中进行搜索时，得到的第一条结果就是本站点。

简要分析，该测试用例包含有三个部分：

• 给定条件：搜索引擎为 必应搜索， 搜索关键词为 newbe，谷歌浏览器
• 操做步骤：使用 必应搜索 的文本搜索功能
• 预期结果：搜索到的第一条结果可以说明是本站点。

测试用例的这三部分可使用三个英文单词来表示 Arrange 、Action 和 Assert。

因为没有找到对这种分析方法的正式命名方法，所以咱们不妨将此办法称为 三A描述法。

描述测试用例

本步骤，咱们须要采用Gherkin关键字对咱们的测试用例进行描述。

在项目模板的features文件夹下，新建文件使用必应搜索Newbe相关的内容.feature

在文件中填写如下内容

Feature: 使用必应搜索Newbe相关的内容 Background: Given 打开必应首页 "https://cn.bing.com/" @NewbeDemo Scenario: 使用必应搜索 newbe When 搜索框输入内容 "newbe" When 点击搜索按钮 Then 出如今必应搜索第一条的标题是 "主页 - Newbe即是新生，惟有不断蜕变才能焕然新生。" 

文字内容无需过多解释。

这即是对测试用例的代码性描述。这种描述方式，没有损失过多可读性，甚至于增长了测试用例的条理性。另外结合如下步骤能够实现代码与这些步骤的绑定，从而执行这个测试用例。

创建页面模型

本步骤，咱们须要采用Typescript语言将测试过程当中须要操做的页面元素进行定义。

简要分析，以上测试用例中须要用到三个页面元素：

• 搜索输入框
• 搜索按钮
• 搜索结果的第一条标题

因为搜索首页和搜索结果不在同一个页面。于是，咱们定义两个页面。

在项目模板的pages文件夹下，新建文件Bing首页.ts。

在文件中填写如下内容：

import {$, ElementFinder} from "protractor"; export class Bing首页 { public input搜索框: ElementFinder; public btn搜索按钮: ElementFinder; constructor() { this.input搜索框 = $("#sb_form_q"); this.btn搜索按钮 = $("#sb_form_go"); } } 

在项目模板的pages文件夹下，新建文件Bing搜索结果页面.ts。

在文件中填写如下内容：

import {$, ElementFinder, $$} from "protractor"; export class Bing搜索结果页面 { public getlbl第一条搜索结果的标题(): ElementFinder { return $$("li.b_algo").get(0).$("h2"); } } 

详细的语法细节这里并不作介绍，但即便没有学习过语法，相信读者也能够看出以上两个文件对应着两个主要的页面，其中的一些变量对应了须要操做的页面元素。

编写步骤

本步骤，咱们须要采用 Typescript 语言编写测试步骤。

在项目模板的stepdefinitions文件夹下，新建文件使用必应搜索Newbe相关的内容.ts。

在文件中填写如下内容：

import {Bing首页} from "../pages/Bing首页"; import {Bing搜索结果页面} from "../pages/Bing搜索结果页面"; import {Then, Given, When} from "cucumber"; import {should} from "chai"; import {browser} from "protractor"; should(); const bing首页 = new Bing首页(); const bing搜索结果页面 = new Bing搜索结果页面(); Given(/^打开必应首页 "(.+)"$/, async (url) => { await browser.get(url); // 打开URL await browser.sleep(1000); // 等待一秒，等待页面加载 }); When(/^搜索框输入内容 "(.+)"$/, async (keyword) => { await bing首页.input搜索框.sendKeys(keyword); // 输入关键词 }); When(/^点击搜索按钮$/, async () => { await bing首页.btn搜索按钮.click(); // 点击搜索按钮 await browser.sleep(1000); // 等待一秒，等待页面处理 }); Then(/^出如今必应搜索第一条的标题是 "(.+)"$/, async (titlehtml) => { const title = await bing搜索结果页面.getlbl第一条搜索结果的标题().getText(); // 获取搜索结果第一条标题 title.should.be.eq(title); // 判断第一条的标题和预期同样 }); 

读者能够按照如下几个要点来看上面这段代码：

1. 代码中出现了 Given 、 When 和 Then。读者能够参照上面的 使用必应搜索Newbe相关的内容.feature 文件，容易发现，这里的代码和feature是一一对应的。
2. 代码中出现了上节定义的 Bing首页 和 Bing搜索结果页面 ，读者能够看到代码经过操做者两个变量，实现了对页面的操做。
3. 代码中经过 // 标注了一些注释，读者能够大体了解到每一个步骤的做用。
4. 总的来讲，这段代码，实现了 feature 文件所描述的步骤。

运行测试用例

以上，经过三节介绍，将执行测试用例所须要的代码都编写完成了。如今，即可以执行这个测试用例来查看效果。

启动 webdriver-manager

打开 控制台（或 Teminal ）, 在控制台中输入如下命令

webdriver-manager start

若控制台最后一句显示如下内容，则说明已经启动成功。

18:04:05.444 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444 

启动成功后不要关闭控制台。

执行测试用例

打开 控制台（或 Teminal ）, 注意，须要是新的控制台，与 webdriver-manager 控制台区别。

将控制台目录切换到项目模板的根目录。

在控制台中输入如下命令

npm run testnow

若是正常，实际效果将以下图所示：

等待全部操做完毕以后，控制台将输入以下内容：

PS D:\Repo\Newbe.Pct> npm run testnow > newbe-pct@4.0.0 testnow D:\Repo\Newbe.Pct > npm run clean && npm run build && protractor typeScript/config/config.js > newbe-pct@4.0.0 clean D:\Repo\Newbe.Pct > rimraf typeScript/ > newbe-pct@4.0.0 build D:\Repo\Newbe.Pct > tsc [18:45:52] I/launcher - Running 1 instances of WebDriver [18:45:52] I/hosted - Using the selenium server at http://127.0.0.1:4444/wd/hub (node:22948) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead. ...... 1 scenario (1 passed) 4 steps (4 passed) 0m04.255s Cucumber HTML report D:\Repo\Newbe.Pct\reports\html/cucumber_reporter.html generated successfully. [18:46:05] I/launcher - 0 instance(s) of WebDriver still running [18:46:05] I/launcher - chrome #01 passed 

从上面的报告中的 1 scenario (1 passed) 能够看出测试用例已经运行经过。

同时成功生成了 HTML 格式的测试报告。生成的位置为项目文件夹中的reports\html\cucumber_reporter.html。读者可使用 Chrome 浏览器打开查看报告。

总结

至此，读者已经成功体验了如何使用本框架，以及本项目所提供的功能。下篇，将针对 feature 文件进行更加细致的说明。

 

教程连接

Newbe.Pct-开发环境准备

Newbe.Pct 开始使用