How to perform an action conditionally with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-23 11:02:17

## In today's “**Pinch of Cypress**”, learn how to click on an element only if a certain condition is met

Since I share some content about [**Cypress**](https://cypress.io), some people sometimes ask me.

> Walmyr, how do I interact with an element only if it is visible, and if not, I move on?

To answer this question, I will use an example application in which there are two logout scenarios.

1. Logout with a viewport width greater than `767px`
2. Logout with a viewport width less than or equal to `767px`

In scenario 1, the logout link is displayed in the top-right menu, and it can be clicked right after logging in.

In scenario 2, after logging in, the user must first open the top-right menu; then, he (or she) will be able to click on the logout link.

The test will be the same. That is, we will not have a test for the viewport with a width greater than `767px` and another for the viewport with a width less than or equal to `767px`, but a test that adapts to the viewport in use.

Let's look at the test code to make it easier to understand.

```js
describe('Logout', () => {
  beforeEach(() => cy.login())

  it('logs out successfully', () => {
    if (Cypress.config("viewportWidth") < Cypress.env("viewportWidthBreakpoint")) {
      cy.get('.navbar-toggle.collapsed')
        .should('be.visible')
        .click()
    }

    cy.contains('Logout')
      .should('be.visible')
      .click()

    cy.contains('Login')
      .should('be.visible')
  })
})
```

The configuration file would look like this.

```json
{
  "baseUrl": "https://example.com/",
  "env": {
    "viewportWidthBreakpoint": 768
  }
}
```

**Note:** It is worth remembering that by default, Cypress uses a width of `1000px` and a height of `660px`.

Finally, this is how `package.json`'s test scripts would look like.

```
"scripts": {
  "test": "cypress run",
  "test:tablet": "cypress run --config viewportWidth=767,viewportHeight=480"
}
```

With that, when the test is run with the `npm test` command, it will run with the default width and height settings, and therefore the condition `Cypress.config("viewportWidth") < Cypress.env("viewportWidthBreakpoint")` will return `false`. In this case, the code snippet inside of the `if` block will not be executed.

When the test is run with the command `npm run test:tablet`, the viewport settings will be overwritten. In this case, the condition `Cypress.config("viewportWidth") < Cypress.env("viewportWidthBreakpoint")` will return `true`, and consequently, the code snippet inside of the `if` block will be executed.

In this way, the same test will work in both viewports.

**Note 2:** To improve the readability and organization of the code, the steps for logging out could be moved to a custom command (inside the file `cypress/support/commands.js`), and we could have a utility function called `isTablet`, which would return `true` or `false` depending on the same condition used in the example just demonstrated.

**Attention: be careful with the use of conditionals in your tests! To better understand, I recommend reading the [official documentation](https://docs.cypress.io/guides/core-concepts/conditional-testing.html).**

___

Did you like today's “**Pinch of Cypress**”?

Leave a comment with an example where you had to use conditionals in your tests and how your experience was.

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/23/como-realizar-uma-acao-condicionalmente-com-cypress/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).