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.
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.
test.js file and copy the following code into it.
In this test, we’ve checked that the application title equals
test represents a single test case. And
fixtureworks 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:
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:
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
Let’s run the test again with
npm test command and see that it passed.
Running tests in various browsers
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
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
"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).
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
The ‘testcafe-angular-selectors’ plugin extends the built-in TestCafe element selectors. This plugin adds methods (
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.