Cypress與TestCafe 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命令窗口中輸出報告。


有關如何配置測試運行的詳細信息，可以參考官網

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之后，愛不釋手，決定使用目前的項目來實施拓展一下。