A importância da testabilidade para testes automatizados web

Aprenda como melhorar a legibilidade de testes automatizados escritos com o framework Cypress

Teu time se preocupa com testabilidade?

Caso sim, esse post é pra ti!

Uma maneira de verificar a testabilidade de uma aplicação web é inspecionar os elementos do frontend e verificar se eles possuem atributos  adicionados especificamente para facilitar a automação dos testes de interface grafica, tais como atributos data-test, data-test-id, data-qa, data-cy, etc.

Imagine o seguinte formulário HTML.

<!-- ./index.html -->

<form name="login-form">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" data-test="email-field" required />
  <label for="password">Password</label>
  <input type="password" name="password" id="password" data-test="password-field" required />
  <button type="submit" data-test="login-button">Login</button>
</form>

Como você pode perceber, todos os elementos que precisamos para automatizar tal formulário possuem atributos data-test.

Isso é um exemplo de testabilidade.

E por que isso é importante?

Quando o frontend de uma aplicação web possui atributos especificamente criados para fins de testabilidade, há menos risco de mudanças na lógica ou estilo do frontend quebrarem os testes.

Agora, vejamos um teste (escrito com Cypress) que preenche tal formulário.

// cypress/e2e/loginForm.cy.js

beforeEach(() => {
  cy.visit('./index.html')
})

it('successfully logs in', () => {
  const email = Cypress.env('userEmail')
  const password = Cypress.env('userPassword')

  cy.get('[data-test="email-field"]').type(email)
  cy.get('[data-test="password-field"]').type(password, { log: false })
  cy.get('[data-test="login-button"]').click()

  cy.contains('You\'re now logged in!').should('be.visible')
})

O teste acima faz uso de tais atributos, porém, há certa repetição na seleção dos elementos, onde a única parte que muda são os valores do atributo data-test.

E se pudéssemos melhorar isso?

Bem, nós podemos!

Veja a nova versão do teste abaixo.

// cypress/e2e/loginForm.cy.js

beforeEach(() => {
  cy.visit('./index.html')
})

it('successfully logs in', () => {
  const email = Cypress.env('userEmail')
  const password = Cypress.env('userPassword')

  cy.dataTest('email-field').type(email)
  cy.dataTest('password-field').type(password, { log: false })
  cy.dataTest('login-button').click()

  cy.contains('You\'re now logged in!').should('be.visible')
})

Cypress.commands.add('dataTest', value => {
  return cy.get(`[data-test="${value}"]`)
})

Agora, em vez de toda aquela repetição, temos um comando customizado que abstrai tal lógica e o teste propriamente dito fica limpo, passando ao comando .dataTest o valor apropriado dependendo do elemento que queremos selecionar.

Obs.: Idealmente, tal comando customizado seria definido no arquivo cypress/support/commands.js, porém, neste caso deixei direto no arquivo de teste para fins didáticos.

Veja o teste rodando.

É isso aí!

Como um conteúdo relacionado, recomendo assistir a live onde demonstrei o uso do comando cy.findByTestId(), a partir do plugin @testing-library/cypress.

Gostou do conteúdo? Deixa um comentário.

Além disso, acesse o código completo no GitHub.

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

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

👋  Até a próxima e bons testes!