Weitergabe von Variablen zwischen Cypress-Tests in einem Anwendungsfall mit mehreren Domänen

Kürzlich arbeitete ich in einem Unternehmen an einer Aufgabe zur Implementierung von End-2-End-Tests. Dieses Unternehmen verwendet Cypress als sein Haupttool für diese Aufgabe. Die Aufgabe bestand darin, einen vollständigen Integrationstest durchzuführen, der mehrere Domänen umfasst. Die erste Anfrage sollte eine eindeutige ID als Ergebnis eines eingereichten Formulars liefern. Diese ID wurde für die zweite Anfrage in der anderen Domäne benötigt. Um dies zu ermöglichen, musste ich Variablen zwischen den Cypress-Tests übergeben. Da mir die Suche nach einer geeigneten Lösung etwas Kopfzerbrechen bereitet hat, möchte ich Ihnen mitteilen, wie ich dieses Problem gelöst habe.

Notiz

Die Anforderung, einen gesamten Datenfluss zwischen mehreren Domänen zu testen, ist ungewöhnlich und wird oft sogar als schlechte Praxis bezeichnet. Es kann jedoch vorkommen, dass Sie genau das brauchen. Außerdem ist es mit Cypress nicht möglich (ohne gegen bewährte Verfahren zu verstoßen), einen einzigen Test ordnungsgemäß auf mehreren Domänen durchzuführen. Dies ist insbesondere dann der Fall, wenn Formulare herkunftsübergreifend gesendet werden müssen. Glücklicherweise ist Cypress auf NodeJS aufgebaut. Dadurch haben Sie die Möglichkeit, Variablen außerhalb der Tests zu speichern, indem Sie Getter und Setter verwenden. Hierfür habe ich die folgende Lösung verwendet.

Weisen Sie Getter und Setter für Ihre Variable zu

Um die Übergabe der eindeutigen ID zu ermöglichen, müssen wir in der Lage sein, diese irgendwo außerhalb des Testbereichs zu speichern. Zu diesem Zweck fügen wir den Plugins einige Funktionen hinzu.

plugins/index.js

let myUniqueId

// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
    on('task', {
        setMyUniqueId: (val) => {
            return (myUniqueId = val);
        },

        getMyUniqueId: () => {
            return myUniqueId;
        }
    })
}

Definieren Sie Tests

Um Tests für mehrere Domänen zu ermöglichen, müssen wir separate Tests definieren, da es normalerweise nicht möglich ist, mehr als eine Domäne im selben Test zu besuchen. Daher fangen wir die Anfrage ab, extrahieren die eindeutige ID, speichern sie und holen sie dann im nachfolgenden Test wieder ab. Dies führt in der Tat zu einer Abhängigkeit zwischen den Tests. Wenn es eine bessere Option gibt, würde ich mich freuen, davon zu hören.

test_spec.js

let mainDomainUrl, crossDomainUrl

describe('Cross domains forms with shared unique ID', () => {
    beforeEach(() => {
        mainDomainUrl = "https://my-maindomain.com/fetch"
        crossDomainUrl = "https://my-crossdomain.org/verify/"
    })

    it("Should fetch a unique ID", () => {
        cy.visit(mainDomainUrl)

        cy.intercept(crossDomainUrl + '*').as('uniqueIdUrl')

        cy.get("#my-form-field").type("My value")       
        cy.get("button[type=submit]").click()

        cy.wait('@uniqueIdUrl').then((intercepted) => {
            let myUniqueId = intercepted.request.url.split("/").slice(-1).pop()
            cy.task('setMyUniqueId', myUniqueId)
        })
    })

    it("Should verify the unique ID", () => {
        cy.task('getMyUniqueId').then((myUniqueId) => {
            cy.visit(crossDomainUrl + myUniqueId)
        })

        cy.waitFor("#verification")
        cy.get('#verification').should('contain', 'Your unique ID is valid')
    })
})

Deaktivieren der Funktion Web-Sicherheit

Für den beschriebenen Anwendungsfall müssen wir das Absenden eines Formulars über den Ursprung hinweg erlauben. Dies können wir tun, indem wir die Chrome Web Security-Funktion deaktivieren.

cypress.json

{
    "chromeWebSecurity": false
}

Fazit

Indem Sie die Variable außerhalb des Testkontexts mit einem Getter und Setter speichern, können Sie Variablen zwischen Cypress-Tests weitergeben. Dies ist besonders nützlich, wenn Sie Ihren Test für die domänenübergreifende Formularübermittlung und Ergebnisüberprüfung aufteilen müssen.