Web testing is an important part when developing a web application. It helps us to uncover the functionality and usability issues in our application. In a ZK application, we can already leverage ZATS for functional testing and Selenium WebDriver tests for the real browser testing. While ZATS is still the recommended tool to test your application logic in controllers and view models, TestCafe provides a new alternative for browser testing next to (or even replacing) Selenium.

TestCafe is an open-source node.js tool to automate end-to-end web testing. It is very simple and easy to set up the test environment – all we have to do is:

npm install -g testcafe

After the installation, we can run our test code from a command shell by calling a single command (including target browser and file path).

testcafe chrome test1.js

A test example will be provided in the following article.

Example

The example below is a test case for the Step Bar Example on the ZK demo website.

Test File

import {Selector} from 'testcafe';
fixture `ZK-Web-Test`
        .page `https://www.zkoss.org/zkdemo/shadow_elements/step_bar`;
const addCarButton = Selector('button.stepbar-button')
                         .withText('Yes, I need a Car!');
const backButton = Selector('button.stepbar-button').withText('Back');
const nextButton = Selector('button.stepbar-button').withText('Next');
const pageTitle = Selector('.page-title');
const steps = Selector('.stepbar .step');
const hasPageTitle = title => pageTitle.withText(title).exists;

test('ZK demo: step bar example test', async t => {
    await t.expect(hasPageTitle('Destination')).ok()
        .expect(backButton.exists).notOk('Back button should not exist')
        .expect(addCarButton.exists).ok('Add car button should exist')
        .expect(steps.count).eql(5, 'There should be 5 steps initially')
        
        .click(addCarButton)
        .expect(addCarButton.exists).notOk("Add car button should disappear")
        .expect(steps.count).eql(6, 'There should be 6 steps')

        .click(nextButton)
        .expect(backButton.exists).ok('Back button should exist')
        ...
});

• Line 2, 3: Specify the the URL we are going to test.

The test code illustrates 3 major aspects of web testing.

1. Targets – Locations of DOM Elements of interest during our test.
TestCafe provides the Selector-constructor to specify a target. (e.g. Line 7 selects the “Next” button by css class and containing text)

2. Actions – Simulate human interaction.
TestCafe’s test API supports a set of actions, such as click, hover, pressKey, etc. (e.g. Line 22 clicks the “Next” button)

3. Assertions – The states/conditions/results expected during our test.
In TestCafe, we use the expect-function to do assertions. (e.g. Line 23 checks for the “Back”-button to appear)

Demo

For more information about TestCafe, please refer to TestCafe APIs.

Downloads

The demo project can be found on Github project.