使用Newbe.Pct-Web自動化測試

前言

主要介紹如何使用本項目運行一個測試用例。接下來，將會接觸到使用一些代碼。但願讀者沒必要糾結於語法自己。出現代碼的地方都會伴有必定的解釋，只須要關心代碼起到的做用就能夠了。

你能夠在查看過本篇的整體介紹，體驗項目自己的所提供的功能，再來決定是否要學習語法。

下載模板

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 控制檯區別。

將控制檯目錄切換到項目模板的根目錄。

若是對軟件測試、接口測試、自動化測試、性能測試、LR腳本開發、面試經驗交流。感興趣能夠175317069，羣內會有不按期的發放免費的資料連接，這些資料都是從各個技術網站蒐集、整理出來的，若是你有好的學習資料能夠私聊發我，我會註明出處以後分享給你們。

在控制檯中輸入如下命令

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 瀏覽器打開查看報告。至此，已經成功體驗瞭如何使用本框架，以及本項目所提供的功能。

擴展閱讀

• 學軟件測試最好的幾本書，這8本書能幫你不少
• 軟件測試7年的工程師，講述當初是怎麼突破的瓶頸？少走彎路