Cypress Assertion: 9 hechos que debes saber

Cypress Assertion nos ayuda a afirmar una afirmación en particular. Las afirmaciones son pasos de validación que aseguran si el resultado esperado es igual al resultado real. En la automatización de pruebas, afirmamos una declaración para verificar que la prueba está generando el resultado esperado. Si la aserción falla, entonces el caso de prueba falla asegurando que hay un error. En este artículo, hablaremos sobre Aserción de Cypress con implementación de Handson y ejemplos.

Tabla de Contenido

Afirmación de ciprés

¿Qué es Cypress Assertion?

Cypress usa y envuelve la biblioteca de aserciones Chai y extensiones como Sinon y JQuery. Cypress espera y vuelve a intentar automáticamente hasta que se resuelva la afirmación. Las afirmaciones se pueden utilizar para describir cómo debería verse la aplicación. Podemos usar aserciones de Cypress con una combinación de esperas, reintentos y bloqueos hasta que alcance el estado deseado.

Texto de afirmación de Cypress

En inglés general, describiríamos una afirmación como, Esperaría que el botón tuviera un texto de inicio de sesión. La misma aserción se puede escribir en Cypress como

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

La afirmación anterior pasará si el botón tiene un valor de 'inicio de sesión'.

Afirmaciones comunes de Cypress

Hay un conjunto de afirmaciones Cypress comunes que usamos en nuestros casos de prueba. Los usaremos con .should() . Veamos el caso de uso y los ejemplos.

Algunas de las afirmaciones comunes de Cypress se enumeran a continuación

  1. Longitud Mínima
  2. Valor
  3. Contexto del texto
  4. Clase
  5. Existencia
  6. CO
  7. Visibilidad
  8. Estado
  9. Propiedad para discapacitados

Afirmación de longitud de ciprés

length() Verificará si el elemento en particular tiene longitud

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

Afirmación de valor de Cypress

El valor de Cypress afirmará si el elemento en particular tiene el valor esperado

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

Aserción de contexto de texto de Cypress

El contexto de texto afirmará si el elemento tiene el texto en particular

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

Afirmación de clase Cypress

Afirma si la clase está presente o el elemento en particular debería tener la clase

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

Afirmación de existencia de ciprés

El comando de existencia verifica si el elemento particular está presente o existe en el DOM o no

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

Afirmación CSS Cypress

CSS Assertion comprueba si los elementos particulares tienen una propiedad particular

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

Afirmación de visibilidad de ciprés

Cypress Visibility Assertion afirma si el elemento DOM es visible en la interfaz de usuario

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

Afirmación del estado de Cypress

Afirma el estado del elemento DOM

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

Declaración de propiedad de Cypress para discapacitados

La aserción de propiedad Cypress Disabled afirma si el elemento está deshabilitado

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

Aserción de reintento de Cypress

Un solo comando seguido de una afirmación se ejecutará en orden. Inicialmente, el comando se ejecuta y luego se ejecutará la aserción. Un solo comando seguido de múltiples aserciones también se ejecutará en orden: primera y segunda aserción respectivamente. Entonces, cuando se apruebe la primera aserción, la primera y la segunda aserción se ejecutarán junto con los comandos nuevamente.

Por ejemplo, el siguiente comando contiene ambos .should() y .and() comandos de aserción, donde .and() también se conoce como .should()

cy.get('.todo-list li') // comando .should('have.length', 2) // aserción .and(($li) => { // 2 aserciones más expect($li.get (0).textContent, 'primer elemento').to.equal('todo A') expect($li.get(1).textContent, 'segundo elemento').to.equal('todo B') })

Ejemplos de afirmaciones de cipreses

En esta sección, discutiremos los diferentes tipos de afirmaciones en Cypress, como

  • Afirmación implícita
  • Afirmación explícita

Veremos en detalle ambos tipos con ejemplos.

Afirmación implícita en Cypress

En afirmación implícita, usamos .should() or .and() comandos. Estos comandos de aserción se aplican al sujeto actualmente entregado en la cadena de comandos. Dependen del tema cedido anteriormente.

Veremos un ejemplo sobre cómo usar .should() or .and() comandos

cy.get('botón').should('tener.clase', 'habilitado')

Con .and() que es un alias de .should() , podemos encadenar varias afirmaciones. Estos comandos son más legibles.

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

El ejemplo anterior está encadenado con .should() indicando que debe tener la clase "activa", seguida de .and() se ejecuta contra el mismo comando. Esto es muy útil cuando queremos hacer valer varios comandos.

Afirmación explícita en Cypress

Pasar un sujeto explícito en las aserciones cae dentro del tipo explícito de aserción Cypress. Aquí usaremos expect y assert comandos como afirmación. Las aserciones explícitas se usan cuando queremos usar varias aserciones para el mismo tema. También usamos aserción explícita en Cypress cuando queremos hacer custom lógica antes de hacer la afirmación.

Miraremos en el ejemplo para ciprés explícito afirmación

expect(true).to.be.true //comprueba un booleano expect(object).to.equal(object)

Afirmación negativa de ciprés

Similar a las afirmaciones positivas, hay afirmaciones negativas en Cypress. Usaremos la palabra clave "no" agregada al prefijo de la declaración de aserción. Veamos un ejemplo de afirmación negativa.

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

La afirmación negativa se recomienda solo en casos para verificar que una condición particular ya no está disponible después de que la aplicación realiza una acción específica.

Por ejemplo, consideremos que una palanca está marcada y verifiquemos que se ha eliminado.

// al principio el elemento se marca como completado cy.contains('li.todo', 'Write tests') .should('have.class', 'completed') .find('.toggle') .click() / / la clase CSS ha sido eliminada cy.contains('li.todo', 'Write tests').should('not.have.class', 'completed')

Mensaje de afirmación personalizado de Cypress

Con Cypress, podemos proporcionar información adicional o mensajes personalizados para las afirmaciones mediante el uso de una biblioteca de comparadores. Los Matchers se componen de pequeñas funciones que diferencian valores y arrojarán mensajes de error detallados. Chai La biblioteca de aserción ayudará a que nuestro código se vea más legible y las fallas de prueba serán muy útiles.

const expect = require('chai').expect it('checks a number', () => { const value = 10 const esperado = 3 expect(value).to.equal(esperado) })
cyyy
Mensaje de error personalizado de Cypress

Mejores prácticas de afirmación de cipreses

Podemos escribir múltiples aserciones en un solo bloque usando una cadena de comandos. No es necesario escribir una afirmación única como en las pruebas unitarias. Muchos escriben afirmaciones como las siguientes. Está bien escribir de esa manera, pero aumenta la línea de código y la redundancia.

describe('mi formulario', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'tiene atributo de validación', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // afirmar si #first tiene un campo requerido } ) it('tiene clase activa', () => { cy.get('#first').should('have.class', 'active') // afirmando si #first tiene clase activa }) it( 'ha formateado el primer nombre', () => { cy.get('#first').should('have.value', 'Ashok') // afirmando si #first tiene la primera letra en mayúscula }) })

Como puede ver arriba, se repite el mismo selector y tipo de aserción. En cambio, podemos encadenar estos comandos en una sola afirmación que realiza todas las comprobaciones de forma lineal.

describe('mi formulario', () => { before(() => { cy.visit('/users/new') }) it('valida y da formato al nombre', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .valor', 'Ashok') }) })

Como se mencionó anteriormente, ¡podemos encadenar el selector único con múltiples aserciones! Esta es una de las mejores prácticas recomendadas para escribir afirmaciones en Cypress.

Para comprender el modelo de objetos de página en Cypress, haga clic en aquí.