Aurelia E2E Testing with TestCafe

Introduction

Aurelia is a JavaScript client framework of the next generation for mobile, desktop and web. It is written in ECMAScript 2016 from the ground-up and built as a series of collaborating libraries. This makes the framework forward-thinking, powerful and robust.

As Aurelia gains popularity, more people face the need to choose a testing framework for their application. They want it to be simple, capable and native to Aurelia apps. This is why we at TestCafe team made a plugin that brings native Aurelia selectors to TestCafe tests: testcafe-aurelia-selectors.

In this article, we will use it to test the Aurelia TodoMVC application.

Setup

To start using TestCafe, you will need to install it via npm.

npm install testcafe

After that, install Aurelia-specific selectors for TestCafe.

npm install testcafe-aurelia-selectors

This module contains selectors for the most used Aurelia bindings. For more details, see the testcafe-aurelia-selectors repository.

Creating a Test

Create a new todomvc.js file and write fixture and test definitions.

Next, specify the startup page for the fixture.

Page model, test actions and assertions

We will organize information about page structure in an object called Page Model. This means that we will group selectors for different page elements in a separate class. TestCafe supports ES2016 JavaScript features, so our page objects are simple ES6 classes.

Let’s define the page model.

We use the byValueBind Aurelia selector to identify a new todo item input, which is bound to the newTodoTitle value. To identify the list of todo items, we use a TestCafe CSS selector.

You can use Aurelia-specific selectors and built-in TestCafe selectors together. These selectors return the same DomNodeState objects. So, you can even combine them.

Next, add the page model class to the test file as a reqular dependency and create an instance of it.

Then, add test actions and assertions.

This test creates a new todo item: types its name into the ‘New Todo’ input, presses Enter and checks that an item exists.

You don’t need to call wait methods. TestCafe automatically waits until the page is ready to execute test actions.

Also note that you can place actions, assertions and other JavaScript code in any order.

Running a Test

Create a new package.json file and add a test run command to it.

Now you are ready to run your first test.

npm test

Alternatively, you can specify that test should be run in several browsers.

testcafe chrome,firefox todomvc.js

Or you can run your test in all browsers installed on the local machine.

testcafe all todomvc.js

For more details, see TestCafe Command Line Interface

When you run the npm test command, TestCafe opens Google Chrome, executes the test, collects the output, closes the browser and sends the output to your shell.

If your assertion fails or test code contains syntax errors, TestCafe reports the problem including the callsite.

Let’s change the assertion code to

and run this test again. You will see the following report.

Extending TestCafe Functionality

What if TestCafe doesn’t provide certain functionality or browser support you need? Since TestCafe is a node.js application, you can use any modules from the node.js ecosystem. Also, TestCafe has two extension points: you can write your own browser plugins and reporter plugins.

Done

That is all. If you have question regarding TestCafe — feel free to ask on our forum or GitHub page!