Seitenobjektmodell, Üblicherweise bekannt als POM, ist ein beliebtes Muster in jedem Automatisierungs-Framework. Page Object Model kann auch in Cypress angewendet werden. Page Object Model hat viele Vorteile bei der Erstellung eines Frameworks für die Testautomatisierung, wie z. B. die Reduzierung der Codeduplizierung und die Verbesserung der Wartbarkeit und Lesbarkeit. Cypress bietet uns die Flexibilität, das Page Object Model in das Testskript zu integrieren. In diesem Artikel befassen wir uns mit der Erstellung eines Seitenobjektmodells in Zypressenschritt Schritt für Schritt mit Beispielen.

Table of Contents:

• Was ist das Seitenobjektmodell?
• Seitenobjektmodell-Framework-Architektur
• Vorteile der Verwendung des Seitenobjektmodells in Cypress
• Schritt-für-Schritt-Seitenobjektmodell Cypress mit Beispiel
• Zugreifen auf die Seitenobjekte in der Spec-Datei
• Wie verwende ich Fixtures als Testdatenquelle im Page Object Model in Cypress?
• Auf die Werte aus der JSON-Datei in der Testfalldatei zugreifen
• Häufig gestellte Fragen

Was ist das Seitenobjektmodell?

Page Object Model ist ein Entwurfsmuster, bei dem die Seitenobjekte werden von den Automatisierungstestskripten getrennt. Automatisierungstests bieten uns viele Vorteile, von denen wir beim Testen profitieren. Es gibt jedoch einige Ergebnisse wie Codeduplizierung und ein erhöhtes Risiko der Wartbarkeit, wenn das Projekt wächst. Lassen Sie uns die Bedeutung von POM anhand eines Beispiels verstehen.

Nehmen Sie an, dass unsere Anwendung mehrere Seiten hat, z. B. die Anmeldeseite, die Registrierungsseite und die Seite "Flüge buchen".

• Die Login-Seite enthält alle Web-Elemente der Login-Funktionalitäten
• Die Registrierung enthält alle Methoden und Webelemente des Registrierungsprozesses
• Die Flugbuchungen enthalten die Webelemente der Flugbuchungsseite

Es gibt drei Testfälle, nämlich TC1, TC2 und TC3.

• TC1 enthält die Login-Testfälle.
• TC2 enthält Login- und Registrierungs-Testfälle
• TC3 enthält Testfälle für Anmeldung, Registrierung und Flugbuchung

Jetzt interagiert die Anmeldeseite mit TC1.

Die Registrierungsseite muss mit TC1 und TC2 interagieren, und

Die Flugbuchungsseite muss mit TC1, TC2 und TC3 interagieren

Wie Sie sehen, gibt es in allen drei Testfällen gemeinsame Funktionalitäten. Anstatt die Methoden und Locators der Anmeldung in alle Testfalldateien zu schreiben, können wir sie separat haben und über die Dateien hinweg darauf zugreifen. Auf diese Weise wird der Code nicht wiederholt und ist leicht lesbar.

Eine der Best Practices beim Codieren ist ein Konzept namens TROCKEN. Es bedeutet Wiederhole dich nicht. Wie das vollständige Formular deutlich sagt, sollten wir die Codezeilen nicht immer wieder wiederholen. Um dies zu überwinden, Seitenobjektmodell spielt eine wichtige Rolle bei den besten Codierungspraktiken.

Seitenobjektmodell-Framework-Architektur

Das Seitenobjektmodell-Framework Architektur ist eine bewährte Architektur, die mit einfachen Methoden angepasst werden kann. Heutzutage folgen fast alle Unternehmen agilen Methoden, die kontinuierliche Integration, Entwicklung und Tests beinhalten. Die Automatisierungstester pflegen das Testframework, um neben dem Entwicklungsprozess mit dem zu arbeiten Seitenobjektmodell. Es ist eine bedeutende Entwurfsmuster bei der Wartung des Automatisierungstestframeworks wenn der Code mit neuen Funktionen wächst.

Das Seitenobjekt ist ein Entwurfsmuster, das eine objektorientierte Klasse ist, die mit den Seiten der von uns getesteten Anwendung interagiert. Seitenobjekt besteht aus Seitenklasse und Testfälle. Seitenklasse besteht aus Methoden und Locators, um mit den Webelementen zu interagieren. Wir erstellen separate Klassen für jede Seite in der Anwendung. Wir werden für jede Funktionalität individuelle Methoden erstellen und in unserer Spezifikationsdatei darauf zugreifen.

Vorteile der Verwendung des Seitenobjektmodells in Cypress

