End-to-End Web Testing with TestCafe

0 (12)

A Node.js tool to automate end-to-end web testing.Write tests in JS or TypeScript, run them and view results

What is E2E Testing ?

End-to-end testing is where you test your whole application from start to finish. It involves assuring that all the integrated pieces of an application function and work together as expected.

End-to-end tests simulate real user scenarios, essentially testing how a real user would use the application.

E2E tests allow us to cover sections of the application that unit tests and integration tests don’t cover. This is because unit tests and integration tests only take a small piece of the application and assess that piece in isolation.

What is TestCafe ?

Its key feature is that it doesn’t use WebDriver to work with browsers as other solutions do. That is why it requires minimal test environment and it is installed with one command. Besides, this approach allows you to run tests on any physical device without requiring anything but the browser. Automatic waiting as well as the elegant and informative console reporter. The main drawback of TestCafe is that it emerged not long ago and has a much smaller community than its competitors.

Nevertheless, the community grows bigger and TestCafe already has a wide range of plugins that extend its functionality. It is undoubtedly worth your attention.

TestCafe Features:

1- Works on all popular environments:

Windows, MacOS, and Linux. It supports desktop, mobile, remote and cloud browsers(UI or headless)

2- 1 minute to set up:

You do not need WebDriver or any other testing software. Install TestCafe with one command, and you are ready to test.

3- Free and open source

Getting Started with TestCafe

This guide provides step-by-step instructions on how to create a functional web test with TestCafe and contains the following sections.

Installing TestCafe

Ensure that Node.js and npm are installed on your computer, then run a single command:

npm install -g testcafe

For more information, see Installing TestCafe

Creating a Test

TestCafe allows you to write tests using TypeScript or JavaScript (with its modern features like async/await). By using TypeScript to write your TestCafe tests, you get the advantages of strongly-typed languages such as: rich coding assistance, painless scalability, check-as-you-type code verification, and much more.

To create a test, create a new .js or .ts file anywhere on your computer (test.js). This file must have a special structure: tests must be organized into fixtures.

1- First import testcafe selectors

import { Selector } from 'testcafe'; //first import testcafe selectors

2- Declare the fixture

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

3- Create a test and place your code there

//then create a test and place your code there
test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Moataz Nabil')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, Moataz Nabil!');

The full code

import { Selector } from 'testcafe';

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

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Moataz Nabil')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, Moataz Nabil!');

Running the Test

You can simply run the test from a command shell by calling a single command where you specify the target browser and file path.

Running on Google Chrome

testcafe chrome test.js

TestCafe will automatically open the chosen browser (chrome) and start test execution within it.

Running on Google Chrome headless

testcafe "chrome:headless" test.js

Running on Firefox

testcafe firefox test.js

Running on Chrome Device Emulation

testcafe "chrome:emulation:device=iphone X" test.js

Concurrent Test Execution (Parallel Testing) against multiple browsers

testcafe -c 1 safari,chrome test.js
  • -c = number of concurrency browsers

Concurrent Test Execution (Parallel Testing) against multiple browsers

testcafe -c 1 safari,chrome test.js

Concurrent Test Execution (Parallel Testing) against 2 Firefox instance

testcafe -c 2 firefox test.js

Hint: Concurrent test execution is not supported in Microsoft Edge.

Viewing the Test Results

While the test is running, TestCafe is gathering information about the test run and outputting the report right into a command shell.

Test Case Passed

Test Case Failed because wrong selector


Reporters are plugins used to output test run reports in a certain format.

TestCafe ships with the following reporters:

1- spec – used by default (check the Results above)


npm install testcafe-reporter-json

Run with JSON Report

testcafe chrome test.js --reporter json

for more information check reports plugins

Integrating TestCafe with CI Systems

TestCafe has an extensive command line interface that allows it to fit well in any popular continuous integration system

TestCafe Test Result with Jenkins CI

for more information about Jenkins CI

IDE Plugins

Run tests and view results from your favorite IDE:

Visual Studio Code Extension

This extension allows you to run TestCafe tests directly from Visual Studio Code

Install the TestCafe Test Runner extension from VS Code Marketplace as described in the VS Code documentation.

for information about TestCafe , visit GitHub Page

Thank you

Good Luck and Happy Testing

#Get_Ready_to_become_automation_guru 🤖

Moataz Nabil

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.