A Chat with E2E tests @ TestCafe
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 testcafeIn 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 ~/.profileTo check if the installation went fine. Below command will print the testcafe’s version installed.
testcafe -vDocker 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/testcafeSample 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-exitLocal Testcafe:
testcafe chrome first.js . //in case of chrome
ORtestcafe firefox first.js . //in case of firefox
Testcafe Live… :)
testcafe --live chrome first.jsResults
Results can be easily diagnosed and fixed given the detailed failure 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.