cyclope
v2.7.1
Instantanés Cypress DOM et différences d'images cohérentes dans le cloud
Enregistrez la page en cas d'échec du test
Cyclope : enregistrez une page complète avec des styles si un test Cypress échoue
Utilisez LocalStorage à partir du test Cypress pour définir les données initiales
Tester le déplacement d'éléments
Introduction à la commande cy.session
Bonus 39 : Enregistrez l'intégralité de la page HTML sur les échecs des tests
Ajoutez ce plugin à votre projet. En supposant que Cypress soit une dépendance de développement
$ npm i -D cyclope# ou si vous préférez fil$ fil ajouter -D cyclope
Incluez le plugin à partir de votre fichier de support ou d'un fichier de spécifications individuel
// dans cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cyclope'
// cypress.config.jsconst { définirConfig } = require('cypress')module.exports = définirConfig({
e2e : {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // IMPORTANT de renvoyer l'objet de configuration // avec tout changement les variables d'environnement renvoient la configuration},
},})Incluez le plugin de votre fichier plugins
// cypress/plugins/index.jsmodule.exports = (on, config) => {
// https://github.com/bahmutov/cyclope
require('cyclope/plugin')(on, config)
// IMPORTANT de renvoyer l'objet de configuration
// avec les éventuelles variables d'environnement modifiées
retourner la configuration}Si vous devez enregistrer la page actuelle de l'application Web, y compris les ressources
// cypress/integration/spec.jsit('enregistre la page', () => {
// commandes Cypress normales
cy.contains('.some-selector', 'some text').should('be.visible')// lorsque l'application a atteint l'état souhaité// enregistrez la page dans le dossier "page".savePage(' page')})Toutes les ressources locales telles que les images et CSS doivent être enregistrées sous forme de fichiers locaux. Vous pouvez créer une archive zip
// utilise l'extension .zip pour compresser le dossier dans un fichiercy.savePage('page.zip')Lors de l'enregistrement du zip, la fonction génère un objet avec les propriétés de nom de fichier, de largeur et de hauteur.
removeIframes (false par défaut) supprime tous les éléments <iframe> de la page avant de l'enregistrer
cy.savePage('nom', { removeIframes: true }) ignoreFailedAssets (false par défaut) ignore l'échec au cas où une partie des actifs ne pourrait pas être chargée
cy.savePage('nom', { ignoreFailedAssets: true }) Ce module comprend une fonction utilitaire pour sauvegarder la page si le test a échoué. Vous pouvez utiliser cette fonction comme hook afterEach , probablement à partir du fichier de support, elle s'applique donc à tous les tests.
// dans cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } de 'cyclope'afterEach(() => {
savePageIfTestFailed()
// au cas où une partie des actifs de votre projet serait cassée
savePageIfTestFailed({ ignoreFailedAssets : true })}) Par défaut, la page est enregistrée uniquement en mode non interactif cypress run . Si vous souhaitez enregistrer la page même lors de l'exécution en mode cypress open , utilisez l'option saveInteractive
savePageIfTestFailed({ saveInteractive : true }) Toutes les pages sont enregistrées dans le dossier cypress/failed/<spec name>/<test name> .
Astuce : stockez le cypress/failed en tant qu'artefact de test sur CI. Si un test échoue, téléchargez et ouvrez le folder/index.html pour inspecter la structure de l'application au moment de l'échec.
Alias clope
Génère une image PNG cohérente à l’aide du service d’image Cyclope externe. Nécessite les variables d'environnement CYCLOPE_SERVICE_URL et CYCLOPE_SERVICE_KEY lors de l'exécution de Cypress. Prend en charge le survol
cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// enregistre l'image "hover-over-sun.png" générée// équivalentcy.get(' #theme-switcher').realHover()cy.clope() Si vous souhaitez simplement ignorer le téléchargement DOM et la génération d'images si le service Cyclope n'est pas configuré, définissez l'option d'environnement Cypress, par exemple en utilisant le fichier cypress.json
{ "env": {"cyclope": { "skipUploadWithoutUrl": true}
}
} Vous pouvez activer les messages de débogage détaillés dans le terminal à l'aide du module de débogage en exécutant les tests avec la variable d'environnement DEBUG=cyclope
$ DEBUG=cyclope npx cypress run
todo-app-pour-cyclope
sudoku-mock-module
Auteur : Gleb Bahmutov <[email protected]> © 2021
@bahmutov
glebbahmutov.com
bloguer
vidéos
présentations
cyprès.conseils
Licence : MIT - faites n'importe quoi avec le code, mais ne me blâmez pas s'il ne fonctionne pas.
Support : si vous rencontrez des problèmes avec ce module, envoyez un e-mail / tweetez / ouvrez un problème sur Github
Copyright (c) 2021 Gleb Bahmutov <[email protected]>
L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :
L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.
LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION. EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, DE OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.
