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

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

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

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

一、Node.js下載地址：https://nodejs.org/en/

二、安裝路徑

三、配置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:WorkSpaceUi_testnode_modulescypress 下

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

cd到上述文件夾E:WorkSpaceUi_testnode_modulescypress下輸入 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 是非必須使用的文件夾，須要自定義指令的時候會用到。

添加本身的第一個測試用例

一、若是是cmd npm安裝的cypress， 用例腳本在node_modulescypresscypressintegrationexamples 文件下。
二、若是是下載解壓的cypress，用例腳本在cypressintegrationexamples文件下

新建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 爲例：
一、首先，導入·testcafe模塊

import { Selector } from 'testcafe';

二、而後使用fixture函數聲明一個fixture。

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

三、而後，建立測試函數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編寫測試代碼

一、在頁面上執行操做
每一個測試都應該可以與頁面內容交互。對於用戶要執行的操做，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關鍵字。

二、觀察頁面狀態
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;
});

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

三、斷言
通常而言，功能測試還應該檢查執行操做的結果。例如，「謝謝」頁面上的文章標題應該顯示爲用戶輸入的名稱。要檢查頁面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以後，愛不釋手，決定使用目前的項目來實施拓展一下。