摘要：簡(jiǎn)言之，就是一個(gè)可以自動(dòng)化前端測(cè)試的工具，我們可以使用簡(jiǎn)單的或者寫測(cè)試用例。首先引入構(gòu)造函數(shù)創(chuàng)建在中切換筆者認(rèn)為的調(diào)試功能不太成熟，只支持下一步等簡(jiǎn)單操作

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.
簡(jiǎn)言之， Testcafe就是一個(gè)可以自動(dòng)化前端end-to-end測(cè)試的工具，我們可以使用簡(jiǎn)單的JS或者Typescript寫測(cè)試用例。

需要提前安裝NodeJS， 官網(wǎng)沒(méi)有指定版本，本文基于NodeJS 8+撰寫。

Globally
npm install -g testcafe

Locally
npm install --save-dev testcafe

建議使用本地安裝，這樣團(tuán)隊(duì)里其他人直接npm install便可安裝相同版本的所有依賴。

可以使用命令行執(zhí)行單元測(cè)試

使用指定瀏覽器
testcafe chrome tests.js
testcafe path:/safari.app tests.js

使用所有安裝的瀏覽器
testcafe all tests.js

headless mode
Chrome 和 Firefox 支持 headless mode
testcafe "chrome:headless" tests.js

更多信息請(qǐng)參考 Command Line Interface

也可以寫JS代碼用Node執(zhí)行單元測(cè)試，這也是本文著重推薦的方法，因?yàn)檫@個(gè)方式更加靈活。

引入工廠函數(shù)
const createTestCafe = require("testcafe")

使用工廠函數(shù)獲得TestCafe實(shí)例
工廠函數(shù)接受三個(gè)參數(shù)， 分別是 host controlPanelPort servicePort，返回一個(gè)promise, 該promise的最終結(jié)果便是一個(gè)TestCafe實(shí)例

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

TestCafe對(duì)外暴露三個(gè)方法，分別是: createBrowserConnection createRunner close,詳情請(qǐng)參考 TestCafe Class

調(diào)用 createRunner
testcafe.createRunner返回一個(gè)Runner實(shí)例，該實(shí)例對(duì)外暴露多個(gè)方法，用于配置和執(zhí)行測(cè)試任務(wù)，支持鏈?zhǔn)秸{(diào)用，比如：

const runner = testcafe.createRunner();
return runner
    .src(["test1.js", "test2.js"]) // 可以提前定義一個(gè)數(shù)組，或者將需要執(zhí)行的文件保存在一個(gè)文件里，更加靈活，也可以配置文件夾
    .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
     });

詳情請(qǐng)參考 Runner Class

TestCafe使用fixture來(lái)組織測(cè)試用例，一個(gè)測(cè)試文件必須包含一個(gè)或多個(gè)fixture

fixture(fixtureName)
fixture `fixtureName`

可以指定fixture的開(kāi)始頁(yè)面：

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

然后寫測(cè)試用例

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

注意傳入的參數(shù)t，它是 test controller，包含測(cè)試API和測(cè)試用例上下文，使用它我們可以調(diào)用 test actions, 處理瀏覽器對(duì)話框，等待，執(zhí)行斷言。

也許你會(huì)注意到 t 是在測(cè)試用例中拿到的， 如果我們需要把一個(gè)公用的action抽出來(lái)，如何獲得 t 呢？
TestCafe提供了一種直接引入t的方式，此時(shí)t不包含具體測(cè)試用例的上下文，但包含了測(cè)試API， 比如：

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

看到這里，也許你對(duì)typeText click很陌生，沒(méi)關(guān)系，后面會(huì)提到。

Test Hooks, 執(zhí)行在Test Case之前或之后

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

注意 test.before test.after會(huì)覆蓋fixture.beforeEach fixture.afterEach, Test Hooks 同樣會(huì)拿到Test Controller實(shí)例。

可以跳過(guò)某些test case 或者fixture

fixture.skip
test.skip

也可以指定只執(zhí)行某些test case或fixture

fixture.only
test.only

請(qǐng)參考Selectors

請(qǐng)參考Actions

詳情請(qǐng)參考Assertion API

在之前的章節(jié)我們說(shuō)在 test case 中， 我們可以執(zhí)行 test controller 對(duì)外暴露的 action， 執(zhí)行斷言，獲取上下文變量等等，但是關(guān)于 client side 的數(shù)據(jù)卻無(wú)法直接拿到，比如：

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

會(huì)報(bào)出如下錯(cuò)誤：

window is not defined

TestCafe 提供了ClientFunction構(gòu)造函數(shù)，我們可以傳入一個(gè)回調(diào)函數(shù)，在回調(diào)函數(shù)中可以訪問(wèn) 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")
    })

在很多網(wǎng)站中，具有不同角色的用戶可以訪問(wèn)不同的界面或功能，TestCafe 提供了Role構(gòu)造方法并且在 TestController 中暴露 UseRole方法以便切換角色。

首先引入 Role 構(gòu)造函數(shù)

import { Role } from "testcafe"

創(chuàng)建 role

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

在 test case 中切換 role

t.useRole(user)

筆者認(rèn)為TestCafe的調(diào)試功能不太成熟，只支持下一步等簡(jiǎn)單操作

t.debug()