The First E2E Test with TestCafe

Published in

JAGAAD Digital Solutions

5 min readApr 20, 2023

Hello everyone! My name is Maria and I’m working as a QA Engineer at Jagaad. One of my daily activities is — developing E2E automated tests. I would like to share with you, how to start with TestCafe, and write the first test together.

What is TestCafe?

TestCafe is an end-to-end testing framework for web applications.

Advantages of TestCafe framework:

Easy setup.
No third-party dependency: TestCafe doesn’t depend on any third-party libraries like WebDriver, external jars, etc.
Easy to write tests: TestCafe command chaining techniques make developers and testers more productive.
Cross Browser Testing: TestCafe supports all major browsers Edge, Safari, Chrome, Firefox.
Automated Waiting: TestCafe waits automatically for the elements to appear. There’s no need to insert External Waits.

Install TestCafe

TestCafe is built on Node.js, which means no Java, no browser plugins, or operating system bindings. All we need is to have Node.js on our computer (download it from here).

In order to start using the TestCafe framework, we need to install it. This can be done with one console command.

npm install -g testcafe

Prepare the data for the test

Describe the test scenario

For example, we will implement a simple “Search” scenario for the https://en.wikipedia.org/ website.

Preconditions: navigate to the https://en.wikipedia.org/

Steps:

1. Navigate to the “Tenerife” page using the search.

2. Check the “Tenerife” page is opened.

3. Navigate to the “Search” page.

4. Check the “Search” page is opened.

5. Type the “Teide” into the search field and search.

6. Check the count of found results is 20.

Find targeted elements on the pages

We’ll use CSS selectors to specify the elements to act on. Selectors in TestCafe allow us to do all the work related to DOM elements. To read more about CSS selectors you can here.

Main page:

searchInput: id=”searchInput” ➟ #searchInput
searchButton: type=”submit”

Article page:

title: id=”firstHeading” ➟ #firstHeading
searchInput: name=”search”

Find the element’s selectors on the Arlicle page

Search page:

title: id=”firstHeading” ➟ #firstHeading
searchInput: id=”searchText” ➟ #searchText
searchButton: class=”oo-ui-actionFieldLayout-button” ➟ .oo-ui-actionFieldLayout-button

articlePreview: class=”searchResultImage” ➟ .searchResultImage

Find the element’s selectors on the Search results

Write the first test with TestCafe

Let’s create a wikipedia.js file and open the file in Visual Studio Code (or a simple text editor).

First, we need to create a fixture in the file — a group of tests that share the same starting URL. To set this URL we have to use the page method. To declare a new test we have to use the test method.


fixture("Wikipedia test set")
    .page("https://www.wikipedia.org/")

    test("Search test", async t =>{ 
});

Import Selector to be able to make actions with elements

import {Selector} from 'testcafe';

Perform actions with page elements in accordance with the scenario defined above

Step 1: Navigate to the “Tenerife” page using the search

        await t
        .typeText('#searchInput', 'Tenerife');

The first argument of the typeText() is a CSS Selector that identifies the target element (#searchInput). The second argument contains the input value (Tenerife).

        await t
        .click('[type="submit"]');

The click() action requires a single argument — a CSS Selector that identifies the target element.

Step 2: Check the “Tenerife” page is opened

To check that the page is opened, we will check that the title is visible and the content of the title is as expected.

To do these checks we have to use the assertions — functions that compare page data to our expectations. Assertions allow us to create custom success conditions — if an assertion fails, the test fails, too.

        await t
        .expect(Selector('#firstHeadings').visible)
        .ok('Tenerife page title is not visible');

ok() —is the assertion method, that succeeds if the code inside expect() is truthy.

In case it’s false, the test run stops and in the console, we will see the error message, that we defined as a parameter of ok().

       await t
        .expect(Selector('#firstHeading').innerText)
        .eql('Tenerife', 'Tenerife page title is not as expected');

The innerText method retrieves the element’s innerText property. This assertion compares the value of inside of the expect() to the first argument of eql(), and succeeds if they are equal.

Step 3: Navigate to the “Search” page

       await t
        .click('[name="search"]')
        .pressKey('enter');

pressKey() — presses the specified keyboard keys, key combinations. We are pressing the ENTER which is usually the same as pressing the “Search” button.

Step 4: Check the “Search” page is opened

As in step 2, to check, that the page is opened, we will check that the title is visible and the content of the title is as expected.

       await t
        .expect(Selector('#firstHeading').visible)
        .ok('Search page title is not visible')
        .expect(Selector('#firstHeading').innerText)
        .eql('Search', 'Search page title is not as expected');

Step 5: Type the “Teide” into the search field and search

        await t
        .typeText('#searchText', 'Teide')
        .click('.oo-ui-actionFieldLayout-button"]');

Step 6: Check the count of found results is 20

        await t
        .expect(Selector('.searchResultImage').count)
        .eql(20, 'The count of the links in not as expected');

count property returns the number of elements that match the Selector query.

Chain multiple actions

Let’s chain these actions together. Action chains make our code easier to read.

import {Selector} from 'testcafe';

fixture("Wikipedia test set")
    .page("https://www.wikipedia.org/")

    test("Search test", async t => {
        await t
        //navigate to the Tenerife page using the search
        .typeText('#searchInput', 'Tenerife')
        .click('[type="submit"]')

        //check the title of the page
        .expect(Selector('#firstHeading').visible)
        .ok('Tenerife page title is not visible')
        .expect(Selector('#firstHeading').innerText)
        .eql('Tenerife', 'Tenerife page title is not as expected')
    
        //navigate to the search page
        .click('[name="search"]')
        .pressKey('enter')

        //check the title of the search page
        .expect(Selector('#firstHeading').visible)
        .ok('Search page title is not visible')
        .expect(Selector('#firstHeading').innerText)
        .eql('Search', 'Search page title is not as expected')
        
        //search Teide
        .typeText('#searchText', 'Teide')
        .click('.oo-ui-actionFieldLayout-button')

        //check that the count of the found results is 20
        .expect(Selector('.searchResultImage').count)
        .eql(20, 'The count of the links in not as expected');
});

Run the Test

Open the Terminal/Console and run the command:

testcafe chrome wikipedia.js

TestCafe will find the browser installed on the machine, launch it and run the test.

Wikipedia search test run

Analyze the errors

Let me simulate the error, changing the selector on purpose.

The result of the test run is:

AssertionError: Tenerife page title is not visible: expected false to be truthy.