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.
To start using TestCafe, you will need to install it via
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
Next, specify the startup page for the fixture.
Page model, test actions and assertions
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.
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.
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.