1. Die Methoden sind wiederverwendbar über das gesamte Projekt hinweg und einfach zu warten, wenn das Projekt wächst. Die Codezeilen werden weniger lesbar und optimiert.
2. Page Object Pattern schlägt vor, dass wir die Betrieb und Ablauf die wir in der Benutzeroberfläche von ausführen Überprüfung Schritte. Wenn wir dem POM-Muster folgen, neigen wir dazu zu schreiben sauberer und leicht verständlicher Code.
3. Mit dem Seitenobjektmodell, Objekte und Testfälle sind voneinander unabhängig. Wir können die Objekte überall im Projekt aufrufen. Auf diese Weise ist es einfach, wenn wir verschiedene Tools wie TestNG/JUnit für Funktionstests oder Cucumber für Abnahmetests verwenden zugänglich.

Schritt-für-Schritt-Seitenobjektmodell Cypress mit Beispiel

In diesem Abschnitt erfahren Sie, wie Sie ein Seitenobjektmodell in erstellen Cypress mit Echtzeitbeispielen die wir in Projekten umsetzen können. Wir werden die grundlegende Einrichtung und den schrittweisen Prozess zum Erstellen eines Seitenobjektmodells verstehen.

Lassen Sie uns das Szenario besprechen, für das wir die Funktionen in diesem Beispiel schreiben.

1. Navigieren https://admin-demo.nopcommerce.com/ Website
2. Geben Sie einen gültigen Benutzernamen und ein gültiges Passwort ein
3. Klicken Sie auf den Login-Button
4. Überprüfen Sie die URL, ob sie mit angehängt ist /admin nach dem Login

Wir werden zwei Dateien erstellen – eine PageObject-Datei und eine Spezifikationsdatei für dieses Beispiel. Lasst uns beginnen!

Schritt 1: Öffnen Sie unser Projekt im VS-Code. Erstellen Sie einen Ordner namens Seitenobjekt unter dem Integration Mappe. Unter diesem Ordner können Sie Seitenobjektdateien für beliebige Module erstellen.

Schritt 2: Erstellen Sie eine Datei mit dem Namen LoginPage.js unter dem Seitenobjekt Mappe. In LoginPage.js werden wir die Methoden schreiben, die die Anmeldefunktionen beinhalten.

Schritt 3: Beginnen wir mit dem Schreiben unserer ersten Testmethode in die LoginPage.js Datei. Wir müssen zuerst eine Klasse erstellen, die wir in unsere Spezifikationsdatei exportieren. Wir nennen unsere Klasse als Loginseite

Klasse Anmeldeseite { }

Basierend auf unserem Pseudocode navigieren wir zunächst zur URL. Wir nennen unsere Methode als navigate(). Innerhalb unserer Navigationsmethode werden wir Folgendes hinzufügen cy.visit() Funktion von Cypress.

 navigation() { cy.visit('https://admin-demo.nopcommerce.com/') }

Schritt 4: Jetzt müssen wir den Benutzernamen in unser E-Mail-Feld eingeben. Wir werden unsere Methode benennen als Email eingeben(). Zuerst sollten wir den Locator des E-Mail-Felds abrufen und über . darauf zugreifen cy.get() Befehl. Dann löschen wir das Feld mit der clear() Befehl und fügen Sie den Benutzernamen mit dem type() Befehl. In unserer Methode übergeben wir einen Parameter Benutzername um den Wert in der Spezifikationsdatei zu übergeben. Auf diese Weise halten wir es generisch, auf diese Methode zuzugreifen, wenn eine andere E-Mail-ID erforderlich ist.

enterEmail(username) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(username); gib das zurück }

Anstatt die zu schreiben cy.get() Befehl zweimal im obigen Code, wir können sie einfach mit der Schleife Punkt Betreiber.

  enterEmail (Benutzername) { cy.get ('[id = E-Mail]') .clear() .type (Benutzername); gib das zurück }

Du hast es vielleicht bemerkt return this in Zeile 9. fehlen uns die Worte. zeigt an, dass die Email eingeben Methode gehört zum Besonderen Loginseite Klasse. Grundsätzlich, fehlen uns die Worte. repräsentiert die Klasse.

Schritt 5: Wir müssen eine Methode für Passwörter erstellen, die unserer Methode enterEmail ähnelt. Wir nennen unsere Passwortmethode als enterPassword(). Zunächst erhalten wir den Locator für das Passwort, löschen das Feld und geben den Eingabewert ein. Wir übergeben unserer Methode einen Parameter namens pswd und Zugang im type() Befehl.

enterPassword(pswd) { cy.get('[id=Passwort]') .clear() .type(pswd) gib das zurück }

