Como realizar uma ação condicionalmente com Cypress

Na “pitada de Cypress” de hoje, aprenda como clicar em um elemento somente se uma determinada condição for atendida

Visto que compartilho conteúdos sobre Cypress, algumas pessoas me perguntam.

Walmyr, como faço para interagir com um elemento somente caso este esteja visível, e caso contrário, seguir adiante?

Para responder esta pergunta, vou usar uma aplicação exemplo em que existem dois cenários de logout.

1. Logout em viewport com largura maior do que 767px
2. Logout em viewport com largura igual ou menor do que 767px

No cenário 1, após a realização do login, o link de logout é exibido no menu superior direito e já pode ser clicado.

Já no cenário 2, após a realização do login, primeiro o usuário deve abrir o menu superior direito, para então poder clicar no link de logout.

O teste será o mesmo, ou seja, não teremos um teste para o viewport com largura maior que 767px e outro para o viewport com largura menor ou igual a 767px, mas sim um teste que se adapta ao viewport em uso.

Vejamos o código do teste para facilitar a compreensão.

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')
  })
})

O arquivo de configuração seria assim.

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

Obs.: Vale lembrar que por padrão o Cypress utiliza a largura de 1000px e a altura de 660px.

E por fim, seguem os scripts de teste no arquivo package.json.

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

Ou seja, quando o teste for executado com o comando npm test, o mesmo irá executar com as configuração de largura e altura padrão, e portanto, a condiçãoCypress.config("viewportWidth") < Cypress.env("viewportWidthBreakpoint") irá retornar false. Neste caso, o trecho de código dentro do if não será executado.

Já quando o teste for executado com o comando npm run test:tablet, as configurações de viewport serão sobrescritas. Neste caso, a condiçãoCypress.config("viewportWidth") < Cypress.env("viewportWidthBreakpoint") irá retornar true, e consequentemente, o trecho de código dentro do if será executado.

Desta forma, o mesmo teste funcionará em ambos viewports.

Obs. 2: Para melhorar a legibilidade e organização do código, os passos para o logout poderiam ser movidos para um comando customizado (dentro do arquivo cypress/support/commands.js), e poderíamos ter uma função utilitária chamada isTablet, a qual retornaria true ou false dependendo da mesma condição utilizada no exemplo recém demonstrado.

Atenção: tome cuidado com o uso de condicionais em seus testes! Para entender melhor, recomendo a leitura da documentação oficial.

Gostou da “pitada de Cypress” de hoje?

Deixa um comentário com algum exemplo onde você teve que utilizar condicionais em seus testes e como foi sua experiência.

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy, e bons testes!