03 - Crear nueva especificación con Cypress (primeros pasos)

Mr. Bones · Agosto 26, 2023, 03:22:12 AM

Creando una Nueva especificación

Suponiendo que haya instalado Cypress exitosamente y haya abierto Cypress , ahora es el momento de agregar su primera prueba. Haremos esto con el botón Crear new empty spec.

Al hacer clic en él, debería ver un cuadro de diálogo donde puede ingresar el nombre de su nueva especificación. Simplemente acepte el nombre predeterminado por ahora.

La especificación recién generada se muestra en un cuadro de diálogo de confirmación. Simplemente continúa y ciérralo con el botón ✕.

Una vez que hayamos creado ese archivo, debería verlo aparecer inmediatamente en la lista de especificaciones de un extremo a otro. Cypress monitorea sus archivos de especificaciones para detectar cualquier cambio y los muestra automáticamente.

Aunque todavía no hemos escrito ningún código, está bien, hagamos click en su nueva especificación y veamos cómo Cypress la inicia.

Escribe tu primera Prueba

Ahora es el momento de escribir tu primera prueba:

1 Escribe tu primer examen aprobado.
2 Actualízalo para que falle.
3 Mira la recarga de Cypress en tiempo real.

Abra el archivo No tienes permitido ver los links. Registrarse o Entrar a mi cuenta en su IDE (ej: Visual Studio Code) y reemplace el contenido de su especificación con el siguiente código.

describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(true)
})
})

Una vez que guarde este cambio, debería ver que el navegador se recarga.

Aunque no hace nada útil, ¡esta es nuestra primera prueba que aprobamos! ✅

En el Registro de comandos verá que Cypress muestra la suite, la prueba y su primera afirmación (que debería pasar en verde).

Observe que Cypress muestra un mensaje indicando que esta es la página predeterminada en el lado derecho . Cypress supone que querrás salir y visitar una URL en Internet, pero también puede funcionar bien sin eso.

Ahora escribamos nuestra primera prueba fallida.

describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(false)
})
})

Que pasó???

Una vez que guarde nuevamente, verá que Cypress muestra la prueba fallida en rojo ya que trueno es igual a false.

Cypress también muestra el seguimiento de la pila y el marco de código donde falló la aserción (cuando esté disponible). Puede hacer clic en el enlace del archivo azul para abrir el archivo donde ocurrió el error en su abridor de archivos preferido . Para leer más sobre la visualización del error, lea sobre Errores de depuración

si te gustó, aca abajo te dejo un link para que puedas hacer un ejemplo real:

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

03 - Crear nueva especificación con Cypress (primeros pasos)

Mr. Bones

Agosto 26, 2023, 03:22:12 AM Ultima modificación: Septiembre 08, 2023, 03:42:57 PM por Mr. Bones