Schritt 6: Unsere letzte Methode wäre, auf den Login-Button zu klicken. Wir werden unsere Methode benennen als submit(). Wir erhalten den Locator und klicken auf die Schaltfläche mit dem click() Methode von Cypress.

 submit() { cy.get('[type=submit]').click() }

Schritt 7: Jetzt müssen wir diese Klasse exportieren, um sie in unserer Spezifikationsdatei zu verwenden. Dazu fügen wir nur eine Zeile außerhalb unserer Klasse hinzu und können in unserer Spezifikationsdatei leicht darauf zugreifen.

Standard-Anmeldeseite exportieren

Hurra! Wir haben eine Page Object-Datei für unser Projekt erstellt. Es war ziemlich einfach und leicht!

Zugreifen auf die Seitenobjekte in der Spec-Datei

Kommen wir nun zu unserer Testfalldatei. Wir müssen eine Spezifikationsdatei in unserem Integrationsordner erstellen. Wir werden unsere Spezifikationsdatei aufrufen POMDemo.spec.js.

Schritt 1: Um auf unsere Methoden in der Datei LoginPage.js zuzugreifen, müssen wir importieren sie in unsere Spezifikationsdatei. Wir importieren mit der Import-Anweisung. Wir sollten zur Datei LoginPage.js navigieren, indem wir verwenden ../

In unserem Fall ist der Weg ../integration/PageObject/LoginPage. Die import-Anweisung sieht also in etwa wie folgt aus.

Anmeldeseite aus "../integration/PageObject/LoginPage" importieren

Schritt 2: Da wir Mocha verwenden, schreiben wir unseren Testfall hinein describe() und it() Block. beschreiben() steht für a Testsuite, und it() repräsentiert a Testfall. Beide Blöcke sind eine Funktion und akzeptieren einen String-Parameter, der die Beschreibung des Tests.

description("Cypress POM Test Suite", function () { })

Innerhalb des Beschreibungsblocks schreiben wir unsere it() indem Sie die Beschreibung als Login mit gültigen Zugangsdaten hinzufügen.

it("Login mit gültigen Zugangsdaten", function () { })

Schritt 3: Um auf unsere Methoden aus unserer Page-Objektdatei zuzugreifen, sollten wir eine Instanz für unsere Login-Klasse erstellen. Um eine Instanz für die Login-Klasse zu erstellen, müssen wir eine Variable deklarieren und sie unserer Klassendatei mit dem zuweisen neu Stichwort. Mit der deklarierten Variablen können wir einfach auf die Methoden aus der Page-Objektdatei zugreifen.

                                               const login = neue LoginPage();

Note: Mit der Variablen login, können wir auf die Methoden aus der Page-Objektklasse zugreifen. Wenn wir anfangen zu tippen login. , listet der vscode die Vorschläge aller Methoden auf, die in der Datei LoginPage.js verfügbar sind. Dies hilft uns zu überprüfen, ob wir unsere Klasse richtig exportiert und importiert haben!

Schritt 4: Nennen wir unsere navigate() Methode zum Aufrufen der URL. Dies ist die erste Aktion in unserem Testfall.

/// LoginPage aus "./PageObject/LoginPage" importieren description("Cypress POM Test Suite", function () { it("Login mit gültigen Anmeldedaten", function () { const login = new LoginPage(); login.navigate(); }); });

Schritt 5: Wir sollten den Benutzernamen in das E-Mail-Feld eingeben. Wir greifen auf die enterEmail() an. Nach der Installation können Sie HEIC-Dateien mit der login Objekt. enterEmail() Methode akzeptiert einen Parameter Benutzername. Also sollten wir den Wert für den Benutzernamen als a . übergeben Schnur in unserer Spezifikationsdatei

/// import LoginPage from „./PageObject/LoginPage“ write("Cypress POM Test Suite", function () { it("Login with valid credentials", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[E-Mail geschützt] '); }) })

Schritt 6: Ähnlich wie bei Schritt 5 sollten wir unsere aufrufen enterPassword() -Methode, indem Sie das Kennwort als Parameter in der Zeichenfolge übergeben.

/// import LoginPage from „./PageObject/LoginPage“ write("Cypress POM Test Suite", function () { it("Login with valid credentials", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[E-Mail geschützt] '); login.enterPassword('admin'); }) })

Schritt 7: Als nächstes müssen wir auf den Login-Button klicken. Wir werden die Methode aufrufen submit() aus unserer Seitenobjektdatei.

/// import LoginPage from „./PageObject/LoginPage“ write("Cypress POM Test Suite", function () { it("Login with valid credentials", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[E-Mail geschützt] '); login.enterPassword('admin'); login.submit(); }) })

