La aplicación Cypress.io es la encargada de realizar las automatizaciones y testeos correspondientes punta a punta de la aplicación desarrollada. Este proyecto contiene las configuraciones necesarias para empezar a realizar las pruebas.
- Dependencies and libraries
- Setup workspace
- Scripts of run
- Custom configuration
- Custom environment variables
- Access Redux Store
- To Do/Features
- Troubleshooting
- Contributing
- Authors
- Node.js v10.5.3 o superior
- npm v6.4.1 o superior
- Cypress.io v7.2.0
- Mocha v8.4.0
- Mochawesome v6.2.2
- Mochawesome Report Generator v5.2.0
Instalar dependencias
npm install
Una vez instalada las dependencias, hay que ejecutar el script verify para comprobar que se instalo correctamente Cypress.
cypress verify
Si hay algún problema con la verificación de Cypress, podés revisar la soluciones de Troubleshooting.
La aplicación debe estar iniciada en algún ambiente (localhost, desa, homo, int, qas, prod, .etc) y se debe configurar el baseUrl en el archivo cypress.json que corresponde a su ambiente dentro de la carpeta config.
npm run start : Inicia la aplicación Cypress con una interfaz gráfica donde podrás realizar las pruebas visuales sobre los test en el ambiente de localhost.
npm run start:local : Inicia la aplicación Cypress con una interfaz gráfica donde podrás realizar las pruebas visuales sobre los test en el localhost.
npm run start:desa : Inicia la aplicación Cypress con una interfaz gráfica donde podrás realizar las pruebas visuales sobre los test en el ambiente de desa.
Si se desea testear para un nuevo ambiente, basta con crear el archivo cypress.json dentro de la carpeta config con su configuración, agregar la tarea dentro de scripts:{} en el package.json con el nombre del nuevo ambiente y crear el archivo .env en variables. (seguir la referencia de los que ya están creados)
npm run report: Inicia la aplicación cypress en modo serverless y realiza los testeos del lado de la terminal sin interfaz gráfica generando un archivo HTML dentro de la carpeta mochawesome-report donde contiene el resultado de todos los test.
npm run cy:report: Inicia la aplicación cypress en modo serverless y realiza los testeos del lado de la terminal sin interfaz gráfica.
Se puede cambiar el valor de alguna configuración que viene por default en Cypress, solo basta con agregarlo en el archivo cypress.json correspondiente al ambiente a testar, estos archivos de configuración se encuentran dentro de la carpeta config.
// config/cypress<.env>.json
{
...
"watchForFileChanges":false,
...
}
Para poder hacer testeos más robustos y escalables, Cypress te da la posibilidad de guardar tus propias variables dentro del nodo env:{ }.
Se debe crear las variables en los archivos .env que están en la carpeta variables, estas tiene que tener el prefijo CYPRESS_ y luego el nombre de la variable, para que luego quede disponibilizada en la configuración final.
CYPRESS_FOO=MY FOO BAR
{
...
env:{
CYPRESS_FOO='MY FOO BAR'
}
...
}
Cypress.env() // {CYPRESS_FOO: 'MY FOO BAR'}
Cypress.env('CYPRESS_FOO') // 'MY FOO BAR'
Para poder acceder al Store del Redux primero hay que exponerlo para cuando Cypress inicialice la aplicación.
// src/app.js
...
import store from "./store";
...
class App extends Component {
render() {
// Exponer el store del redux para Cypress.io
if (window.Cypress) {
window.store = store;
}
return (
<Provider store={store}>
...
</Provider>
);
}
}
export default App;
...
Para poder consumir en los test el store expuesto.
...
it("Consumir el store expuesto", () => {
cy.window().its('store').invoke('getState').then(($store) => {
console.log($store); // Return obj
});
})
...
Para más información, ingresá a esta entrada del blog de Cypress.io Testing Redux Store
-
Utilizar variables de entorno por medio de archivos .env para cada ambiente. -
Configuración de cypress por ambiente. -
Exponer y obtener los stores del Redux. -
Agregar contextos a los resultados del reporte HTML (text, image, video, obj, etc). -
Agregar screenshot al reporte cuando falla el test. -
Agregar video al reporte cuando falla el test. -
Actualizar Cypress.io a la v4.11.0 -
Actualizar Cypress.io a la v5.3.0 -
Actualizar Cypress.io a la v7.2.0
-
Cypress verify step --smoke-test: a veces con la instalación de Cypress no se actualiza el caché, por lo que se recomienda correr el comando
cypress verifyy luego correr el comandocypress openocypress runo cualquier otro comando que inicialice la app de Cypress. En caso de que no funcione, se recomienda borrar el caché de cypress (cypress cache clear) y realizar los pasos mencionados anteriormente. -
Cypress verify timeout --smoke-test: a veces tarda demasiado en realizar el smoke-test, por lo que una solución viable es aumentar el tiempo del timeout, para ello vamos a editar el valor de
VERIFY_TEST_RUNNER_TIMEOUT_MSa100000(default:30000) que se encuentra en./node_modules/cypress/lib/tasks/verify.js. -
Se carga Cypress, pero no se abre: Con la actualización de node.js es probable que la aplicación no esté actualizada a los cambios, por lo que posiblemente pueda pasar que se cargue el proyecto, pero no se abra la pantalla. Para poder ver el dash de Cypress, basta con apretar
Shift + Click Derechoen el icono de Cypress en la Barra de Tareas y luego hacer click en Maximizar, esto pone la ventana en primer plano y podrás usarlo.
Los pedidos de requests son bienvenidos. Para cambios importantes, por favor abra primero un tema para discutir lo que le gustaría cambiar.
Por favor, asegúrese de actualizar las pruebas y la documentación según corresponda.
