14.3.1 Cypress Instrucciones básicas

El objeto principal de Cypress se llama cy, con el cual puedes ejecutar instrucciones como abrir una página en el navegador, buscar algún elemento por css, ejecutar un comando entre otros.

En cypress obtienes todos los elementos por medio de css, si tienes dudas de como obtener un elemento puedes utilizar el locator de cypress.

Puedes encadenar elementos por ejemplo, obtienes el elemento con el id usuario y tecleas la palabra Carlos, de esta manera no tienes que agregar awaits.

cy.get('#usuario').type("Carlos")

Otra opción interesante es que te permite interceptar las peticiones a los servicios rest por si deseas simular un error.

    cy.intercept({
      method: 'PUT',
      url: '**/comments/*',
    }, {
      statusCode: 404,
      body: { error:"No encontrado" },
      delayMs: 500,
    }).as('putComment')
    
    //Click al botón para agregaar el comentario
    cy.get('.coomment-put').click()
    //esperar la respuesta del servicio
    cy.wait('@putComment')

    // revisa que el mensaje de error contenga la frase No encontrado
    cy.get('#mensajeError').should('contain', "No encontrado")

En este ejemplo interceptas el servicio PUT comments y cambias el status code para que regrese 404 con un body con el objeto error, y agregas una espera de 500 milisegundos

Función

Descripción

Abre la página de google

cy.get("#usuario")

Obtiene el elemento con el id usuario

cy.get("#usuario").type("Carlos")

Teclea Carlos en el elemento con id usuario

cy.get('.loginButton').click()

Da clic en el elemento con la clase loginButton

cy.url().should('eq', "http://www.google.com")

Revisa que la url del navegador sea http://www.google.com

cy.wait('@calculaVentas',{timeout: 30000})

Si tienes un servicio muy lento puedes agregar el wait y especificar un timeout de 30 segundos

cy.get("tr").should(‘have.lenght’,3)

Revisa que existan 3 elementos tr

Last updated