TestCafe 前端 End-to-End 自動化測試工具

What is Test Cafe

TestCafe is a node.js tool to automate end-to-end web testing, you can write tests in JS or TypeScript, run them and view results.
簡言之， Testcafe就是一個能夠自動化前端end-to-end測試的工具，咱們可使用簡單的JS或者Typescript寫測試用例。

Installation

preparation

須要提早安裝NodeJS， 官網沒有指定版本，本文基於NodeJS 8+撰寫。

Install TestCafe

1. Globally
   npm install -g testcafe
2. Locally
   npm install --save-dev testcafe

建議使用本地安裝，這樣團隊裏其餘人直接npm install即可安裝相同版本的全部依賴。

How to run test cases

Command Line Interface

可使用命令行執行單元測試

1. 使用指定瀏覽器
   testcafe chrome tests.js
testcafe path:/safari.app tests.js
2. 使用全部安裝的瀏覽器
   testcafe all tests.js
3. headless mode
   Chrome 和 Firefox 支持 headless mode
   testcafe "chrome:headless" tests.js

更多信息請參考 Command Line Interface

Programming Interface

也能夠寫JS代碼用Node執行單元測試，這也是本文着重推薦的方法，由於這個方式更加靈活。

1. 引入工廠函數
   const createTestCafe = require('testcafe')

2. 使用工廠函數得到TestCafe實例
   工廠函數接受三個參數， 分別是 host controlPanelPort servicePort，返回一個promise, 該promise的最終結果即是一個TestCafe實例

   createTestCafe('localhost', 1337, 1338)
   .then(testcafe => {
       /* ... */
   });

   TestCafe對外暴露三個方法，分別是: createBrowserConnection createRunner close,詳情請參考 TestCafe Class

3. 調用 createRunner
testcafe.createRunner返回一個Runner實例，該實例對外暴露多個方法，用於配置和執行測試任務，支持鏈式調用，好比：

   const runner = testcafe.createRunner();
   return runner
       .src(['test1.js', 'test2.js']) // 能夠提早定義一個數組，或者將須要執行的文件保存在一個文件裏，更加靈活，也能夠配置文件夾
       .filter((testName, fixtureName, fixturePath) => {
           //Add some filters based on testName, fixtureName, fixturePath
        })
        .browsers(["chrome:headless"])
        .reporter('json', stream) // stream is the report file, like const stream = fs.createWriteStream('report.json');
        .run({
            selectorTimeout: 10000, // the timeout testcafe wait for an element to appear
            skipJsErrors: true // to ignore JS error
        });

   詳情請參考 Runner Class

How to write test cases

Code Structure

Fixture

TestCafe使用fixture來組織測試用例，一個測試文件必須包含一個或多個fixture

fixture(fixtureName)
fixture `fixtureName`

能夠指定fixture的開始頁面：

fixture.page(url)
fixture.page `url`

Test Case

而後寫測試用例

test
    .page `url`
    (testName, async t=> {
        /* Test Code */
    })

注意傳入的參數t，它是 test controller，包含測試API和測試用例上下文，使用它咱們能夠調用 test actions, 處理瀏覽器對話框，等待，執行斷言。

Make Test Step Common

也許你會注意到 t 是在測試用例中拿到的， 若是咱們須要把一個公用的action抽出來，如何得到 t 呢？
TestCafe提供了一種直接引入t的方式，此時t不包含具體測試用例的上下文，但包含了測試API， 好比：

async login() {
    await t
        .typeText("#user", "name")
        .typeText("#pwd", "pwd")
        .click("#login")
}

看到這裏，也許你對typeText click很陌生，不要緊，後面會提到。

Test Hooks

Test Hooks, 執行在Test Case以前或以後

fixture.beforeEach(fn(t))
fixture.afterEach(fn(t))
test.before(fn(t))
test.after(fn(t))

注意 test.before test.after會覆蓋fixture.beforeEach fixture.afterEach, Test Hooks 一樣會拿到Test Controller實例。

Skip Tests

能夠跳過某些test case 或者fixture

fixture.skip
test.skip

也能夠指定只執行某些test case或fixture

fixture.only
test.only

Selectors

請參考Selectors

Actions

請參考Actions

Assertions

Assertion	Description
eql	deep equal
notEql	not deep equal
ok	actual is true
notOk	actual is false
contains	Array or String or Object or promise contains
notContains	Array or String or Object or promise not contains
typeOf	type check
notTypeOf	type check
gt	Greater than
gte	greater than or equal to
lt	less than
lte	less than or equal to
within	range from start and finish
notWithin	not range from start and finish
match	regex check
notMatch	regex check

詳情請參考Assertion API

Tricks

ClientFunction

在以前的章節咱們說在 test case 中， 咱們能夠執行 test controller 對外暴露的 action， 執行斷言，獲取上下文變量等等，可是關於 client side 的數據卻沒法直接拿到，好比：

fixture("Fixture")
    test('window', async t=> {
        await t.navigateTo("url");
        await t.expect(window.location.href).eql("url")
    })

會報出以下錯誤：

window is not defined

TestCafe 提供了ClientFunction構造函數，咱們能夠傳入一個回調函數，在回調函數中能夠訪問 window

const getWindowLocation = ClientFunction(() => window.location)
fixture("Fixture")
    test('window', async t=> {
        await t.navigateTo("url");
        let location = await getWindowLocation();
        await t.expect(location.href).eql("url")
    })

Role

在不少網站中，具備不一樣角色的用戶能夠訪問不一樣的界面或功能，TestCafe 提供了Role構造方法而且在 TestController 中暴露 UseRole方法以便切換角色。

1. 首先引入 Role 構造函數

   import { Role } from 'testcafe'

2. 建立 role

   const user = Role(Env.LOGIN_URL, async t => {
       await t
           .typeText("userInput", "name")
           .typeText("pwdInput", "123")
           .click("submitBtn");
   });

3. 在 test case 中切換 role

   t.useRole(user)

How to debug

筆者認爲TestCafe的調試功能不太成熟，只支持下一步等簡單操做

t.debug()