Asserção de cipreste: 9 fatos que você deve saber

by

Cypress Assertion nos ajuda a afirmar um determinado Assertions são etapas de validação que garantem se o resultado esperado é igual ao resultado real. Na automação de teste, afirmamos uma declaração para verificar se o teste está gerando o resultado esperado. Se a asserção falhar, o caso de teste falhará garantindo que haja um bug. Neste artigo, falaremos sobre Cypress Assertion com implementação e exemplos do Handson.

Tabela de conteúdo

Asserção de Cipreste

O que é Cypress Assertion?

Cypress usa e envolve a biblioteca de asserção Chai e extensões como Sinon e JQuery. Cypress automaticamente espera e tenta novamente até que a asserção seja resolvida. As asserções podem ser usadas para descrever a aparência do aplicativo. Podemos usar asserções Cypress com combinação de espera, nova tentativa, bloqueio até atingir o estado desejado.

Cypress Assert Texto

Em inglês geral, descreveríamos uma afirmação como, Eu esperaria que o botão tivesse um texto de login. A mesma afirmação pode ser escrita no Cypress como

cy.get('button').should('have.value', 'login')

A afirmação acima será aprovada se o botão tiver o valor de 'login'.

Cypress afirmações comuns

Há um conjunto de afirmações comuns do Cypress que usamos em nossos casos de teste. Estaremos usando-os com .should() . Vejamos o caso de uso e os exemplos.

Algumas das afirmações comuns do Cypress estão listadas abaixo

  1. Comprimento
  2. Valor
  3. Contexto do Texto
  4. Aula
  5. Existência
  6. APF
  7. Visibilidade
  8. Estado
  9. Propriedade Desabilitada

Asserção de comprimento de Cypress

length() irá verificar se o elemento em particular tem comprimento

cy.get('dropdown').should('have.length', 5)

Asserção de valor Cypress

O valor Cypress irá afirmar se o elemento em particular tem o valor esperado

cy.get('textfield').should('have.value', 'first name')

Asserção de contexto de texto Cypress

O contexto do texto irá afirmar se o elemento tem o texto particular

cy.get('#user-name').should('have.text', 'John Doe')

Cypress Classe Assertion

Afirma se a classe está presente ou se o elemento específico deve ter a classe

cy.get('form').find('input').should('have.class', 'disabled')

Asserção de existência de Cypress

O comando de existência verifica se o elemento específico está presente ou existe no DOM ou não

cy.get('#button').should('exist')

Declaração CSS Cypress

A asserção de CSS verifica se os elementos específicos têm uma propriedade específica

cy.get('.completed').should('have.css', 'text-decoration', 'line-through')

Cypress Visibilidade Assertion

Cypress Visibility Assertion afirma se o elemento DOM está visível na IU

cy.get('#form-submit').should('be.visible')

Asserção de estado do Cypress

Afirma o estado do elemento DOM

cy.get(':radio').should('be.checked')

Asserção de propriedade Cypress desativada

A declaração da propriedade Cypress Disabled afirma se o elemento está desabilitado

cy.get('#example-input').should('be.disabled')

Asserção de nova tentativa do Cypress

Um único comando seguido de uma declaração será executado em ordem. Inicialmente, o comando é executado e, em seguida, a asserção será executada. Um único comando seguido por várias asserções também será executado na ordem - primeira e segunda asserções, respectivamente. Portanto, quando a primeira asserção for aprovada, a primeira e a segunda asserção serão executadas junto com os comandos novamente.

Por exemplo, o comando abaixo contém ambos .should() e .and() comandos de asserção, onde .and() é também conhecido como .should()

cy.get('.todo-list li') // comando .should('have.length', 2) // afirmação .and(($li) => { // mais 2 afirmações expect($li.get (0).textContent, 'first item').to.equal('todo A') expect($li.get(1).textContent, 'second item').to.equal('todo B') })

Exemplos de asserção do Cypress

Nesta seção, discutiremos os diferentes tipos de asserções no Cypress, como

  • Afirmação implícita
  • Afirmação Explícita

