Angular Nx Tutorial - Step 2: Add E2E Tests

By default, Nx uses Cypress to run E2E tests.

Open apps/todos-e2e/src/support/app.po.ts. It's a page object file that contains helpers for querying the page.

Add the following two helpers:

1export const getTodos = () => cy.get('li.todo');
2export const getAddTodoButton = () => cy.get('button#add-todo');
3

Next, update apps/todos-e2e/src/e2e/app.cy.ts.

1import { getAddTodoButton, getTodos } from '../support/app.po';
2
3describe('TodoApps', () => {
4  beforeEach(() => cy.visit('/'));
5
6  it('should display todos', () => {
7    getTodos().should((t) => expect(t.length).equal(2));
8    getAddTodoButton().click();
9    getTodos().should((t) => expect(t.length).equal(3));
10  });
11});
12

This is a simple example of an E2E test, but it suffices for the purposes of this tutorial.

If you have not done so already, stop the npx nx serve command and run npx nx e2e todos-e2e --watch.

A UI opens. Click the button in the top right corner that says "Run 1 integration spec". Keep the E2E tests running.

As you progress through the tutorial, you work on making these E2E tests pass.

What's Next