Pagina-objectmodel, Algemeen bekend als POM, is een populair patroon in elk automatiseringsraamwerk. Page Object Model kan ook in Cypress worden toegepast. Page Object Model heeft veel voordelen bij het creëren van een raamwerk voor testautomatisering, zoals het verminderen van codeduplicatie en het vergroten van de onderhoudbaarheid en leesbaarheid. Cypress biedt ons de flexibiliteit om Page Object Model op te nemen in het testscript. In dit artikel zullen we kijken naar het maken van een pagina-objectmodel in cipres stap stap voor stap met voorbeelden.

Inhoudsopgave:

• Wat is pagina-objectmodel?
• Page Object Model Framework Architectuur
• Voordelen van het gebruik van Page Object Model in Cypress
• Stap voor stap pagina-objectmodel Cypress met voorbeeld
• Toegang tot de pagina-objecten in het Spec-bestand
• Hoe gebruik ik armaturen als een testgegevensbron in het pagina-objectmodel in Cypress?
• Toegang tot de waarden uit het JSON-bestand in het testcasebestand
• Veelgestelde Vragen / FAQ

Wat is pagina-objectmodel?

Page Object Model is een ontwerppatroon waarbij de pagina-objecten worden gescheiden van de automatiseringstestscripts. Automatiseringstests bieden ons veel hefbomen die ons ten goede komen bij het testen; er zijn echter enkele resultaten, zoals codeduplicatie en een toename van het risico van onderhoudbaarheid naarmate het project groeit. Laten we de betekenis van POM begrijpen met een voorbeeld.

Bedenk dat we meerdere pagina's in onze applicatie hebben, zoals de inlogpagina, de registratiepagina en de pagina Vluchten boeken.

• De Login-pagina bevat alle webelementen van de login-functionaliteiten
• De registratie bevat alle methoden en webelementen van het registratieproces
• De Boek vluchten bevatten de webelementen van de vluchtboekingspagina

Er zijn drie testgevallen, namelijk TC1, TC2 en TC3.

• TC1 bevat de login-testcases.
• TC2 bevat inlog- en registratietestcases
• TC3 bevat testcases voor inloggen, registratie en vluchtboekingen

Nu werkt de inlogpagina samen met TC1.

De registratiepagina moet communiceren met TC1 en TC2, en

De vluchtboekingspagina moet communiceren met TC1, TC2 en TC3

Zoals je kunt zien, zijn er gemeenschappelijke functionaliteiten tussen alle drie de testgevallen. In plaats van de methoden en locators van login in alle testcasebestanden te schrijven, kunnen we ze afzonderlijk hebben en toegang krijgen tot alle bestanden. Op deze manier wordt de code niet herhaald en is deze goed leesbaar.

Een van de beste praktijken bij het coderen is een concept genaamd DRY. Het betekent Herhaal jezelf niet. Zoals de volledige vorm duidelijk zegt, moeten we de regels code niet steeds opnieuw herhalen. Om dit te overwinnen, Pagina-objectmodel speelt een belangrijke rol in de beste coderingspraktijken.

Page Object Model Framework Architectuur

De pagina-objectmodel raamwerk architectuur is een beproefde architectuur die met eenvoudige methoden kan worden aangepast. Tegenwoordig volgen bijna alle bedrijven agile-methodologieën, waarbij continue integratie, ontwikkeling en testen betrokken zijn. De automatiseringstesters onderhouden het testraamwerk om naast het ontwikkelingsproces te werken met de Pagina-objectmodel. Het is een belangrijke ontwerppatroon bij het onderhouden van het testraamwerk voor automatisering naarmate de code groeit met nieuwe functies.

Het pagina-object is een ontwerppatroon dat een objectgeoriënteerde klasse is die interageert met de pagina's van de applicatie die we aan het testen zijn. Pagina-object bestaat uit: Paginaklasse en Test gevallen. Pagina klasse bestaat uit methoden en locators om te communiceren met de webelementen. We maken aparte klassen voor elke pagina in de applicatie. We zullen voor elke functionaliteit afzonderlijke methoden maken en deze openen in ons specificatiebestand.

Voordelen van het gebruik van Page Object Model in Cypress

