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 foi 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.

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

Deixe um comentário

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