Analisaremos os detalhes de ambos os tipos com exemplos

Afirmação implícita no Cypress

Na asserção implícita, usamos .should() or .and() comandos. Esses comandos de asserção se aplicam ao assunto atualmente submetido na cadeia de comandos. Eles são dependentes do assunto previamente produzido.

Veremos um exemplo de como usar .should() or .and() comandos

cy.get('button').should('have.class', 'enabled')

Com o .and() que é um pseudônimo de .should() , podemos encadear várias afirmações. Esses comandos são mais legíveis.

cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')

O exemplo acima está encadeado com .should() informando que deve ter a classe “ativa”, seguida por .and() é executado no mesmo comando. Isso é muito útil quando queremos declarar vários comandos.

Afirmação explícita no Cypress

A passagem de sujeito explícito nas asserções se enquadra no tipo explícito de asserção Cypress. Aqui, vamos usar expect e assert comandos como afirmação. Asserções explícitas são usadas quando queremos usar várias asserções para o mesmo assunto. Também usamos asserção explícita em Cypress quando queremos fazer personalizado lógica antes de fazer a afirmação.

Nós vamos olhar para o exemplo para Cypress explícito afirmação

expect(true).to.be.true //verifica se há um booleano expect(object).to.equal(object)

Asserção Cypress Negativa

Semelhante às afirmações positivas, existem afirmações negativas no Cypress. Estaremos usando a palavra-chave “não” adicionada ao prefixo da declaração de asserção. Vejamos um exemplo de afirmação negativa

cy.get('#loading').should('not.be.visible')

A asserção negativa é recomendada apenas em casos para verificar se uma determinada condição não está mais disponível depois que uma ação específica é executada pelo aplicativo.

Por exemplo, vamos considerar que uma chave está marcada e verificar se ela foi removida

// primeiro o item é marcado como concluído cy.contains('li.todo', 'Escrever testes') .should('have.class', 'completed') .find('.toggle') .click() / / a classe CSS foi removida cy.contains('li.todo', 'Escrever testes').should('not.have.class', 'completed')

Mensagem de asserção personalizada do Cypress

Com o Cypress, podemos fornecer informações adicionais ou mensagem personalizada para asserções usando uma biblioteca de matchers. Matchers é composto por pequenas funções que diferenciam valores e emitem mensagens de erro detalhadas. Chai biblioteca de asserção ajudará nosso código a parecer mais legível e a falha de teste muito útil

const expect = require('chai').expect it('verifica um número', () => { const valor = 10 const esperado = 3 expect(valor).to.equal(esperado) })
cyyy
Mensagem de erro personalizada do Cypress

Práticas recomendadas de asserção de Cypress

Podemos escrever várias asserções em um único bloco usando uma cadeia de comandos. Não é necessário escrever uma afirmação única como nos testes de unidade. Muitos escrevem afirmações como abaixo. É normal escrever dessa maneira, mas aumenta a linha de código e a redundância.

describe('meu formulário', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'tem atributo de validação', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // afirmando se o #first tem campo obrigatório } ) it('tem classe ativa', () => { cy.get('#first').should('have.class', 'active') // afirmando se o #first tem classe ativa }) it( 'tem o primeiro nome formatado', () => { cy.get('#first').should('have.value', 'Ashok') // afirmando se o #first tem a primeira letra maiúscula }) })

Como você pode ver acima, o mesmo seletor e tipo de asserção estão se repetindo. Em vez disso, podemos encadear esses comandos em uma única asserção que executa todas as verificações de maneira linear.

describe('meu formulário', () => { before(() => { cy.visit('/users/new') }) it('valida e formata primeiro nome', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .valor', 'Ashok') }) })

Conforme mencionado acima, podemos encadear o seletor único com várias asserções! Esta é uma das melhores práticas recomendadas para escrever asserções no Cypress.

Para entender sobre o Modelo de Objeto de Página no Cypress, clique SUA PARTICIPAÇÃO FAZ A DIFERENÇA.