Cypress與TestCafe WebUI端到端測試框架簡介

軟測小生發表於2020-07-05
WebUI框架

近期接觸了Cypress和TestCafe，兩個測試框架都基於Node.js，都不再使用Selenium+WebDriver，而且開箱即用，非常輕量級，就衝著不再使用WebDriver這一點，極大地勾起了我的好奇心。所以今天就來初略的學習一下，並以此文作為學習筆記。

本文學習筆記以Windows10 為背景，Mac 和 Linux請參考官網
.
注意： Cypress 和 TestCafe 都依賴Node.js，所以在學習之前確保電腦上已經安裝了Node.js
本篇文章只是一個初略的Demo學習筆記，更多詳細內容後期學習繼續更新文章。

安裝Node.js並配置npm環境變數

1、Node.js下載地址：https://nodejs.org/en/
在這裡插入圖片描述
2、安裝路徑
在這裡插入圖片描述

3、配置npm環境變數
在這裡插入圖片描述

安裝Cypress

方法一： 直接使用命令安裝(cmd 安裝 會比較慢，還是建議選擇下面的第2種方式，直接下載安裝包來安裝。)

npm install cypress

在這裡插入圖片描述

方法二： 或者去官網下載安裝包 https://www.cypress.io/
解壓後的檔案如下，直接點選Cypress.exe安裝檔案啟動即可
在這裡插入圖片描述

啟動執行Cypress

方法一： 使用cmd命令列啟動

(npm高於v5.2的版本中自帶npx, 或者你也可以單獨安裝npx.)

npx cypress open

在這裡插入圖片描述
方法二： 如果是下載Cypress安裝包，解壓後的檔案中直接點選Cypress.exe安裝檔案啟動即可啟動
在這裡插入圖片描述
方法三：
在package.json檔案中加入以下內容之後，就可以使用 npm run cypress:open 來啟動Cypress
比如我的package.json在 E:\WorkSpace\Ui_test\node_modules\cypress 下

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

在這裡插入圖片描述
cd到上述資料夾E:\WorkSpace\Ui_test\node_modules\cypress下輸入 npm run cypress:open 即可啟動Cypress。
在這裡插入圖片描述

方法四： 當然還有幾種方式啟動，請參考官網介紹；上面選擇了最方便的啟動方式。

Cypress啟動執行介面

啟動後的Cypress介面如下：
選擇專案地址，然後就可以繼續選擇並執行專案裡面的測試指令碼。
在這裡插入圖片描述

Cypress測試指令碼與執行

先來說一下檔案結構：

|-- fixtures
|-- integration
|   `-- example_spec.js
|-- plugins
|   `-- index.js
`-- support
    |-- commands.js
    `-- index.js

fixtures 資料夾存放自定義 json 檔案；
integration 資料夾編寫測試；
plugins 和 support 是非必須使用的資料夾，需要自定義指令的時候會用到。

新增自己的第一個測試用例

1、如果是cmd npm安裝的cypress， 用例指令碼在\node_modules\cypress\cypress\integration\examples 檔案下。
2、如果是下載解壓的cypress，用例指令碼在\cypress\integration\examples檔案下

新建sample_spec.js：

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://www.baidu.com")
        cy.get("#kw").type("cypress test")
        cy.wait(60)
        cy.get("#su").click()
        cy.contains('cypress website').click()
    })
})

然後執行Cypress可以看到如下圖，然後直接點選js檔案，執行測試用例，將會啟動Chrome執行指令碼。
在這裡插入圖片描述
在這裡插入圖片描述

安裝TestCafe

一個基於Node.js的WebUI自動化端到端測試框架，使用JS或TypeScript編寫測試。

npm install -g testcafe #全域性安裝模式

在這裡插入圖片描述
更多安裝方式可參考官網
安裝之後使用測試命令測試一下是否安裝成功

testcafe chrome tests/

TestCafe建立一個簡單的測試例子

TestCafe允許使用JavaScript和TypeScript來編寫測試。

cd到你的專案檔案下，要建立測試，請新建一個字尾名為.js或.ts檔案。這個檔案必須有一個特殊的結構-測試必須組織到fixture中。
比如此處以sample.js 為例：
1、首先，匯入·testcafe模組

import { Selector } from 'testcafe';

2、然後使用fixture函式宣告一個fixture。

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

3、然後，建立測試函式test，你可以在其中輸入測試程式碼，之後儲存為sample.js。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // Test code
});

TestCafe執行測試指令碼

在你的專案資料夾下，cmd切換到你指定目標瀏覽器和檔案路徑，即可執行測試。

testcafe chrome sample.js

TestCafe將自動開啟所選的瀏覽器並在其中開始執行測試。

檢視測試結果

當測試執行時，TestCafe收集關於測試執行的資訊，並在shell命令視窗中輸出報告。
CMD命令
啟動的瀏覽器介面
有關如何配置測試執行的詳細資訊，可以參考官網

TestCafe編寫測試程式碼

1、在頁面上執行操作
每個測試都應該能夠與頁面內容互動。對於使用者要執行的操作，TestCafe提供了：Click，hover， typetext，setFilesToUpload等等。他們可以叫做 鏈，操作鏈。

下面的fixture包含一個簡單的測試，該測試在文字編輯器中鍵入開發人員名稱，然後單擊Submit按鈕。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', '軟測小生')
        .click('#submit-button');
});

所有的操作實現都使用物件控制器t的非同步功能來實現。 此物件用於訪問測試執行API。要等待操作完成，在呼叫這些操作或操作鏈時使用await關鍵字。

2、觀察頁面狀態
TestCafe允許測試人員觀察頁面狀態。為此，它提供了在客戶端上執行程式碼的特殊型別的函式:Selector 用於直接訪問DOM元素，ClientFunction用於從客戶端獲取任意資料。你可以將這些函式作為常規的非同步函式呼叫，也就是說，你可以獲得它們的結果並使用引數向它們傳遞資料。
Selector API提供方法和屬性來選擇頁面上的元素並獲取它們的狀態。

例如，單擊示例web頁面上的Submit按鈕將開啟一個“謝謝”頁面；要訪問開啟頁面上的DOM元素，就必須使用Selector函式。
下面的示例演示如何訪問文章標題元素並獲取其實際文字。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', '軟測小生')
        .click('#submit-button');

    const articleHeader = await Selector('.result-content').find('h1');

    // 獲取文章標題的文字
    let headerText = await articleHeader.innerText;
});

更多內容可參考選擇頁面元素

3、斷言
一般而言，功能測試還應該檢查執行操作的結果。例如，“謝謝”頁面上的文章標題應該顯示為使用者輸入的名稱。要檢查頁面Title是否正確，必須向測試新增斷言:
下面的測試演示瞭如何使用內建的斷言。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', '軟測小生')
        .click('#submit-button')

        // 使用斷言檢查實際的標題文字是否等於預期的標題文字
        .expect(Selector('#article-header').innerText).eql('Thank you, 軟測小生!');
});

總結：
在接觸了Cypress和TestCafe之後，驚掉下巴，這兩個工具的輕量級之輕，與之前使用的Selenium相比，簡直無法想象，從安裝到執行第一個指令碼，從上述的學習筆記中可以看出，10分鐘入門完全不是吹的。

遙想當年Selenium+WebDriver的學習之路，可謂是很艱辛，也很複雜，很大原因也可能是由於那時是小白；再接觸到Cypress和TestCafe之後，愛不釋手，決定使用目前的專案來實施擴充一下。

相關文章