If you’ve been developing frontend applications recently, you’ve undoubtedly heard of Cypress.io. Cypress is a powerful testing framework that makes writing tests easy and really fun. I’ve used Cypress on a number of projects, and had a great experience. In this post I’m going to introduce Cypress, and walkthrough using Cypress with an Angular project.

The Angular project that I use for this post can be found 

Traditionally speaking, writing tests for projects has been a chore for developers. Cypress is a framework that enables you to more easily write tests for your frontend applications. One of the best parts about Cypress is that it 

 to write tests, you get better projects for both the developer and user.

Why is testing important? Having tests enables you to quickly verify changes, be pseudo documentation, verify your apps health, and promote good code practices overall.

Cypress makes tests easier as it is (1) interactive and (2) runs alongside your application. This means that the Cypress test runner has full access to your code, and doesn’t run externally like Selenium frameworks do.

Since it uses these known frameworks, the syntax is very familiar like so:

describe('Form Test', () => {
  it('should visit home page', () => {
    cy.visit('/home-page');
  });
});

It’s really incredible to see it all in action. When you run Cypress it opens a Chrome Browser and has your application running on the right with the Cypress test history on the left:

As you can see from the video, the Cypress test runner shows the execution steps of your tests. You can see what happened at each step, and even 

 back to what the app looked like at a specific point. You also can use the test runner to be able to select elements for tests (think xpath queries with Karma).

Additionally, with the Cypress test runner you get an output in the form of a report and video. You can store that output locally or 

For the purposes of our post here, we’re just going to walkthrough setting up Cypress locally. For additional information, I recommend checking out my 

. I also recommend Michael Karén’s Angular-In-Depth post on 

So before you can write Cypress tests, you’ll need to install it as a dev dependency of your application.

Go to your project root and do the following:

I should note that you can also do this same process in CI. Please consult the 

Once you’ve got it installed locally, you can run it directly from your 

I usually make this a npm script so I can just run it like so:

"cypress-open": "./node\_modules/.bin/cypress open"

You should also notice that Cypress right out of the box has several examples in the 

 folder. These are really helpful when you’re first getting started. If you click “run all specs” you’ll see it run through the examples one file at a time.

Additionally, on your first run of Cypress notice several folders are created in your project:

 npm script I mentioned, you are working directly with the test runner. If you want to run it directly (as you would in CI) you’ll need to call 

. You can do this with another npm script like the following:

"cypress-run": "./node\_modules/.bin/cypress run"

Go ahead and run the npm script with the following:

What you’ll find is that cypress will run the example tests right out of the box. This is nice because you can see what your CI output would look like. It also saves the videos (by default) in the “videos” directory.

 created with Cypress are only done when using 

, and not when just using the test runner locally. You can see more on this in 

Also, Cypress can be configured with the 

 file in your project’s root directory. Please consult the 

In the next section we’ll write our first test!

So as I mentioned in the intro, I’m going to be writing Cypress tests with my 

 of that project if you haven’t already done so.

Before we proceed, we also need to make sure we can run Cypress alongside our application. If you just open cypress like we did before, it runs the test runner against the 

. This is great, except we want to run Cypress against a locally running application instead of a hosted environment.

How do we do this? There are several npm packages that will achieve this for us. I recommend the following:

Since I’m focusing on local testing for this post, I’m just going to cover using 

First install concurrently in your project with:

Next I recommend creating an npm script that will call concurrently. You just have to supply concurrently two processes for it to run together. Here’s the script I created:

"cypress-local": "concurrently \"npm run start\" \"npm run cypress-open\""

Once you’ve done that, run the following:

It should start the Cypress electron app and look like the following:

As you can see in the screenshot, Cypress is seeing the example files.

I recommend moving the examples from the 

 folder to a different directory outside of the 

 directory. This way the test runner only reads in the spec files you want to create and you don’t haver to be bothered with the default examples.

So now let’s go ahead and create a spec file for our first test.

