Introduction is a 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. Aurelia JavaScript 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 team made a plugin that brings native Aurelia selectors to TestCafe tests: . TestCafe 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 file and write and definitions. todomvc.js fixture test 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 . 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. Page Model Let’s define the page model. We use the Aurelia selector to identify a new todo item input, which is bound to the value. To identify the list of todo items, we use a TestCafe CSS . byValueBind newTodoTitle selector You can use Aurelia-specific selectors and built-in TestCafe selectors together. These selectors return the same objects. So, you can even combine them. DomNodeState 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 file and add a test run command to it. package.json 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 command, TestCafe opens Google Chrome, executes the test, collects the output, closes the browser and sends the output to your shell. npm test 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 application, you can use any modules from the node.js ecosystem. Also, TestCafe has two extension points: you can write your own and . node.js browser plugins reporter plugins Done That is all. If you have question regarding TestCafe — feel free to ask on our or ! forum GitHub page
