---
title: "Testing web applications using Cypress"
canonical: "https://docs.getxray.app/space/XRAY/301508241/Testing%20web%20applications%20using%20Cypress"
format: markdown
---
> ℹ️ **What you'll learn**
> ℹ️
> ℹ️ - Define tests using Cypress
> ℹ️ - Run the test and push the test report to Xray
> ℹ️ - Validate in Jira that the test results are available
> ⚠️ **Source-code for this tutorial**
> ⚠️
> ⚠️ - code is available in [GitHub](https://github.com/Xray-App/tutorial-js-cypress)
# Overview
Cypress is a JavaScript based testing framework for test automation. Cypress is often compared to Selenium, but it is different; unlike Selenium that is executed outside of the browser Cypress is executed within it, in the same run loop as your application.
Cypress runs in a NodeJS server process that allows Cypress and the NodeJS server to constantly communicate, synchronize, and perform tasks on behalf of each other. This provides Cypress the ability to respond to the application's events in real time, and at the same time work outside of the browser for tasks that require a higher privilege.
# Prerequisites
Expand
For this example we will use [Cypress](https://www.cypress.io/) to write tests that aim to validate the[ ](https://github.com/microsoft/playwright-test/blob/master/README.md)[Cypress todo example](https://example.cypress.io/todo).
We will need:
- Access to a [Cypress todo example](https://example.cypress.io/todo) site that we aim to test
- [Cypress ](https://www.cypress.io/)installed in your machine
To start using the [Cypress](https://www.cypress.io/) please follow the [Get Started](https://docs.cypress.io/guides/getting-started/installing-cypress) documentation.
The tests consists in validating the operations over todo's elements of the [Cypress todo example](https://example.cypress.io/todo), for that we have defined several tests to:
- Validate that we can add new todo items;
- Validate that we can check an item as completed;
- Validate that we can filter for completed/uncompleted tasks;
- Validate that we can delete all completed tasks.
The target web application is a simple "todos" made available by Cypress.
Each of these tests will have a series of actions and validations to check that the desired behavior is happening as we can see below:
todo.cy.js
```javascript
describe('example to-do app', () => {
beforeEach(() => {
cy.visit(Cypress.config('baseUrl'))
})
it('can add new todo items', () => {
const newItem = 'Feed the cat'
cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
cy.get('.todo-list li')
.should('have.length', 3)
.last()
.should('have.text', newItem)
})
it('can check an item as completed', () => {
cy.contains('Pay electric bill')
.parent()
.find('input[type=checkbox]')
.check()
cy.contains('Pay electric bill')
.parents('li')
.should('have.class', 'completed')
})
context('with a checked task', () => {
beforeEach(() => {
cy.contains('Pay electric bill')
.parent()
.find('input[type=checkbox]')
.check()
})
it('can filter for uncompleted tasks', () => {
cy.contains('Active').click()
cy.get('.todo-list li')
.should('have.length', 1)
.first()
.should('have.text', 'Walk the dog')
cy.contains('Pay electric bill').should('not.exist')
})
it('can filter for completed tasks', () => {
cy.contains('Completed').click()
cy.get('.todo-list li')
.should('have.length', 1)
.first()
.should('have.text', 'Pay electric bill')
cy.contains('Walk the dog').should('not.exist')
})
it('can delete all completed tasks', () => {
cy.contains('Clear completed').click()
cy.get('.todo-list li')
.should('have.length', 1)
.should('not.have.text', 'Pay electric bill')
cy.contains('Clear completed').should('not.exist')
})
})
})
```
The tests are simple but let's look into two diferences that allow a little more control, the first one is the possibility to use hooks like `beforeEach` to, as the name implies, execute some operations before each test execution. In this example we are accessing the target page before each test avoiding repeating this instruction in each test.
beforeEach
```javascript
...
beforeEach(() => {
cy.visit('https://example.cypress.io/todo')
})
...
```
The other one helps in the test organization and have a direct effect on how the results will be written in the result file, in our case we are using `context` (but we could use `describe` or `specify`). This will group the tests beneath into the same testsuite.
context
```javascript
...
context('with a checked task', () => {
...
```
These tests are defined to validate the application ability to manage todo's by accessing the [Cypress todo example](https://example.cypress.io/todo) and performing operations that will generate an expected output.
Once the code is implemented it can be executed with the following command:
```shell
npx cypress run
```
The results are immediately available in the terminal.
In this example, all tests have succeed, as seen in the previous terminal screenshot. It generates the following JUnit XML report.
Junit Report
```
```
Notes:
- You can invoke Cypress locally and use it to assist you to write and execute tests with: `npx cypress open`
- Use `cypress.config.js` to define configuration values such as taking screenshots, recordings or the reporter to use (more info [here](https://docs.cypress.io/guides/references/configuration)).
- Different parameters can be used in the command line (more info [here](https://docs.cypress.io/guides/guides/command-line))
- We are using JUnit reporter but others are available (more info [here](https://docs.cypress.io/guides/tooling/reporters))
---
# Integrating with Xray
As we saw in the previous example, where we are producing JUnit reports with the test results. It is now a matter of importing those results to your Jira instance; this can be done by simply submitting automation results to Xray through the REST API, by using one of the available CI/CD plugins (e.g. for Jenkins), or using the Jira interface to do so.
> Macro (ui-tabs)
>
> > Macro (legacy-content)
>
> > Macro (legacy-content)
# Tips
- after results are imported, in Jira Tests can be linked to existing requirements/user stories, so you can track the impacts on their coverage.
- results from multiple builds can be linked to an existing Test Plan, to facilitate the analysis of test result trends across builds.
- results can be associated with a Test Environment, in case you want to analyze coverage and test results by that environment later on. A Test Environment can be a testing stage (e.g. dev, staging, preprod, prod) or a identifier of the device/application used to interact with the system (e.g. browser, mobile OS).
---
# References
- [https://www.cypress.io/](https://www.cypress.io/)
- [https://docs.cypress.io/guides/overview/why-cypress](https://docs.cypress.io/guides/overview/why-cypress)
> Macro (toc)
> Macro (style)