Cypress : Next-Generation modern automation testing tool

Posted by: admin September 19, 2023 No Comments
Cypress

Cypress is a web automation testing tool which is used to automate testing for modern web applications. Cypress doesn’t build on Selenium WebDriver. Cypress is fundamentally and architecturally different than Selenium. It is based on Mocha and Chai syntax which is common amongst the Javascript users. If one has 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. The only disadvantage with using Cypress is that it only supports Chrome right now. But other browsers will be added in near future.

Let’s see how Cypress works in real action!

Pre-requisites for Cypress

  • NPM should be installed and working
  • Knowledge about Mocha and Chai syntax

Installing Cypress

NPM must be installed on your environment first, to install the Cypress. NPM is the package manager for JavaScript and the world’s largest software registry. If you are missing NPM, please install NPM following the instruction here (https://www.npmjs.com/get-npm)

Once NPM is installed, please run the following command with the Command Line inside your project directory :

npm install cypress --save-dev

Verify the installation by opening the Cypress UI using the following command

node_modules\.bin\cypress open

This command should open the Cypress UI successfully. It may take some time to open the Cypress UI, so patience is the key here.

Working with Cypress Examples

As you already have opened the Cypress UI on previous step, you should be able to see some .js files inside the Examples folder on Cypress UI.

All these .js files are example test case files that comes bundles with the Cypress package. You can click any of these files to see them running in action. It will open an instance of Google Chrome browser and start executing the test cases related to the spec file that you have run. Once all test case are done, you will see a screen like this :

The left side panel on this screen lists all test cases that has been executed inside this spec file along with their status (green tick for passed tests and red cross for failed tests). In our example all tests are passed, so we have green tick with all the test cases. You can click on any of the test case inside the left panel to see the actions and assertions performed with the particular test case.

Hovering over any of the test step from the above screen will show you the screenshot taken during that step and highlighting the UI element on which action is taken.

So, now you know how to run test cases with Cypress using the Cypress UI and how to check the results. Let’s move on to creating our own test case now.

Implementing first test case with Cypress

As we saw with the inbuilt examples, there are several .js files called spec files which act as the test case files here. Similarly, we will create our own spec .js file and add our test case there. From now on, we will be calling .js test case files as spec files.

Spec files should always be inside /cypress/integration directory. You can create your own directories inside /integration directory to categorize the test cases. So, we will first create a new directory inside /integration directory and will call it “cypressTest”. Inside cypressTest directory, we would create a new .js file called “firstTest.js”. This is our spec file where we will write our test case.

For testing purpose, we are going to use a demo hospital management website and will run our test case against it. The demo website in our test is

https://demo.openmrs.org/openmrs/login.htm

Open firstTest.js file with any text editor of your choice and copy the following code snippet to it :

describe('Login and Logout to Inpatient Ward', function() {
  it('Login as admin', function() {
    cy.viewport(1440,1200)
    cy.visit('https://demo.openmrs.org/openmrs/login.htm')
    cy.get("input#username")
        .type('Admin')
    cy.get("input#password")
        .type('Admin123')
    cy.get("[id='Inpatient Ward']")
        .click()
    cy.get("input#loginButton")
        .click()
    cy.get("div#home-container h4")
        .should('contain', 'Logged in as Super User () at Inpatient Ward')
  })
  it('Logout from Inpatient Ward', function() {
    cy.get("li.logout a")
        .click()
    cy.get("input#loginButton")
        .should('exist')
  })
})

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.

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

‘describe’ and ‘it’ are the typical syntax for Mocha and Chai. ‘describe’ as name suggests, describes the test scenario. ‘it’ contains the description for exact test case and its action. So, in above code, our test scenario is “Login and Logout to Inpatient Ward” which describes our test scenario. Inside this ‘describe’ element, we have two ‘it’ elements, each contains a test case and its description.

Running the test case

As explained earlier with the Examples section, we can run the test case by clicking the file name on Cypress UI. So, now on Cypress UI, if you collapse the Examples folder, you will see the CypressTest folder which you created and there will be firstTest.js file inside this folder. Simply click the firstTest.js file on Cypress UI to run this test.

So, we have the test cases and its actions listed in the left panel and on the right side view we have the actual test running on the website. All our tests passed, so we don’t see any failures or errors here. Let’s try to fail one of our tests. Let’s change the code and run our tests again.

describe('Login and Logout to Inpatient Ward', function() {
  it('Login as admin', function() {
    cy.viewport(1440,1200)
    cy.visit('https://demo.openmrs.org/openmrs/login.htm')
    cy.get("input#username")
        .type('Admin')
    cy.get("input#password")
        .type('Admin123')
    cy.get("[id='Inpatient Ward']")
        .click()
    cy.get("input#loginButton")
        .click()
    cy.get("div#home-container h4")
        .should('contain', 'Logged out as Super User () at Inpatient Ward') <= (Changed the assertion text from Logged in to Logged out)
  })
  it('Logout from Inpatient Ward', function() {
    cy.get("li.logout a")
        .click()
    cy.get("input#loginButton")
        .should('exist')
  })
})

This test will fail because the .should assertion will try to find the text in <h4> element which starts with “Logged out”, however in actual the text starts with “Logged in”. Let’s run this test.

We can clearly see a failed assertion here about incorrect text.

Hope this article helps you to get started with Cypress testing tool. Please share your comment below for any concerns.

Happy testing!

Leave a Reply