TestCafe: Easier End-to-end Web App Testing with Node.js

Image may be NSFW.
Clik here to view.

In this article, TestCafe team member Vasily Strelyaev explains the benefits of this new Node.js-based app testing framework.

Front-end web developers know how difficult it is to set up automated testing for a web app.Even installing a testing framework can be challenging. Many existing solutions require Selenium, which brings browser plugins and JDK with it.

Before you start testing, you also need to set up a test harness, which means dealing with configuration files. Later, you can discover that some parts of the harness --- such as reporting --- are missing and you need to find and install them separately.

TestCafe is a new, open-source, Node.js-based end-to-end testing framework for web apps.

It takes care of all testing stages: starting browsers, running tests, gathering test results, and generating reports. And it neither needs browser plugins nor has other dependencies: it just works out of the box.

In this article, I'll show how to

• write your first test
• run it on your local machine and in a cloud testing service
• create a testing task for a task runner

Installing TestCafe

First, you need to have Node.js installed on your machine. If you don't, go to its website and download it.

Once you're done with Node.js, installing TestCafe is a matter of one command:

npm install -g testcafe

If you're on Linux, add sudo:

sudo npm install -g testcafe

Writing a Test

We'll write a test for the TestCafe demo page.

Image may be NSFW.
Clik here to view.

Open a code editor of your choice and create a new test.js file.

First, add a fixture declaration that targets the demo web page at http://devexpress.github.io/testcafe/example/:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Then, add a test:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // We will add test code later
});

Now let our test type text into the Developer Name input and click the Submit button:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Here we used the typeText and click test actions. TestCafe provides a dozen of them, from hover to file upload.

Let's get back to our test. The Submit button redirects you to a page that says 'Thank you, %username%!'.

Image may be NSFW.
Clik here to view.

We'll check that text on this page contains the right name:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

To do this, we create a selector that identifies the article header. After test actions, we add an assertion that checks if the text says 'Thank you, Peter Parker!'

Page Object

The TestCafe team encourages using the Page Object pattern in tests. With this pattern, you introduce object representation of the tested page and use it in test code. Let's look at how we do this.

Create a new page-object.js file and declare a Page class:

export default class Page {
    constructor () {
    }
}

Our test interacts with three page elements so far: the Developer Name input, the Submit button, and the 'Thank you' header. So, we add three selectors to the Page class:

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

In the test file, reference page-object.js, create an instance of the Page class, and use its fields in test actions:

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

With the page object pattern, you keep all selectors in one place. When the tested web page changes, you will need only to update one file --- page-object.js.

The post TestCafe: Easier End-to-end Web App Testing with Node.js appeared first on SitePoint.