A Chat with E2E tests @ TestCafe

Dharmender Kumar
Nov 5 · 5 min read

When you plan out automation testing, there is a plethora of frameworks & tools available. And, choosing one would definitely need some thought going into it based on various factors. However, there’s nothing like good or bad framework but more relevant does exist.

With growing focus of frontend development ecosystem, came along multiple tools for testing browser UI code. Most of them are Javascript frameworks that makes them easier to integrate them with the existing JS codebase.

Also, they provide better ways to manage browser sync issues that typical selenium frameworks has to deal with.

While I was exploring JS frameworks for e2e tests, came across TestCafe that caught my attention. Through this blog, we’ll explore TestCafe with a sample project and understand why it stands out as promising choice.

Introduction

TestCafe is an open-source end-2–end testing framework written in javascript. It uses its own test runner which is initially a bit strange, and refers a group of tests as a fixture. But I prefer that as it makes you explicitly use promises and async/await to manage execution.

TestCafe runs in its own runner and doesn’t require any special setup of web-driver and supporting browser extensions. It comes all packaged and can be used for older versions of all the well known browsers. Because of this, it may be a choice over selenium where you might need to test the app in older versions of IE, Safari and Chrome.

Testcafe -live is another worth mentioning feature which makes developers to validate code changes in an interactive way. It provides a 2 view screen (editor n browser), where one can validate the changes while making the change. Isn’t this Cool enough ? :)

https://github.com/DevExpress/testcafe-live

You can find detailed information about the tool, features, installation and documentation here.

Installation

TestCafe installation’s the easiest of all and as simple as npm command. It doesn’t require any webdriver setup and only testcafe is enough

npm install -g testcafe

In some cases, user might face issue installing it globally. Follow below steps to fix it.

Follow below steps if permission denied error occurs during testcafe installation
- mkdir ~/.npm-global
- npm config set prefix '~/.npm-global'
- export PATH=~/.npm-global/bin:$PATH ### Add this to the end of the file ~/.profile
- source ~/.profile

To check if the installation went fine. Below command will print the testcafe’s version installed.

testcafe -v

Docker Image

If you don’t want to install it in local, you can spin-up a docker container with the testcafe’s docker image

docker pull testcafe/testcafe

Sample Project

Here’s the repo that’ll be used as sample project.

The project comprises of docker-compose.yml file that has docker TestCafe image defined. Tests folder consists javascript test ‘first.js’ and POM page definition as ‘homepage.js’

Now, let’s dive in and see the definition of each files in the structure.

docker-compose.yml

The docker-compose houses testcafe image and its env and volume details. This way you run tests in non-GUI mode with cleaner way to provision container and destroy post execution.

homepage.js

import { Selector } from 'testcafe';

export default class Homepage {
constructor() {
this.username = Selector('#identifierId');
this.next = Selector('#identifierNext');
}
}

Before jumping to define tests, lets define a simple page object pattern. Here, locators and methods can be defined that can be later used in actual tests.

first.js

import { Selector } from 'testcafe';
import Homepage from './homepage';

fixture `Gmail`
.page `http://mail.google.com`;

test('Login test', async t => {
const homepage = new Homepage();

await t
.typeText(homepage.username, 'John.Smith@gmail.com')
.expect(homepage.username.value).contains('John.Smith@gmail.com')
.click(homepage.next);
});

Now, it’s time to write tests for the application. In this test ‘Login test’, Homepage is instantiated as an object page that can be used in the tests. This way, locators can be abstracted from the actual tests. Since each test is asynchronous and maintains the state of browser, it’s much better way to manage sync time compared to Selenium tests for lazy loading issues.

Test Execution

Docker compose:

BROWSER=safari docker-compose up --force-recreate --abort-on-container-exit

Local Testcafe:

testcafe chrome first.js .  //in case of chrome

OR
testcafe firefox first.js . //in case of firefox

Testcafe Live… :)

testcafe --live chrome first.js

Results

Results can be easily diagnosed and fixed given the detailed failure report.

Test Failure Report
Test Failure Report
Test Failure Report
Test Completion Report

Although the framework has great features to offer and provides seamless env eco-system to develop & execute tests, it’s worth to note that it’s open-source and have a community of developers backing it. It might also mean that there might be open bugs and more features are in development while I’m drafting this.

However, it’s awesome to try this out as it has all the features to provide the eco-system to develop end-2-end tests and keep watching for the new features coming in.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade