04 - Crear un ejemplo real con Cypress (Básico)

Una prueba sólida generalmente cubre 3 fases:

• Configure el estado de la aplicación.
• Toma una acción.
• Haga una afirmación sobre el estado de la aplicación resultante.

También puede ver esto redactado como "Dado, cuándo, entonces" o "Organizar, actuar, afirmar". Pero la idea es: primero colocas la aplicación en un estado específico, luego realizas alguna acción en la aplicación que hace que cambie y finalmente verificas el estado resultante de la aplicación.

Hoy, analizaremos estos pasos de forma restringida y los asignaremos claramente a los comandos de Cypress:

• Visita una página web.
• Consulta por un elemento.
• Interactuar con ese elemento.
• Afirmar sobre el contenido de la página.

Paso 1: visita una Página

Primero, visitemos una página web. Visitaremos nuestra aplicación Kitchen Sink en este ejemplo para que pueda probar Cypress sin tener que preocuparse por encontrar una página para probar.

Podemos pasar la URL que queremos visitar cy.visit(). Reemplacemos nuestra prueba anterior con la siguiente que realmente visita una página:

describe('Real Test', () => {
  it('Visits the Google', () => {
    cy.visit('No tienes permitido ver los links. Registrarse o Entrar a mi cuenta')
  })
})

Guarde el archivo y vuelva a cambiar a Cypress Test Runner. Es posible que notes algunas cosas:

• • El Registro de comandos ahora muestra la nueva VISITacción.
  • La aplicación Kitchen Sink se ha cargado en el panel Vista previa de la aplicación .
  • La prueba es verde, aunque no hicimos ninguna afirmación.
  • Muestra VISITun estado pendiente azul hasta que la página termine de cargarse.

Si esta solicitud hubiera regresado con un código sin estado como 404 o 500, o si hubiera un error de JavaScript en el código de la aplicación, la prueba habría fallado.Paso 2: Consulta de un elementoAhora que tenemos una página cargada, debemos realizar alguna acción al respecto. ¿Por qué no hacemos click en un enlace de la página? Suena bastante fácil, busquemos uno que nos guste... ¿qué tal Gmail?Para encontrar este elemento por su contenido, usaremos cy.contains() .Agreguémoslo a nuestra prueba y veamos qué sucede:describe('Real Test', () => {  it('finds the content "Gmail"', () => {    cy.visit('No tienes permitido ver los links. Registrarse o Entrar a mi cuenta')    cy.contains('Gmail')      })}) Nuestra prueba ahora debería aparecer CONTAINS en el Registro de comandos y aún estar en verde.Incluso sin agregar una afirmación, ¡sabemos que todo está bien! Esto se debe a que muchos de los comandos de Cypress están diseñados para fallar si no encuentran lo que esperan encontrar. Esto se conoce como aserción predeterminada .Para verificar esto, reemplácelo typecon algo que no esté en la página, como Red. Notarás que la prueba se pone roja, ¡pero solo después de unos 4 segundos!¿Puedes ver lo que Cypress está haciendo debajo del capó? Automáticamente espera y vuelve a intentarlo porque espera que el contenido finalmente se encuentre en el DOM. ¡No falla inmediatamente!cy.contains(): Este método busca un elemento que contiene el texto especificado. En el caso del ejemplo, se busca un enlace que contiene el texto "Gmail" y luego se realiza un clic en él. Esto es útil para seleccionar elementos basados en su contenido de texto en lugar de utilizar selectores CSS o XPath.Paso 3: Haz click en un elementoOk, ahora queremos hacer click en el enlace que encontramos. ¿Como hacemos eso? Agregue un comando .click() al final del comando anterior, así:describe('Real Test', () => {  it('clicks the link "Imágenes"', () => {    cy.visit('No tienes permitido ver los links. Registrarse o Entrar a mi cuenta')    cy.contains('Imágenes').click();      })}) ¡Casi puedes leerlo como una pequeña historia! Cypress llama a esto "encadenamiento" y encadenamos comandos para crear pruebas que realmente expresen lo que hace la aplicación de forma declarativa.También tenga en cuenta que el panel Vista previa de la aplicación se actualizó aún más después del click, siguiendo el enlace y mostrando la página de destino:¡Ahora podemos afirmar algo sobre esta nueva página!Paso 4: Has una afirmaciónHagamos una afirmación sobre algo en la nueva página en la que hicimos click. Quizás nos gustaría asegurarnos de que la nueva URL sea la URL esperada. Podemos hacerlo buscando la URL y encadenándole una afirmación con .should() .Así es como se ve:describe('Real Test', () => {  it('clicking "Imágenes" navigates to a new url', () => {    cy.visit('No tienes permitido ver los links. Registrarse o Entrar a mi cuenta')    cy.contains('Imágenes').click()    // Should be on a new URL which    // includes '/imghp?hl=es-419&ogbl'    cy.url().should('include', '/imghp?hl=es-419&ogbl')  })}) Pronto voy a subir más ejemplos para practicar, saludos.[/list]