Schritt 8: Nach der Anmeldung müssen wir die URL bestätigen. Wir prüfen, ob die URL gleich zur URL nach der Anmeldung. Zur Geltendmachung verwenden wir der Chai Assertion-Bibliothek, die in Cypress integriert ist.

/// import LoginPage from „./PageObject/LoginPage“ write("Cypress POM Test Suite", function () { it("Login with valid credentials", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[E-Mail geschützt] '); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

Das obige Bild stellt den Anmeldetestfall dar. Wir konnten mit sehr wenigen einfachen Schritten einen Testfall mit einem Page Object Model schreiben. Lassen Sie uns nun den Testfall ausführen und das Ergebnis sehen.

Wir werden den Cypress Test Runner öffnen und auf die Spezifikationsdatei klicken und unseren Testfall ausführen. Überprüfen Sie dies Artikel zum Öffnen des Cypress Test Runners.

Hurra! Wir haben erfolgreich einen Testfall geschrieben, der das Page Object Model in Cypress verwendet. Dieses Muster können wir in Echtzeit-Projekte integrieren. Es gibt viele Möglichkeiten, die Methoden in eine Seitenobjektdatei zu schreiben. Ich habe Ihnen ein Beispiel gezeigt, das Standard ist und für jedes Projekt funktioniert. Sie können auch nur die schreiben Rückgabefunktion in der Seitenobjektdatei und klicken Sie dann auf und tippe direkt in unserer Spezifikationsdatei.

Wir werden ein weiteres Muster sehen, das wir im Projekt verwenden können. Diese Methode wird auch einwandfrei funktionieren.

Bei diesem Typ geben wir nur die Locator-Funktion in unserer Methode zurück und führen Aktionen in der Testdatei aus. Wir werden Code für das gleiche Szenario schreiben, das wir oben gesehen haben.

Seitenobjekt – LoginPage.js

class LoginPage { navigation () { cy.visit ('https://admin-demo.nopcommerce.com/') } enterEmail () { return cy.get ('[id=Email]') } enterPassword () { return cy.get('[id=Password]') } submit() { return cy.get('[type=submit]') } } export default LoginPage

Wie wir oben gesehen haben, schreiben wir nur den Locator in unsere Funktion und geben ihn zurück. Die Rückgabe gibt an, dass die jeweilige Methode zu der . gehört Klasse LoginPage.js. Wir fügen unseren Methoden keine Aktionen hinzu.

Spezifikationsdatei – POMDemo.spec.js

Wir werden uns das Beispiel für den Zugriff auf die Methoden in der Spezifikationsdatei ansehen.

/// import LoginPage from „./PageObject/LoginPage“ write("Cypress POM Test Suite", function () { it("Login with valid credentials", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('[E-Mail geschützt] '); login.enterPassword().clear() login.enterPassword().type('admin'); login.submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Hier rufen wir die Methode aus der PageObject-Datei auf und führen die Testfallaktionen aus. Also rufen wir zuerst unsere Referenzvariable auf login und dann mit der Methode anhängen enterEmail() und schließlich die Aktion anhängen tippe. In unserem type(), wir übergeben den Benutzernamen Wert.

Wie Sie sehen, wurden alle Befehle ausgeführt und der Testfall ist bestanden!

Sie können wählen, welches Page Object Model zu Ihrem Projekt und Ihrer Meinung passt. Es gibt keine besondere Regel, sich an nur ein Verfahren zu halten.

Wie verwende ich Fixtures als Testdatenquelle im Page Object Model in Cypress?

In unseren Beispielen für das Seitenobjektmodell haben wir den Benutzernamen und den Kennwortwert entweder direkt in die Seitenobjektdatei oder direkt in die Testfalldatei übergeben. In diesem Abschnitt erfahren Sie, wie Sie es verwenden Vorrichtungen in Cypress um die Daten sicher aufzubewahren und nicht offenzulegen. Wir sollten versuchen, alle Anmeldeinformationen und Daten in einer Datei zu speichern und darauf zuzugreifen. Auf diese Weise ist es einfach zu warten und vertrauliche Daten wie Benutzername und Passwort werden nicht offengelegt. Diese Methode ist auch eine der Prozeduren, die wir in Page Object Pattern befolgen müssen.

Wie vorhin besprochen, Fixture hilft beim Speichern von Daten in einer JSON- oder Excel-Datei oder einer externen Bibliothek wie Apache POI. Wir verwenden diese Daten, indem wir eine Variable erstellen und in unserer Spezifikationsdatei darauf zugreifen. Lassen Sie es uns anhand eines Beispiels verstehen.

