Seja bem vindo(a) a série “pitadas de Cypress”! 🧂

Nesta série de conteúdos em formato de texto com snippets de código você vai aprender vários macetes do framework de testes automatizados Cypress.io, para facilitar sua vida na escrita de scripts de teste.

Irei começar com algo simples, e vamos evoluindo ao longo da série, ok?

Digamos que você esteja testando um aplicação que vende ingressos para eventos.

Nesta aplicação exemplo, para um usuário comprar um ingresso ele deve preencher alguns dados obrigatórios, e após a submissão do formulário, ele receberá uma mensagem de sucesso.

Digamos que os campos obrigatórios sejam os seguintes:

  • Nome completo
  • Email
  • Checkbox de que concorda com os termos do serviço

Imaginemos também que os elementos acima possuem IDs únicos.

O teste seria algo assim:

describe('Aplicação de venda de ingressos online', () => {
  beforeEach(() => {
    cy.visit('https://exemplo.com/ingressos')
  })

  it('realiza ordem de compra com sucesso', () => {
    cy.get('#fullName')
      .should('be.visible')
      .type('Walmyr Filho')
    cy.get('#email')
      .should('be.visible')
      .type('walmyr@exemplo.com')
    cy.get('#iAgree')
      .should('be.visible')
      .check()
    cy.get('button[type="submit"]')
      .should('be.visible')
      .click()

    cy.contains('Você receberá um email para finalizar a compra')
      .should('be.visible')
  })
})

Veja que antes de digitar (type), marcar (check), ou clicar em elementos (click), estou garantindo que eles estão visíveis (.should(‘be.visible’)). Isso torna o teste mais robusto.

Por fim, verifico que o texto ‘Você receberá um email para finalizar a compra’ é contido em algum elemento e está visível.

É isso aí!

Espero que tenha gostado e fique ligado para os próximos conteúdos da série. 👋


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.

5 comentários em “Como preencher e submeter formulários com Cypress

  1. Bom post. O should eu uso geralmente pra fazer a validação do teste em si, tipo o que o teste está realmente validando. Não costumo usar o should pra garantir que o campo esteja na tela. Uso o cy.get com timeout. Nunca tinha pensado em usar desta maneira.

  2. Olá! Estou com problema ao rodar os testes na pipeline. A seguinte mensagem é visualizada:

    AssertionError: Timed out retrying after 80000ms: expected ” to contain ‘Nome de usuário ou senha inválida.’

    Isso pq no meu código as mensagens estão em português, mas na pipeline ele lê em inglês. EU posso mudar as frases para inglês, mas qd eu for executar os testes local, vai dar erro pq o navegador (chrome) lê em português.

    Tem algo que trate essas mensagens?

Deixe uma resposta para Walmyr Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s