How to write better automated tests with Cypress in Angular

Hello devs and testers, in this article I’ll show you how we can write automated end-to-end tests on the Angular projectTodo App on cypress. We will go over have some scenarios for doing our e2etests that we will cover one by one. This article will only cover the cypress parts on Angular.

So, if you just want to write some tests right now, clone this repo that I have already created with the angular Todo App project and cypress configured in it. Here’s the repo link. Simply clone this if you want everything ready for you to play with cypress.

But, before moving to our examples, we first need to know what Cypress is. According to its official Website:

Cypress is an automated end-to-end testing framework for writing automated tests

Why Cypress?

But why should we use cypress when we have many other testing tools like Protactor, Karma, Mocha, etc.

Cypress is much like Protractor for Angular applications, but Cypress is much faster to run and easier to debug. Cypress is not only good at the automated end-to-end testing that is independent of our applications – it is also capable of unit testing against methods in model classes, service classes, etc. Cypress provides a complete end-to-end testing experience in your browser, where you can see your tests in an automated way.

Cypress provides its own test runner where you can test locally. Cypress provides some other cool features like:

• Time Travel

• Debuggability

• Real-time reloads

• Automatic waiting

These brilliant features make up this tool. We will now see them in action.

Step by step guide

So, enough talk, if you’ve already cloned this repo, you’re good to go, but if not, then you probably have an angular project and need to add Cypress as a dependency. We only need to install an npm package cypress using the following command:

npm i -D cypress

The cypress package includes a desktop app and the Cypress binary. It may take a few minutes to run this command for the first time because the package installation needs to download the Cypress binary. The Cypress binary is saved in a global cache directory, so installing this package in the future will be much faster for the same version.

After Installing Cypress, a folder named cypress and a file named cypress.json will have been added into your project’s root folder. The generated cypress folder is where we write tests and where Cypress generates artifacts. The generated configuration file cypress.json contains an empty JSON object. This file is the place where we configure the default behavior of Cypress. So, I will be doing some configuration before writing our tests.

In your cypress.json file, add the below code for the default config:

{
  "baseUrl": "http://localhost:4200",
  "ignoreTestFiles": "**/examples/*",
  "viewportHeight": 760,
  "viewportWidth": 1080
}

As their name suggests, you will write your tests on baseUrl, which is localhost:4200 for angular projects.

When you add Cypress into your project, it provides an examples folder in which some demo test files are included, but we don’t need default example tests in our project so we exclude this from our Test Suite.

So, that’s it for our setup. Now, let’s write some code for our first test.

In your folder structure under the cypress folder, you’ll see an integration folder. This folder is where you’ll write all your tests so that you can see on your test suite.

Create your first test file, DemoTest.spec.js, and add the code below into that file:

describe("Our Todo App Test Suite", () => {
  it("Visiting our app", () => {
    cy.visit("/");
    cy.get(".nav-wrapper").contains("Items Manager");
  });
});

In the code above, we used the describe function, which is responsible for all our cases.

The describe function is often called a Suite or Test Suite.

Under the describe function, we will use the it function where we write our test code. In the above case, we are visiting our angular app with cy.visit("/"), and we are verifying that it’ll contain a nav-wrapper class that contains text Items Manager.

There are many API’s provided by cypress from getting an element to make assertions and more. Here, cy.get() is used to getting the element’s reference from DOM. This is the most used API from cypress.

Now, open the second cmd terminal and type:

npx cypress open       //to open cypress test runner

It will take some time at first, but you should see something like this:

This is called Test Runner. Click on your file name DemoTest.spec.js, and another instance of the browser will open for your test. Now, you can see how easy and fast it is to work on cypress tests.

Let’s write another test for typing into the input fields and add a new todo by clicking the Submit button:

describe("Our Todo App Test Suite", () => {
  it.only("Type title and description", () => {
    cy.visit("/");
    cy.get("input[name='title']").type("Lunch")
    cy.get("input[name='description']").type("Eating lunch at 1")
    cy.get('input[type="submit"]').click()
    cy.get("ul.collection").find("li > strong").should("contain", "Lunch")
  });
  });
});

When you run this case, it will type into both input fields and click on the Submit button which, in this case, will add a new Todo Item in our Todo list. We will then assert that our added todo contains the text. Lunch.

Now, let’s see an example of how to delete a Todo item and verify that it has been deleted.

describe("Our Todo App Test Suite", () => {
  it.only("Type title and description", () => {
    cy.visit("/");
    cy.get("ul.collection > li").eq(1).find("a").click()
    cy.get("ul.collection > li").eq(1).find("form").find('button[class="btn red"]').click()
    cy.get("ul.collection > li").eq(1).should("not.exist")
  });
  });
});

So, that’s how you do e2e testing by cypress!

Now, try to update some value in cypress by yourself. If you are able to do it successfully, then congrats, you can call yourself an Automation Test Engineer because that’s what automation test engineers!

I hope you guys liked this article and have learned something new.

Happy Testing ✌️✌️