1. De methoden zijn: herbruikbare over het hele project en gemakkelijk te onderhouden wanneer het project groeit. De regels code worden minder leesbaar en geoptimaliseerd.
2. Pagina-objectpatroon suggereert dat we de operaties en stroom die we uitvoeren in de gebruikersinterface van verificatie stappen. Wanneer we het POM-patroon volgen, hebben we de neiging om te schrijven schone en gemakkelijk te begrijpen code.
3. Met het pagina-objectmodel objecten en testgevallen zijn onafhankelijk van elkaar. We kunnen de objecten overal in het project oproepen. Op deze manier, als we verschillende tools gebruiken, zoals TestNG/JUnit voor functioneel testen of Cucumber voor acceptatietesten, dan is het gemakkelijk beschikbaar.

Stap voor stap pagina-objectmodel Cypress met voorbeeld

In deze sectie wordt uitgelegd hoe u een pagina-objectmodel maakt in Cypress met realtime voorbeelden die we kunnen implementeren in projecten. We zullen begrijpen van de basisinstellingen en het stapsgewijze proces voor het maken van een pagina-objectmodel.

Laten we het scenario bespreken waarop we de functies in dit voorbeeld zullen schrijven.

1. Navigeer naar https://admin-demo.nopcommerce.com/ van de
2. Voer een geldige gebruikersnaam en wachtwoord in
3. Klik op de inlogknop
4. Valideer de URL of deze is toegevoegd met /admin na inloggen

We zullen twee bestanden maken - één PageObject-bestand en één spec-bestand voor dit voorbeeld. Laten we beginnen!

Stap 1: Open ons project in VS-code. Maak een map met de naam PaginaObject onder de integratie map. Onder deze map kunt u paginaobjectbestanden maken voor alle modules.

Stap 2: Maak een bestand met de naam InloggenPagina.js onder de PaginaObject map. In LoginPage.js zullen we de methoden schrijven die betrekking hebben op de inlogfunctionaliteiten.

Stap 3: Laten we beginnen met het schrijven van onze eerste testmethode in de LoginPage.js het dossier. We moeten eerst een klasse maken die we in ons specificatiebestand zullen exporteren. We noemen onze klas als Login pagina

class LoginPagina { }

Op basis van onze pseudocode is onze eerste stap om naar de URL te navigeren. We noemen onze methode als navigate(). Binnen onze navigatiemethode zullen we de cy.visit() functie van Cypress.

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

Stap 4: Nu moeten we de gebruikersnaam invoeren in ons e-mailveld. We zullen onze methode een naam geven als: voer email in(). Eerst moeten we de locator van het e-mailveld ophalen en deze openen via cy.get() opdracht. Dan maken we het veld leeg met de clear() commando en voeg de gebruikersnaam toe met de type() opdracht. In onze methode geven we een parameter door: gebruikersnaam om de waarde in het spec-bestand door te geven. Op deze manier houden we het generiek om toegang te krijgen tot deze methode als een ander e-mailadres vereist is.

enterEmail(gebruikersnaam) { cy.get('[id=E-mail]').clear() cy.get('[id=E-mail]').type(gebruikersnaam); geef dit terug }

In plaats van het schrijven van de cy.get() commando tweemaal in de bovenstaande code, we kunnen ze eenvoudig herhalen met de stip operator.

  enterEmail(gebruikersnaam) { cy.get('[id=E-mail]') .clear() .type(gebruikersnaam); geef dit terug }

Het is je misschien opgevallen return this op lijn 9. dit geeft aan dat de voer email in methode behoort tot het bijzondere Login pagina klas. In principe, dit vertegenwoordigt de klas.

Stap 5: We moeten een methode voor wachtwoorden maken die lijkt op onze enterEmail-methode. We zullen onze wachtwoordmethode aanroepen als: enterPassword(). In eerste instantie zullen we de locator voor het wachtwoord ophalen, het veld wissen en de invoerwaarde typen. We zullen een parameter doorgeven aan onze methode genaamd pswd en toegang in de type() opdracht.

enterPassword(pswd) { cy.get('[id=Password]') .clear() .type(pswd) return this }