In the sample app I’ve got pages that include:

I’ve also already built out tests for each page:

 that we can use to start. this file is found at 

The login form I’ve included with my sample app looks like the following:

 file already has a test that accesses the home page:

describe('Form Test', () => {
  it('should visit home page', () => {
    cy.visit('http://localhost:4200/home-page');
  });
});

To make things easier, lets add a base URL in the 

 file. This will prefix any URL paths we use to have the same base so we don’t have to type 

Now lets change our test to just go to the 

Now when you run the test, you should see the same result.

We’re going to find the start button on the home page, and then pass a 

 event to it. If you notice in the screenshot here, the “Cypress Selector Playground” tooltip is highlighted. We’ll need to click on that to turn that on. Once it’s on, you can select anything on the page and Cypress will generate the “cy.get” code for whatever element you’re trying to interact with.

 file from before. Run the test, and when it finishes click on the Playground Selector. Next click on the “start” button.

 detected that the “start button” had an ID of “startButton,” and created the line of code to get it as the following:

So lets go ahead and add that to a new test, where we go to the home page, and click the start button like so:

describe('Form Test', () => {
  it('should visit home page', () => {
    cy.visit('/home-page');
  });

  it('should visit home page and click start', () => {
    cy.visit('/home-page');
    cy.get('#startButton').click();
    cy.get('h1').should('contain', 'Learn Cypress');
  });
});

 to do an actual test. I’m verifying that the 

 element on the page has the text “Learn Cypress.” Since this all sits on top of mocha, chai, and sinon this is somewhat intuitive if you’ve used test runners before.

When you run the test again, you should see the following:

Now let’s wrap up the test by actually going to the page, entering a value and checking that the value is entered.

describe('Form Test', () => {
  it('should visit home page', () => {
    cy.visit('/home-page');
  });

  it('should visit home page and click start', () => {
    cy.visit('/home-page');
    cy.get('#startButton').click();
    cy.get('h1').should('contain', 'Learn Cypress');
  });

  it('should go to the forms page and enter login information', () => {
    cy.visit('/home-page');
    cy.get('#startButton').click();
    cy.get('h1').should('contain', 'Learn Cypress');
    cy.get('#formsButton').click();
    cy.get('#email').type('HanSolo@gmail.com');
    cy.get('#password').type('password');
    cy.get('#submitButton').click();
    cy.get('#popupMessage').should('contain', 'login successful');
  });
});

In most frontend applications you’ll utilize a list of some form. In my sample project I’ve included a list page that has a basic list that you can add and delete records from.

In my sample project if you look at the file 

 you’ll see the list tests that I’ve written.

describe('List Test', () => {
  it('should go to the list page and add a value', () => {
    cy.visit('/home-page');
    cy.get('#startButton').click();
    cy.get('h1').should('contain', 'Learn Cypress');
    cy.get('#listsButton').click();
    cy.get('#createInput').type('use the force Luke!');
    cy.get('#createButton').click();
    cy.get('li')
      .eq(4)
      .should('contain', 'use the force Luke!');
  });

  it('should go to the list page and delete a value', () => {
    cy.visit('/home-page');
    cy.get('#startButton').click();
    cy.get('h1').should('contain', 'Learn Cypress');
    cy.get('#listsButton').click();
    cy.get('#createInput').type('use the force Luke!');
    cy.get('#createButton').click();
    cy.get('li')
      .eq(4)
      .should('contain', 'use the force Luke!');
    cy.get('li > .value-row > .btn')
      .eq(4)
      .click();
    cy.get('ul')
      .its('length')
      .should('be.eq', 4);
  });
});

They’re very simple but basically just tests behavior for adding and removing a value from the list. If you notice, Cypress enables you to select items within a list with the “eq” syntax. This is really powerful, and also very intuitive.

In this case I found the fifth (counting starts at 0) element that I added, and did an assertion of its value.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to get started with Cypress

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript