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 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()