cyclope
v2.7.1
Cypress DOM-Snapshots und konsistente Bildunterschiede in der Cloud
Speichern Sie die Seite bei einem Testfehler
Cyclope: Speichern Sie eine ganze Seite mit Stilen, wenn ein Cypress-Test fehlschlägt
Verwenden Sie LocalStorage From Cypress Test, um Anfangsdaten festzulegen
Testen Sie das Ziehen von Elementen
Einführung in den Befehl cy.session
Bonus 39: Speichern Sie die gesamte HTML-Seite bei Testfehlern
Fügen Sie dieses Plugin zu Ihrem Projekt hinzu. Angenommen, Cypress ist eine Entwicklerabhängigkeit
$ npm i -D cyclope# oder wenn Sie Yarn$ Yarn bevorzugen, fügen Sie -D cyclope hinzu
Fügen Sie das Plugin aus Ihrer Supportdatei oder einer einzelnen Spezifikationsdatei ein
// in cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cyclope'
// cypress.config.jsconst { defineConfig } = require('cypress')module.exports = defineConfig({
e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // WICHTIG, das Konfigurationsobjekt // mit allen geänderten Werten zurückzugeben Umgebungsvariablen geben config zurück},
},})Fügen Sie das Plugin aus Ihrer Plugins-Datei ein
// cypress/plugins/index.jsmodule.exports = (on, config) => {
// https://github.com/bahmutov/cyclope
require('cyclope/plugin')(on, config)
// WICHTIG, um das Konfigurationsobjekt zurückzugeben
// mit den eventuell geänderten Umgebungsvariablen
Konfiguration zurückgeben}Wenn Sie die aktuelle Webanwendungsseite einschließlich aller Ressourcen speichern müssen
// cypress/integration/spec.jsit('speichert die Seite', () => {
// normale Cypress-Befehle
cy.contains('.some-selector', 'some text').should('be.visible')// wenn die App den gewünschten Zustand erreicht hat// speichere die Seite im Ordner „page“.savePage(' Seite')})Alle lokalen Ressourcen wie Bilder und CSS sollten als lokale Dateien gespeichert werden. Sie können ein Zip-Archiv erstellen
// Verwenden Sie die Erweiterung .zip, um den Ordner in eine Datei zu komprimierency.savePage('page.zip')Beim Speichern der Zip-Datei liefert die Funktion ein Objekt mit den Eigenschaften Dateiname, Breite und Höhe.
removeIframes (standardmäßig „false“) entfernt vor dem Speichern alle <iframe> -Elemente von der Seite
cy.savePage('name', { removeIframes: true }) ignoreFailedAssets (standardmäßig „false“) ignoriert Fehler, falls ein Teil der Assets nicht geladen werden kann
cy.savePage('name', {ignoreFailedAssets: true}) Dieses Modul enthält eine Hilfsfunktion zum Speichern der Seite, wenn der Test fehlgeschlagen ist. Sie können diese Funktion als afterEach Hook verwenden, wahrscheinlich aus der Support-Datei, sodass sie für alle Tests gilt.
// in cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } from 'cyclope'afterEach(() => {
savePageIfTestFailed()
// für den Fall, dass ein Teil der Vermögenswerte in Ihrem Projekt kaputt ist
savePageIfTestFailed({ignoreFailedAssets: true })}) Standardmäßig wird die Seite nur im nicht interaktiven Modus cypress run gespeichert. Wenn Sie die Seite auch im cypress open -Modus speichern möchten, verwenden Sie die Option saveInteractive
savePageIfTestFailed({ saveInteractive: true }) Alle Seiten werden im Ordner cypress/failed/<spec name>/<test name> gespeichert.
Tipp: Speichern Sie „ cypress/failed als Testartefakt auf CI. Wenn ein Test fehlschlägt, laden Sie den folder/index.html herunter und öffnen Sie ihn, um die Struktur der Anwendung zum Zeitpunkt des Fehlers zu überprüfen.
Alias clope
Erzeugt ein konsistentes PNG-Bild mithilfe des externen Cyclope-Bilddienstes. Erfordert die Umgebungsvariablen CYCLOPE_SERVICE_URL und CYCLOPE_SERVICE_KEY wenn Cypress ausgeführt wird. Unterstützt Schweben
cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// speichert das generierte Bild „hover-over-sun.png“// Äquivalentcy.get(' #theme-switcher').realHover()cy.clope() Wenn Sie den DOM-Upload und die Bildgenerierung einfach überspringen möchten, wenn der Cyclope-Dienst nicht konfiguriert ist, legen Sie die Cypress-Umgebungsoption fest, beispielsweise mithilfe der Datei cypress.json
{ "env": {"cyclope": { "skipUploadWithoutUrl": true}
}
} Sie können ausführliche Debug-Meldungen im Terminal mithilfe des Debug-Moduls aktivieren, indem Sie die Tests mit der Umgebungsvariablen DEBUG=cyclope ausführen
$ DEBUG=cyclope npx cypress run
todo-app-for-cyclope
Sudoku-Mock-Modul
Autor: Gleb Bahmutov <[email protected]> © 2021
@bahmutov
glebbahmutov.com
Blog
Videos
Präsentationen
Zypressen.Tipps
Lizenz: MIT – machen Sie alles mit dem Code, aber geben Sie mir nicht die Schuld, wenn es nicht funktioniert.
Support: Wenn Sie Probleme mit diesem Modul finden, senden Sie eine E-Mail/Tweet/öffnen Sie das Problem auf Github
Copyright (c) 2021 Gleb Bahmutov <[email protected]>
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN ZUSAMMENHANG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.