Cypress bietet einen Ordner namens „Armaturen.“ Wir werden eine erstellen JSON Datei aufgerufen Beglaubigungsschreiben.JSON im Ordner 'Fixtures'.

Lassen Sie uns unseren Benutzernamen, unser Passwort und unsere URL-Werte, die wir validieren müssen, in einem JSON-Format im deklarieren Anmeldedaten.json Datei.

{ "Nutzername" : "[E-Mail geschützt] ", "password": "admin", "adminUrl": "https://admin-demo.nopcommerce.com/admin/" }

Auf die Werte aus der JSON-Datei in der Testfalldatei zugreifen

Da wir die Werte in unserer JSON-Datei definiert haben, greifen wir in unserer Testfalldatei mit . darauf zu Vorrichtungen von Zypresse. Wir werden auf den JSON-Wert zugreifen mit fehlen uns die Worte. Stichwort. Wickeln wir die Fixture-Funktion in a Vor() blockieren.

description("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) – diese Linie bedeutet, dass wir die passieren Anmeldedaten.json Datei als Parameter zu unserem cy.fixture() Befehl. Hier müssen wir nicht übergeben, ob es sich um eine JSON-Datei handelt. Übergeben Sie einfach nur den Dateinamen. Später passieren wir Testdaten als Parameter in der Funktion und greifen Sie auf die Testdaten Variable mit fehlen uns die Worte..

/// LoginPage aus „./PageObject/LoginPage“ importieren describe(„Cypress POM Test Suite“, function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Login mit gültigen Anmeldedaten", function () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit(); cy.url().should('be.equal', this.testdata.adminUrl) }); });

login.enterEmail(dieser.testdaten.benutzername) – Dadurch wird der Benutzernamenswert aus der Datei „credentials.json“ abgerufen und in das E-Mail-Feld eingetragen.

login.enterPassword(dieses.testdata.password) – Dadurch wird der Passwortwert aus der Datei „credentials.json“ abgerufen und in das Passwortfeld eingetragen

cy.url().should('be.equal', this.testdata.adminUrl) – Dadurch wird die adminUrl aus der Datei "credentials.json" abgerufen und in der Assertion validiert

Lassen Sie uns nun den Testfall für das Ergebnis ausführen.

Wie wir sehen können, wurden die Testfälle ausgeführt und bestanden. Dieses Beispiel hilft Ihnen, einen einfachen datengetriebenen Testfall zu schreiben. Sie können es mit dieser Methode in Ihr Projekt einbinden. Sie können im Fixture-Ordner neue JSON-Dateien erstellen, Werte für Testdaten hinzufügen und über jede Testdatei darauf zugreifen.

Häufig gestellte Fragen

Unterstützt Cypress das Seitenobjektmodell?

Natürlich. Cypress bietet die Flexibilität, mit Seiten und Objekten im Repository herumzuspielen. Es ist einfach zu implementieren.

Welches Seitenobjektmodell sollte ich aus den obigen Beispielen verwenden?

Es gibt keine bestimmte Regel, um sich an nur eine Art des Seitenobjektmodells zu halten. Sie können jedes oben besprochene Modell verwenden. Es steht Ihnen frei, das Modell an Ihr Projekt anzupassen.

Warum sollte ich Fixtures im Page Object Model in Cypress verwenden?

Fixture hilft, sensible Daten wie Benutzername, Passwort und URLs in einer separaten Datei wie JSON oder Excel zu speichern. Dies gewährleistet die Sicherheit der Anwendung und ermöglicht den einfachen Zugriff auf alle Dateien im gesamten Projekt. Um auf die JSON-Datei zuzugreifen, verwenden wir Armaturen um es in unserer Spezifikationsdatei zu verwenden.

Aishwarya Lakshmi

Hallo ... ich bin Aishwarya Lakshmi, habe meinen B.Tech abgeschlossen und verfüge über mehr als zwei Jahre Erfahrung im Testbereich. Ich bin ein Test-Enthusiast und habe eine Leidenschaft für das Testen. Ich liebe es, neue Dinge in meinem Bereich zu entdecken und sie mit meinen Kollegen zu teilen. In meiner Freizeit schreibe ich gerne Blogs auf einfachste, aber effektive Weise. Als Tester möchte ich, dass die Dinge perfekt sind, deshalb wünsche ich meinen Lesern, dass sie die Technologie perfekt verstehen. Ich halte mich über die neuen Technologien im Zusammenhang mit Tests auf dem Laufenden und nehme mir Zeit, sie zu verstehen. Ich freue mich, den Studierenden dabei zu helfen, die Konzepte beim Testen zu verstehen.