How to use cypress

Home
Blog
How to use cypress

Author: Mao TAKAHASHI

Published: June 21, 2023

Set up cypress

This article will explain how to create automated E2E (End-to-End) tests using Cypress.

You can download Cypress from the "install" > "Direct Download" from the following URL.

JavaScript Component Testing and E2E Testing Framework | Cypress

However, using "Direct Download" can cause a slow performance after Cypress launched, so it is recommended to install using npm.

Regardless of installation method, the screen operation method after launching open cypress is almost the same.

$ npm init
$ npm install cypress --save-dev
# open cypress
$ ./node_modules/.bin/cypress open

When you execute the command above, the following screen will appear. Follow the steps without any changes.

Click “E2E Testing”

Click “Continue” button

Select “Chrome” and Click “Start E2E Testing in Chrome” button

This screen shows the browser installed on your PC.

Click “Create new spec”

Click “Create Spec” button

Click “Open run the spec” button

If all the steps can be completed without any problem up to this point, that means that the basic setup is complete! That's easy.

Cypress installation folder will look like below:

Writing Test Code

Next, let’s write tests in spec.cy.js.

For details on how to write, please refer to the official website documentation.

For detailed writing, please refer to the official website documentation.

Writing Your First E2E Test | Cypress Documentation

Below is a simple example code. Since Cypress run tests on every change made to the test case, you can run the test by just changing spec.cy.js.

describe('Reka', () => {
  context('Desktop resolution', () => {
    beforeEach(() => {
      cy.viewport(1920, 1080)
    })
    it('passes', () => {
      cy.visit('https://www.reka.arrangility.com/')
      cy.get('h1').should('contain', 'Testing Faster')
      cy.get('[href="https://www.contents.arrangility.com/signup/"]').eq(0).click()
      cy.get('h4').should('contain', 'Sign Up')
    })
  })
})

Run Cypress from the command line

When you run Cypress from CI/CD (Continuous Integration/Continuous Delivery), you would probably use the command line. In Cypress you can use the command line below to run your test. Also, for each test executed from the command line, a recording of the execution will be created in the video folder. Even though you cannot monitor the execution screen, you can check it afterwards.

$ npx cypress run --spec "cypress/e2e/spec.cy.js"

The following is an example of running multiple tests or running all tests in a specific folder.

#multiple
$ npx cypress run --spec "cypress/e2e/spec.cy.js,spec2.cy.js"
#group
$ npx cypress run --spec "cypress/e2e/*"

For details, see the official documentation.

Command Line | Cypress Documentation

Differences between Cypress and Selenium

I usually use Selenium to write automated tests. So, I would like to take this opportunity to show the differences between Cypress and Selenium. Each one has its own advantages, so it is best to select the one that matches our needs.

	Cypress	Selenium
Programming language	Javascript	Java, Python, C-Sharp, Ruby, JavaScript, Kotlin
Locators	css selector only	css selector, class name, id, name, xpath ,etc. https://www.selenium.dev/documentation/webdriver/elements/locators/#traditional-locators
Video recording	Automatic recording	Implementation required
Browser	Chrome, Edge, Electron, Firefox	Chrome, Edge, Firefox, IE, Safari
Environment building	easy	a little difficult.
Execution method	During implementation, it is executed each time it is saved.	Have to hit the command every time.

Conclusion

In this article I explain how to use Cypress. Since Cypress's environment setup is very easy, it helps to make it easy to start automated testing.

Also, because Cypress runs tests on every change made to the test case, it is possible to reduce the time and effort for operation checks during development.