Angular CLI comes with E2E testing out of the box.

This guide displays how to quickly get a new Angular CLI project running, some of the important files for E2E, basic E2E language and syntax and some simple tests that can be expanded upon.

Prerequisites

• NodeJs
• Angular CLI

This project was built using Angular CLI: 7.2.3 and Node: 11.8.0.

1. Open command prompt and type ng –version to verify.

You should get something like this.

2. Create a new Angular app by typing ng new endtoend-app.

3. Change directory to the new app cd .\endtoend-app\.

Now typing ng serve will run the app.

4. Stop the app and look at the folder structure, it should look like this.

The app has an app.e2e-spec.ts file and an app.po.ts file.

The app has an app.e2e-spec.ts file describes the tests to be ran and should look something like this.

The app has an app.po.ts file is used to create a page object that can be used to return and interact with individual elements on the page. It should look something like this.

5. In the command prompt type ng e2e to run tests, the default tests should pass provided the title in the <h1> element hasn’t been changed.

It should look something like this. (This example has 3 extra tests, by default the ‘should display welcome message’ test is the only test available)

Now that E2E is running it’s time to experiment with it.

Full project is available here (https://github.com/ericcolganwork/endtoend-app)

I have added some simple features to be tested.

getUsers() Should now display a list of users and change the user status message

deleteUsers() Should delete the list of users and change the user status message

Here are the tests using the spec and page object.