Over a million developers have joined DZone.

End-to-End Testing for Your Web App With TestCafe

TestCafe is an end-to-end browser testing tool that allows you to easily write a functional test that inputs text, clicks buttons, and validates the results.

· DevOps Zone

Download “The DevOps Journey - From Waterfall to Continuous Delivery” to learn learn about the importance of integrating automated testing into the DevOps workflow, brought to you in partnership with Sauce Labs.

Last fall, DevExpress released the core library of their end-to-end browser testing tool, TestCafe, as an open-source framework for Node.js. TestCafe aims to simplify end-to-end testing in many aspects, from setting up test harnesses to working with Continuous Integration platforms.

In this article, we will look at how you get started with TestCafe and write your first test from scratch.

Installing TestCafe

If you already have Node.js installed, TestCafe installs from npm with one command:

npm install -g testcafe

Or, if you are on Linux:

sudo npm install -g testcafe

Creating Your First Test

We are going to write a test for the TestCafe demo page. Open your favorite editor or IDE and create a new .js file.

First, declare a test fixture that targets https://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
});

Notice that we use template strings and even async/await. This is possible because TestCafe supports ES2016 with all the latest features out of the box.

At this point, you can already run the test. Save it as test.js and type the following command in the console:

testcafe chrome test.js

TestCafe automatically detects Google Chrome (as well as other popular browsers) if it is installed locally, opens it, and runs the test. Since this test is empty and does nothing, it will pass and TestCafe will output a report about that.

Image title

Add Actions to the Test

Now let's add code that performs some actions on the page.

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

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

The three lines above will allow TestCafe to mimic an end-user actions. First, it will type the text "Peter Parker" into the Developer Name field. Then, it will select the Mac OS radio button and click the Submit button.

If you run this test, you'll see TestCafe emulating these actions in the browser.

Image title

Observing Page State

Let's now validate, using our test, that the Submit button is doing its job. This button is supposed to redirect you to a page that simply says, "Thank you."

Image title

We are going to check that after the Submit button is clicked, the browser navigates to the page whose header contains the text, Thank you, Peter Parker!.  

To do this, create a selector for the article header, get its innerText , and verify this text in an assertion.

import { Selector } from 'testcafe';

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

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

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

Notice that the test doesn't contain any code that introduces delays to wait for actions to complete or pages to load. TestCafe provides a smart automatic wait mechanism that takes care of all the waiting.

That’s all there is to it. You have just written a functional test that inputs text, clicks buttons, and validates the results.

To learn more about TestCafe, visit the project's GitHub page or website.

Discover how to optimize your DevOps workflows with our cloud-based automated testing infrastructure, brought to you in partnership with Sauce Labs

Topics:
end to end testing ,browser testing ,devops ,testcafe ,software development

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}