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 testcafe
npm 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.
In this test, we’ve checked that the application title equals todos
. Here test
represents a single test case. And fixture
works as a suite of these tests. To learn more about test structure go to the documentation.
To run a test create package.js
file in the same folder with test.js
. Copy the following code into this new file:
Now we can run the test with this command:
npm test
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.
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
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.
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.