TestCafe Tests in an Angular Project

Running e2e tests integrated with Angular CLI

Angular version: 8.2.5
TestCafe version: 1.4.1
Node version: 10.16.3
Angular-testcafe-builder: 2.0.6

This tutorial describes how TestCafe can be used to test your Angular application. Using the Angular CLI builder angular-testcafe TestCafe integrates with the Angular ng e2e target. The big advantage here is, that you shouldn’t wait for your application te be ready to be tested, but TestCafe immediately starts after the application is ready.
I assume you already have an Angular project setup. The below steps are applied on an example project on Github.

Install TestCafe and the angular-testcafe builder

TestCafe and the angular-testcafe builder can be installed as dev dependency:

Configure Angular to use TestCafe

Below settings can be configured in the angular.json file. The options are similar to the arguments of the TestCafe command line. Check schema.json for a list of all options.

Check schema.json for a list of all options.

Now, Angular runs TestCafe after starting the application when using ng e2e. However, we don’t have any tests already. So lets make one to demonstrate. Let me put these tests in e2e/homepage.e2e-spec.ts:

Angular Selectors

In TestCafe’s documention, the Angular Selectors projects is mentioned to have selectors especially for Angular elements (npm install --save-dev testcafe-angular-selectors). However, for my projects TestCafe had no problems finding my elements without the Angular Selectors. Only once, when the loading of the page was a little complicated. The only thing I did was to wait for Angular to be ready (Angular has to be run in development mode):

As noted before, a sample can be found on Github to demonstrate.