Cypress Tutorial : A Brief Introduction to Cypress

This is a Cypress Tutorial which explains the basics of Cypress. Let’s start the Cypress 101 Article!

Cypress is a next-generation automation testing tool built for the modern web application. The most important part of it, it doesn’t build on Selenium WebDriver. Cypress is fundamentally and architecturally different than Selenium.

Cypress tests are implemented on Mocha and Chai. Its syntax will be familiar to Javascript users. This means that if you have ever worked with Javascript, it will be especially easy to start using Cypress.

Selenium is made up of bindings, or libraries, and the WebDriver. All those components help test engineers when controlling the browsers. These two components work through the JSON network. But Cypress uses its own DOM manipulation strategy. There’s no network communication or what so ever.

Biggest disadvantages of Cypress is that it only supports Chrome right now. But other browsers will be added in near future.

Let’s see how to use Cypress in nutshell!

How to Install Cypress?

You need to have npm installed in your environment to install Cypress. NPM is the package manager for JavaScript and the world’s largest software registry. In case you don’t have NPM in your development environment, you should install it by following the instructions on the link (https://www.npmjs.com/get-npm).

Then you should run below command to install Cypress.

npm install cypress

How to Open Cypress UI

Cypress has a client coming with the installation. You should run below command to open Cypress IDE.

./node_modules/.bin/cypress open

or

npx cypress open

How to Implement First Test Cases

You need to browse to your cypress installation folder and create a javascript file. After that, you will be able to see newly created javascript file in Cypress IDE.

cypress-tutorial cypress

Then open your js file with your favorite editor to edit it.

Then copy paste this code snippet in your js file.

describe('My First Test', function() {
  it('Search on amazon', function() {
    cy.viewport(1440,1200)
    cy.visit('https://www.amazon.com/')
    cy.get('#twotabsearchtextbox').type('Superman')
    cy.get('.nav-search-submit .nav-input').click()
    cy.get('span.a-color-state').contains('Superman')
  })
})

As you can see, there is a cy object that we always use. Cy object allows you to interact with the browser. It should be used before every command. Let’s take a look at what the code does.

  • cy.viewport(HEIGHT, WIDTH): This command changes the screen size according to the value that you provide
  • cy.visit(‘URL’): This method is the navigation method for Cypress. It calls the given URL
  • cy.get(‘locator’): This method takes an argument which is the CSS locator of the web element that we want to interact.
  • cy.get(‘locator’).type(‘INPUT’): This method allows you to fill the input fields.
  • cy.get(‘locator’).click(): This method allows you to click a clickable object.
  • cy.get(‘locator’).contains(‘EXPECTED_VALUE’): This method makes an assertion to the web element that you specified.

How to Execute Test

You just need to open Cypress UI and click the desired test. It will start a Chrome instance. This chrome instance has 2 parts. On left-hand side, there’s a viewport for executed commands, on right hand side, there’s the preview part.

cypress execution

In case there’s an error. Cypress will warn you about the issue on command viewport.

Lets’ change the code and run the test once again.

describe('My First Test', function() {
  it('Search on amazon', function() {
    cy.viewport(1440,1200)
    cy.visit('https://www.amazon.com/')
    cy.get('#twotabsearchtextbox').type('Superman')
    cy.get('.nav-input').click()
    cy.get('span.a-color-state').contains('Superman')
  })
})

This test is going to fail because there are two elements with selector .nav-input. So Cypress will warn you about it.

cypress error

This is our first article on Cypress. We’ll continue to explore for more. Keep in touch!

Canberk

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.