Stap 6: Onze laatste methode zou zijn om op de login-knop te klikken. We zullen onze methode noemen als submit(). We krijgen de zoeker en klikken op de knop met behulp van de click() methode van Cypress.

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

Stap voor 7: Nu moeten we deze klasse exporteren om deze in ons specificatiebestand te gebruiken. Hiervoor voegen we slechts één regel toe buiten onze klas, en we kunnen deze gemakkelijk openen in ons specificatiebestand.

export standaard LoginPage

Hoera! We hebben een Page Object-bestand gemaakt voor ons project. Het was vrij eenvoudig en gemakkelijk!

Toegang tot de pagina-objecten in het Spec-bestand

Laten we nu verder gaan met ons testdossier. We moeten een spec-bestand maken in onze integratiemap. We noemen ons specificatiebestand POMDemo.spec.js.

Stap 1: Om toegang te krijgen tot onze methoden in het bestand LoginPage.js, moeten we: importeren ze in ons specificatiebestand. We importeren met behulp van de importverklaring. We moeten naar het bestand LoginPage.js navigeren met ../

In ons geval is het pad ../integration/PageObject/LoginPage. Het importstatement ziet er dus ongeveer zo uit als hieronder.

importeer LoginPage van "../integration/PageObject/LoginPage"

Stap 2: Aangezien we Mocha gebruiken, zullen we onze testcase erin schrijven describe() en it() blok. beschrijven() staat voor a test pak, en it() staat voor a testcase. Beide blokken zijn een functie en accepteren een stringparameter die de bevat beschrijving van de test.

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

In het beschrijfblok schrijven we onze it() door de beschrijving toe te voegen als login met geldige inloggegevens.

it("Inloggen met geldige inloggegevens", function () { })

Stap 3: Om toegang te krijgen tot onze methoden vanuit ons Page-objectbestand, moeten we een instantie maken voor onze Login-klasse. Om een ​​instantie voor de login-klasse te maken, moeten we een variabele declareren en deze toewijzen aan ons klassenbestand met behulp van de nieuwe trefwoord. Met de gedeclareerde variabele hebben we eenvoudig toegang tot de methoden vanuit het Page-objectbestand.

                                               const login = nieuwe LoginPage();

Note: Met de variabele login, hebben we toegang tot de methoden van de objectklasse Page. Wanneer we beginnen te typen login. , zal de vscode de suggesties van alle beschikbare methoden in het bestand LoginPage.js weergeven. Dit helpt ons om te controleren of we onze klasse correct hebben geëxporteerd en geïmporteerd!

Stap 4: Laten we onze . bellen navigate() methode om de URL te bezoeken. Dit is de eerste actie in onze testcase.

/// importeer LoginPage van "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Login met geldige referenties", function () { const login = new LoginPage(); login.navigate(); }); });

Stap 5: We moeten de gebruikersnaam invoeren in het e-mailveld. We hebben toegang tot de enterEmail() met de Log in voorwerp. enterEmail() methode accepteert een parameter gebruikersnaam. Dus we moeten de waarde voor de gebruikersnaam doorgeven als a snaar in ons specificatiebestand

/// importeer LoginPage van "./PageObject/LoginPage" beschrijven("Cypress POM Test Suite", function () { it("Inloggen met geldige inloggegevens", function () { const login = nieuwe LoginPage(); login.navigate(); login.enterEmail('[e-mail beveiligd]'); }) })

Stap 6: Net als bij stap 5, moeten we onze enterPassword() methode door het wachtwoord als parameter in de tekenreeks door te geven.

/// importeer LoginPage van "./PageObject/LoginPage" beschrijven("Cypress POM Test Suite", function () { it("Inloggen met geldige inloggegevens", function () { const login = nieuwe LoginPage(); login.navigate(); login.enterEmail('[e-mail beveiligd]'); login.enterPassword('admin'); }) })

Stap 7: Vervolgens moeten we op de login-knop klikken. We noemen de methode submit() uit ons pagina-objectbestand.

