E2E Testing AngularJS applications with TestCafe

If you write with AngularJS then most likely testing with Protractor is the first thing that comes to your mind. But is it the only option? If you’re curious about the alternatives, read ahead.

In this tutorial, I’ll show how to use TestCafe for testing AngularJS apps.

Setup

TestCafe is a Node.js solution. So you’ll need a Node.js version 4.x and higher installed.

Now let’s install TestCafe and testcafe-angular-selectors plugin from npm:

npm install testcafenpm install testcafe-angular-selectors

And that's it, everything else comes out of the box. TestCafe doesn't use WebDriver. If you wonder how and why take a look at the FAQ.

Making the first test

Let’s make a simple test and run it. We’ll use the TodoMVC app for this tutorial.

Create a test.js file and copy the following code into it.

The test has passed. By default, TestCafe displays the reports in the shell where you launch the tests. These reports are represented in Spec, a human readable reporting format. If you want to use other formats (e.g. json, xUnit, Slack messages) you can try one of the existing plugins or create your own with help of the official tutorial.

Using AngularJS selectors

Let’s modify the test to interact with page elements.

We’ve added new selectors: byModel and byRepeater. They come from the testcafe-angular-selectors plugin that we've installed earlier. byModel finds an element by ng-model expression. And byRepeater finds elements by ng-repeat expression.

As you see, we first check that the number of todo items equals 0. Then we type Item 1 and press Enter. Next, we add two assertions: one that checks that now there is 1 element and another one that checks that the text of this element equals Item 1.

Let’s run the test again with npm test command and see that it passed.

Results of the second test run

Running tests in various browsers

TestCafe supports latest versions of popular browsers out of the box. And with plugins, you can run your tests in cloud browser providers. Read more about browser support in the documentation.

TestCafe itself will detect which browsers you have installed on your local machine. To run the tests in several browsers list them separated by commas. Add one more command to package.json:

Now launch tests with:

npm run test-in-chrome-and-ff

Results for the tests launched in Chrome and Firefox

Or use the word all to run tests in all browsers that TestCafe has found. Add the following line to the package.json file:

"testcafe-in-all-browsers": "testcafe all test.js"

Tests are executed simultaneously in all the browsers you specify. You can also run your tests concurrently in several instances of the same browser. This makes a test batch complete faster. See the docs for more information.

Viewing reports for failed tests

Let’s modify the test to see a report for a failed test. Change the last assertion so the test will fail:

Launch the tests again to see the error report.

TestCafe highlights the line where the assertion has failed

For each failed test TestCafe reports the browser, callsite and other details allowing you to quickly find the fail reason. To fix the test we should replace 2 with 1 in the last assertion.

Extending TestCafe Functionality

You can visit GitHub to learn more about the TestCafe ecosystem. If you need more functionality in test code, you can use any node.js module. TestCafe also provides the extended capabilities for using portable and remote browsers and customising the test reports.

And if you feel like making your own plugin, check out the tips in the documentation. You can also send a quick note to TestCafe developers to share your plugin with the community (via GitHub issue or Twitter).

Conclusion

Now you’ve seen how to use TestCafe for e2e tests in AngularJS applications. You can try it yourself and see if it fits your testing needs. And don’t forget to share your thoughts on twitter with #TestCafe tag.

The ‘testcafe-angular-selectors’ plugin extends the built-in TestCafe element selectors. This plugin adds methods (byModel, byBinding & etc.) that let you find elements by AngularJS bindings. A plugin for Angular (v2.x) is coming soon too. It will provide component selectors allowing to access elements by Angular's component tag names.

To learn about news and updates follow TestCafe on Twitter. And if you have questions, feel free to ask them on the forum or look through the GitHub issues page.