Instantáneas de Cypress DOM y diferencias de imagen consistentes en la nube
Guarde la página en caso de fallo de la prueba
Cyclope: guarde una página completa con estilos si falla una prueba de Cypress
Utilice LocalStorage de Cypress Test para establecer datos iniciales
Prueba de arrastre de elementos
Introducción al comando cy.session
Bonificación 39: guarde toda la página HTML en caso de fallos en las pruebas
Agregue este complemento a su proyecto. Suponiendo que Cypress es una dependencia de desarrollo
$ npm i -D cyclope# o si prefieres hilo$ hilo añade -D cyclope
Incluya el complemento de su archivo de soporte o un archivo de especificaciones individual
// en cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cíclope'
// cypress.config.jsconst { defineConfig } = require('cypress')module.exports = defineConfig({ e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // IMPORTANTE devolver el objeto de configuración // con cualquier cambio las variables de entorno devuelven configuración}, },})
Incluya el complemento de su archivo de complementos
// cypress/plugins/index.jsmodule.exports = (activado, configuración) => { // https://github.com/bahmutov/cyclope requerir('cíclope/complemento')(encendido, configuración) // IMPORTANTE devolver el objeto de configuración // con las variables de entorno modificadas configuración de retorno}
Si necesita guardar la página de la aplicación web actual, incluidos los recursos
// cypress/integration/spec.jsit('guarda la página', () => { // comandos normales de Cypress cy.contains('.some-selector', 'some text').should('be.visible')// cuando la aplicación haya alcanzado el estado deseado// guarde la página en la carpeta "page".savePage(' página')})
Todos los recursos locales, como imágenes y CSS, deben guardarse como archivos locales. Puedes crear un archivo zip.
// usa la extensión .zip para comprimir la carpeta en un archivocy.savePage('page.zip')
Al guardar el zip, la función genera un objeto con propiedades de nombre de archivo, ancho y alto.
removeIframes
(falso por defecto) elimina todos los elementos <iframe>
de la página antes de guardar
cy.savePage('nombre', {eliminarIframes: verdadero})
ignoreFailedAssets
(falso por defecto) ignora el error en caso de que parte de los activos no se puedan cargar
cy.savePage('nombre', {ignorarFailedAssets: verdadero})
Este módulo incluye una función de utilidad para guardar la página si la prueba falla. Puede utilizar esta función como afterEach
gancho, probablemente desde el archivo de soporte, por lo que se aplica a todas las pruebas.
// en cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } from 'cyclope'afterEach(() => { guardarPageIfTestFailed() // en caso de que parte de los activos de tu proyecto estén rotos savePageIfTestFailed({ ignoreFailedAssets: verdadero })})
De forma predeterminada, la página se guarda solo en el modo no interactivo cypress run
. Si desea guardar la página incluso cuando se ejecuta en el modo cypress open
, use la opción saveInteractive
savePageIfTestFailed({ saveInteractive: verdadero })
Todas las páginas se guardan en la carpeta cypress/failed/<spec name>/<test name>
.
Consejo: guarde el cypress/failed
como un artefacto de prueba en CI. Si una prueba falla, descargue y abra la folder/index.html
para inspeccionar la estructura de la aplicación en el momento del error.
alias clope
Genera una imagen PNG consistente utilizando el servicio de imágenes externo Cyclope. Requiere las variables de entorno CYCLOPE_SERVICE_URL
y CYCLOPE_SERVICE_KEY
cuando se ejecuta Cypress. Soporta el desplazamiento
cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// guarda la imagen "hover-over-sun.png" generada// equivalentecy.get(' #cambiador de temas').realHover()cy.clope()
Si simplemente desea omitir la carga de DOM y la generación de imágenes si el servicio Cyclope no está configurado, configure la opción de entorno Cypress, por ejemplo usando el archivo cypress.json
{ "env": {"cíclope": { "skipUploadWithoutUrl": verdadero} } }
Puede habilitar mensajes de depuración detallados en la terminal usando el módulo de depuración ejecutando las pruebas con la variable de entorno DEBUG=cyclope
$ DEBUG=cyclope npx cypress run
aplicación-de-todo-para-cyclope
módulo-sudoku-simulado
Autor: Gleb Bahmutov <[email protected]> © 2021
@bahmutov
glebbahmutov.com
blog
vídeos
presentaciones
ciprés.consejos
Licencia: MIT: haz cualquier cosa con el código, pero no me culpes si no funciona.
Soporte: si encuentra algún problema con este módulo, envíe un correo electrónico / tweet / abra el problema en Github
Copyright (c) 2021 Gleb Bahmutov <[email protected]>
Por el presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el "Software"), para operar con el Software sin restricciones, incluidos, entre otros, los derechos de uso, copia, modificación, fusión. , publicar, distribuir, sublicenciar y/o vender copias del Software, y permitir que las personas a quienes se les proporciona el Software lo hagan, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGÚN RECLAMO, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN CONTRACTUAL, AGRAVIO O DE OTRA MANERA, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTRAS NEGOCIOS EN EL SOFTWARE.