/// importeer LoginPage van "./PageObject/LoginPage" beschrijven("Cypress POM Test Suite", function () { it("Inloggen met geldige inloggegevens", function () { const login = nieuwe LoginPage(); login.navigate(); login.enterEmail('[e-mail beveiligd]'); login.enterPassword('admin'); inloggen.verzenden(); }) })

Stap 8: Na het inloggen moeten we de URL bevestigen. We zullen controleren of de URL is gelijk naar de URL na inloggen. Voor bewering gebruiken we de Chai assertion-bibliotheek, die is ingebouwd met Cypress.

/// importeer LoginPage van "./PageObject/LoginPage" beschrijven("Cypress POM Test Suite", function () { it("Inloggen met geldige inloggegevens", function () { const login = nieuwe LoginPage(); login.navigate(); login.enterEmail('[e-mail beveiligd]'); login.enterPassword('admin'); inloggen.verzenden(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

De bovenstaande afbeelding vertegenwoordigt de login-testcase. Met een paar simpele stappen konden we een testcase schrijven met een Page Object Model. Laten we nu de testcase uitvoeren en het resultaat bekijken.

We zullen de Cypress-testrunner openen en op het specificatiebestand klikken en onze testcase uitvoeren. Controleer dit dit artikel over het openen van Cypress testrunner.

Hoera! We hebben met succes een testcase geschreven die Page Object Model in Cypress gebruikt. We kunnen dit patroon verwerken in realtime projecten. Er zijn veel manieren waarop we de methoden in een paginaobjectbestand kunnen schrijven. Ik heb je een voorbeeld laten zien dat standaard is en voor elk project werkt. Je kunt ook alleen de . schrijven retourfunctie in het pagina-objectbestand en klik vervolgens op en  type dan:  direct in ons specificatiebestand.

We zullen een ander patroon zien dat we in het project kunnen gebruiken. Deze methode zal ook prima werken.

In dit type retourneren we alleen de locator-functie in onze methode en voeren we acties uit in het testbestand. We zullen code schrijven voor hetzelfde scenario dat we hierboven hebben gezien.

Pagina-object – LoginPage.js

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

Zoals we hierboven hebben gezien, schrijven we alleen de locator in onze functie en retourneren deze. De return geeft aan dat de specifieke methode behoort tot de klasse LoginPage.js. We voegen geen acties toe aan onze methoden.

Spec-bestand – POMDemo.spec.js

We zullen kijken naar het voorbeeld van toegang tot de methoden in het spec-bestand.

/// importeer LoginPage van "./PageObject/LoginPage" beschrijven("Cypress POM Test Suite", function () { it("Inloggen met geldige inloggegevens", function () { const login = nieuwe LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('[e-mail beveiligd]'); login.enterPassword().clear() login.enterPassword().type('admin'); login.submit().klik(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Hier roepen we de methode aan vanuit het PageObject-bestand en voeren we de testcase-acties uit. Dus eerst noemen we onze referentievariabele Log in en vervolgens toevoegen met de methode enterEmail() en tot slot de actie toevoegen  type dan: . In onze type(), we geven de gebruikersnaam door waarde.

Zoals u kunt zien, zijn alle opdrachten uitgevoerd en is de testcase geslaagd!

U kunt het Page Object Model kiezen dat bij uw project en uw mening past. Er is geen specifieke regel om je aan slechts één procedure te houden.

Hoe gebruik ik armaturen als een testgegevensbron in het pagina-objectmodel in Cypress?

In onze Page Object Model-voorbeelden hebben we de gebruikersnaam en het wachtwoord rechtstreeks in het Page Object-bestand of rechtstreeks in het testcase-bestand doorgegeven. In dit gedeelte wordt uitgelegd hoe u armaturen in Cypress om de gegevens veilig te houden en niet bloot te stellen. We moeten proberen alle inloggegevens en gegevens in één bestand te bewaren en er toegang toe te krijgen. Op deze manier is het gemakkelijk te onderhouden en worden gevoelige gegevens zoals gebruikersnaam en wachtwoord niet openbaar gemaakt. Deze methode is ook een van de procedures die we moeten volgen in Page Object Pattern.

