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
cy.visit("http://www.google.com")	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