Post
Ask Question

Set Up Cypress Project

In this article, we will see how to setup cypress test automation in our system and how to write tests in cypress.

What is Cypress?

Cypress is an open-source and free test automation tool. It can be used to test front end and perform API Testing as well.

It is not completely free but for using the cypress dashboard features then you need to pay and use its features.

Still we can use dashboard features freely in your team but it's only up to 3 users up to 500 test results.

How to install cypress?

Prerequisites

  1. Node Js installed
  2. Visual studio code installed

Steps

  1. Create a folder
  2. Open the folder in the visual studio code
  3. Set up a Node project using npm init -y command using the terminal. You will get the package.json file created with default values.
  4. Run the below command 
npm install cypress

Note: There is problem in installing the latest version of cypress. As I read in few other blogs we can overcome it by using the below command. Use this below command if you are facing any problem installing

npx cypress install --force a

Now run the command 

npx cypress open

This command will create a folder structure and will automatically open a cypress runner window.

In this runner window you need to configure two types of tests

  1. End to End test configuration
  2. Component level test configuration.

When you click configure then you will get option to run test on different browser. Select any browser. then click create an empty spec file.

It will have a default example test . just click add.

Once configured those configuration will get added in the folder section.

The folder section will look like this,

There is difference in folder structure using the cypress 10 version.

Lets look what are the uses of these folders,

Fixtures---> Fixtures folder is used to store test data.

Supports----> supports folder is used to write and store reusable code and use it in our tests.

e2e--->This folder contains all the end to end test files.

downloads-->This folder is automatically created when your test downloads any file and stores all the downloaded files.

If you need to run the tests, we can run the tests in the test runner itself

We can run the cypress test in the below browser,

  • Chrome
  • Electron
  • Edge
  • Firefox

We can also make use of CLI to run tests as well.

To run test use the below command

npx cypress run

By default cypress run tests in headless mode. If there is any failure in tests the screenshot is automatically taken and stored in screenshots folder. Videos for the tests run is also recorded and stored in videos folder.

To run cypress tests in head mode then use

npx cypress run --headed

Please find the sample test written with explanation given using comments

/*Cypress uses mocha test runner so we use describe and it blocks to write tests
describe block is a test suite
it block is a test case
*/
describe('empty spec', () => {
    it('passes', () => {
        /*we are using cy a global object and calling the api commands inorder to interact with the browser.
         Here we use the visit command to open the web application in the browser.
        */
        cy.visit('https://example.cypress.io')
    })
})

Hope this article helps you in setting up the cypress test automation in your system.

Thanks, happy learning.....


Similar Articles