Zoals eerder besproken, Fixture helpt bij het opslaan van gegevens in een JSON-bestand of Excel-bestand, of een externe bibliotheek zoals Apache POI. We zullen deze gegevens gebruiken door een variabele te maken en ze te openen in ons specificatiebestand. Laten we het begrijpen met een voorbeeld.

Cypress biedt een map met de naam "armaturen.” We zullen een maken JSON bestand genaamd geloofsbrieven.json onder de map 'Fixtures'.

Laten we onze gebruikersnaam, wachtwoord en URL-waarden declareren die we moeten valideren in een JSON-indeling in de referenties.json bestand.

{ "gebruikersnaam" : "[e-mail beveiligd]", "wachtwoord" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

Toegang tot de waarden uit het JSON-bestand in het testcasebestand

Omdat we de waarden in ons JSON-bestand hebben gedefinieerd, zullen we ze in ons testcasebestand openen met Armaturen van Cypress. We zullen toegang krijgen tot de JSON-waarde met dit trefwoord. Laten we de armatuurfunctie verpakken in a voordat() blok.

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 }) – deze lijn geeft aan dat we de passeren referenties.json bestand als een parameter naar onze cy.armatuur() opdracht. Hier zijn we niet verplicht om door te geven of het een JSON-bestand is. Geef alleen de bestandsnaam door. Later, we passeren testgegevens als een parameter in de functie en toegang tot de testgegevens variabele met behulp van dit.

/// importeer LoginPage van "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Aanmelden met geldige inloggegevens", 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(deze.testdata.gebruikersnaam) – Hiermee wordt de gebruikersnaamwaarde opgehaald uit het bestand credentials.json en ingevuld in het e-mailveld.

login.enterPassword(dit.testdata.wachtwoord) – Dit haalt de wachtwoordwaarde op uit het bestand credentials.json en vult deze in het wachtwoordveld in

cy.url().should('be.equal', this.testdata.adminUrl) – Dit haalt de adminUrl uit het bestand credentials.json en valideert in de bewering

Laten we nu de testcase voor het resultaat uitvoeren.

Zoals we kunnen zien, zijn de testgevallen uitgevoerd en geslaagd. Dit voorbeeld helpt u bij het schrijven van een eenvoudige datagestuurde testcase. Met deze methode kunt u het in uw project opnemen. U kunt nieuwe JSON-bestanden maken onder de map Fixture, waarden toevoegen die betrekking hebben op testgegevens en deze via elk testbestand openen.

Veelgestelde Vragen / FAQ

Ondersteunt Cypress het Page Object Model?

Natuurlijk. Cypress biedt alle flexibiliteit om te spelen met pagina's en objecten in de repository. Het is eenvoudig te implementeren.

Welk Page Object Model moet ik gebruiken uit de bovenstaande voorbeelden?

Er is geen specifieke regel om je aan slechts één manier van Page Object Model te houden. U kunt elk model gebruiken dat hierboven is besproken. U bent vrij om het model aan uw project aan te passen.

Waarom zou ik fixtures gebruiken in het Page Object Model in Cypress?

Fixture helpt gevoelige gegevens zoals gebruikersnaam, wachtwoord en URL's op te slaan in een apart bestand zoals JSON of Excel. Dit zorgt voor de beveiliging van de applicatie en u kunt ze gemakkelijk openen in alle bestanden in het hele project. Om toegang te krijgen tot het JSON-bestand, gebruiken we armaturen om het in ons specificatiebestand te gebruiken.

Aishwarya Lakshmi

Hallo...Ik ben Aishwarya Lakshmi, heb mijn B.Tech afgerond en heb bijna 2+ jaar ervaring in het testdomein. Ik ben een testliefhebber en gepassioneerd door testen. Ik ontdek graag nieuwe dingen in mijn vakgebied en deel deze met mijn collega's. Ik geniet ervan om in mijn vrije tijd blogs te schrijven op de eenvoudigste maar effectieve manier. Als tester houd ik ervan om dingen tot in de perfectie te hebben, dus ik wens dat mijn lezers de technologie perfect begrijpen. Ik houd mezelf op de hoogte van de nieuwe technologieën met betrekking tot testen en besteed tijd aan het begrijpen ervan. Ik help studenten graag de concepten bij het testen te begrijpen.