Integrando Cypress al proyecto

4/24
Recursos

Estando en el directorio del proyecto realizamos la instalación de Cypress con el comando npm i cypress -D. La instalación puede tomar varios minutos. Recuerda que tu proyecto debe incluir webpack y sus archivos de configuración. Algo que debemos tener muy en cuenta es que para integrar Cypress a nuestro proyecto, necesitaremos configurar un entorno similar al entorno de producción.

Es necesario crear algunos scripts adicionales en las configuraciones de webpack y modificar el archivo build.js para que cargue las credenciales de Firebase apropiadas desde production.env o test.env según el entorno en el que estemos haciendo la ejecución.

Ya que necesitaremos un servidor estático para ejecutar las pruebas de Cypress, procedemos a instalar npm i pushstate-server -D y agregamos el script correspondiente para su ejecución en el archivo de configuraciones de webpack.

Finalmente creamos el script que ejecutará el build de nuestra aplicación y levantará el server en el que se correrán las pruebas con Cypress. Siempre debemos hacer el build antes de ejecutar el testing.

Aportes 21

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para quienes tuvieron el problema de acceder al sitio cuando ejecutan:

npm run test:init

Les sale el mensaje: Listening on port 9000 (http://0.0.0.0:9000) y al dirigirse ahí sale que no encontró la página

En el archivo package.json cambien la línea siguiente:

"test:server": "pushstate-server dist"

por la siguiente:

"test:server": "pushstate-server -d ./dist",

Esto debido a la nueva versión de pushstate-server

  • -d hace referecia a un directorio por lo que debemos seleccionar dist
    Ahora nuevamente ejecuten el comando npm run test:init y MUCHO OJO en lo siguiente: Les seguirá apareciendo la dirección 0.0.0.0:9000 pero en el navegador cambien por localhost:9000
    y la página de test ya está en marcha.
    Saludos.

Me parece muy poco profesional tener que perder tanto tiempo en configurar un proyecto porque no se han actualizado los recursos del mismo

este curso asume que sos un frontend semi-senior … si no lo sos … se te va a hacer cuesta arriba seguirlo …

cuando trate de instalar de depencia de cypress me salia error, eso pasa por que se debe usar la version 8 node ais que se debe de instalar una version anteriror de cypress a mi me funciono la versoin 4.4.0 y dejo un link para que miran como se instala $ npm install [email protected] -D
https://nodejs.dev/learn/install-an-older-version-of-an-npm-package

al ejecutar el comando test-server me salia este error en el navegador
Cannot GET /
no logre encontrar el error y decidí usar http-server, sirve para crear un servidor virtual y servir assets

Este curso se vuelve indispensable para los que nos dedicamos al Testing. Pero este curso está desfasado. #Platzi, en nombre de los QA’s pido que se actualice lo antes posible.

Para los que les aparece este error cuando corren el comando de build

instalen esta dependencia para webpack npm install --save-dev [email protected]

https://stackoverflow.com/questions/56850443/unable-to-build-my-vuejs-application-using-npm-run-build

Busco ser critico e imparcial a la hora del aprendisaje, 8 años llevo aprendiendo con esta forma, es el primer curso que compro de platzi, ya vi errores que voy comentando por que se notan mucho.

Llevo 2 clases viendo como configurar un proyecto. - error, creación de 0 con lo minimo indispensable y pruebas aisladas son más puntuales rapidas de ver y no querer caminar y hacer algo mientras pasa el video y se pierden cosas.

pushstate no lo conocia me parecio bueno que se pudiera ver con la forma anterior que menciono ya que podría hablarse u organizarse un poco mejor el package.json se tendría tiempo para explayar más acerca de algunas cuestiones que dan para aprender por ahi un poquito más.

No busco ofender sino que todos podamos aportar algun detalle que pueda ser modificable es de por vida el curso, puede mejorar 😄

cypress serviria para probar una app monolítica?, que no contenga javascript.

Para los que tengan el siguiente error al ejecutar el comando pushstate-server dist y esten trabajando en windows:

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 0.0.0.0:9000
    at Server.setupListenHandle [as _listen2] (net.js:1360:14)
    at listenInCluster (net.js:1401:12)
    at doListen (net.js:1510:7)
    at _combinedTickCallback (internal/process/next_tick.js:142:11)
    at process._tickCallback (internal/process/next_tick.js:181:9)
    at Function.Module.runMain (module.js:696:11)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

La solución es eliminar el proceso que esta usando el puerto que utiliza pushstate-server u utilizar otro.

Los pasos para eliminar el proceso son los siguientes:

Para encontrar los procesos que están utilizando el puerto

netstat -ano | find ":9000 "

Comando que te dirá que programa esta utilizando el puerto.

tasklist /fi "pid eq {process-id}"

Comando para eliminar el proceso y liberar el puerto.

taskkill /pid {process-id} /f

Nota:
Estos comandos se tienen que utilzar en el cmd o en powerShell no en bash.

Mas información:
https://github.com/nuxt-community/starter-template/issues/87

Con ayuda de otros aportes, me sirvió instalando lo siguiente:

npm install --save-dev [email protected]3.2.0

Luego corrí el build y build test
Finalmente al script de test-server lo modifiqué así:

pushstate-server -d dist

👏

muy sencillas las conexiones y bien explicado, hasta el momento el curso me tiene con muy buenas expectativas

Errores en los archivos .env, no se visualizan dentro del ZIP.

perdi la paciencia con este curso. en serio… le tenia muchas ganas pero siempre me dan errores y termino pidiendo ayuda a gente que sabe de cosas de programacion, comencé el primero de enero y a 17 dias no he podido avanzar de la clase 4 instalando… los tester que queremos aprender a automatizar precisamente no sabemos de codigo, la idea seria aprender pero hasta los mismos programadores que pido ayuda me dicen que no explican bien aca como hacer las cosas… saludos

Muchas vueltas…

Sigo sin poder echar andar mi proyecto. aqui mi problema. Si alguien me puede ayudar por favor!

https://platzi.com/comentario/1158388/

alguien sabe porque arroja este error en el login??
Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined

Hola, en mi caso estoy corriendo el proyecto desde macOS Catalina y mi problema era que no se estaba tomando correctamente la base de datos de test, por lo que leyendo el archivo:
webpack.prod.conf.js

Encontré el siguiente fragmento de codigo y cambie el env por la variable que creamos envFile.

Como estaba antes:

new webpack.DefinePlugin({ 'process.env': env }),

como quedo:

new webpack.DefinePlugin({ 'process.env': envFile }),

De esta manera ya se dirige a la base de datos correcta.
Saludos.

Quiero aprender a configurar la configuración que está haciendo el profesor de esta clase y la pasada. ¿El curso de Firebase, enseña esto?

¿Porque se estan declarando dos veces la constante env?
Algun linter ayudaria…