If you write with 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. AngularJS In this tutorial, I’ll show how to use for testing apps. TestCafe AngularJS Setup TestCafe is a solution. So you’ll need a version 4.x and higher installed. Node.js Node.js Now let’s install TestCafe and from npm: testcafe-angular-selectors plugin 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 app for this tutorial. TodoMVC Create a file and copy the following code into it. test.js The test has passed. By default, TestCafe displays the reports in the shell where you launch the tests. These reports are represented in , a human readable reporting format. If you want to use other formats (e.g. json, xUnit, Slack messages) you can try one of the or create your own with help of the . Spec existing plugins official tutorial Using AngularJS selectors Let’s modify the test to interact with page elements. We’ve added new selectors: and . They come from the . finds an element by ng-model expression. And finds elements by ng-repeat expression. byModel byRepeater testcafe-angular-selectors plugin that we've installed earlier byModel byRepeater As you see, we first check that the number of todo items equals 0. Then we type 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 Item 1 Let’s run the test again with command and see that it passed. npm test Results of the second test run Running tests in various browsers TestCafe supports latest versions of popular browsers out of the box. And with , you can run your tests in cloud browser providers. Read more about . plugins 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 to run tests in all browsers that TestCafe has found. Add the following line to the file: all package.json "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 for more information. the docs 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 . If you need more functionality in test code, you can use any node.js module. TestCafe also provides the extended capabilities for and . TestCafe ecosystem using portable and remote browsers customising the test reports And if you feel like making your own plugin, check out the . You can also send a quick note to TestCafe developers to share your plugin with the community (via or ). tips in the documentation GitHub issue 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 tag. #TestCafe The ‘testcafe-angular-selectors’ plugin extends the . This plugin adds methods ( , & 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. built-in TestCafe element selectors byModel byBinding To learn about news and updates follow . And if you have questions, feel free to ask them on the or look through the . TestCafe on Twitter forum GitHub issues page

E2E Testing AngularJS applications with TestCafe

Too Long; Didn't Read

Companies Mentioned

@amoskovkin

RELATED STORIES