Getting started
Tutorial total points: 0 / 92

Step 2: Add E2E Test

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:

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

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

import { getAddTodoButton, getTodos } from '../support/app.po';

describe('TodoApps', () => {
  beforeEach(() => cy.visit('/'));

  it('should display todos', () => {
    getTodos().should(t => expect(t.length).equal(2));
    getTodos().should(t => expect(t.length).equal(3));

This is, obviously, not a great example of an E2E test, but the purposes of this tutorial it will do.

If you haven't done it already, stop the ng serve command and run ng e2e todos-e2e --watch.


What assertion fails?

  • Cannot find any elements matching 'button#add-todo'

  • Expect 0 to equal 2

  • Cannot find any elements matching 'li.todo'

  • Nothing fails. Everything works.