Oldalobjektum modell, Közismert nevén POM, népszerű minta bármely automatizálási keretrendszerben. Az oldalobjektum modell Cypressben is alkalmazható. A Page Object Model számos előnnyel rendelkezik a tesztautomatizálás keretrendszerének létrehozásában, mint például a kódduplikáció csökkentése, valamint a karbantarthatóság és olvashatóság növelése. A Cypress rugalmasságot biztosít számunkra a Page beépítéséhez tárgy Modell a teszt szkriptben. Ebben a cikkben egy oldalobjektum modell létrehozását vizsgáljuk meg Cipruslépés lépésről lépésre példákkal.

Tartalomjegyzék:

• Mi az az oldalobjektum modell?
• Oldal objektum modell keretrendszer architektúrája
• Az oldalobjektum modell használatának előnyei a Cypressben
• Lépésről lépésre oldal Objektummodell Cypress példával
• Az oldalobjektumok elérése a Spec fájlban
• Hogyan használhatjuk a Fixtures-t tesztadatforrásként a Cypress oldalobjektum-modelljében?
• Az értékek elérése a teszteset-fájlban található JSON-fájlból
• Gyakran ismételt kérdések

Mi az az oldalobjektum modell?

Az oldalobjektum modell egy tervezési minta, ahol a Az oldalobjektumok el vannak választva az automatizálási teszt szkriptektől. Az automatizálási tesztelés számos előnyt biztosít számunkra a tesztelés során; azonban vannak olyan következmények, mint a kódduplázódás és a karbantarthatóság kockázatának növekedése a projekt növekedésével. Értsük meg a POM jelentőségét egy példán keresztül.

Vegyük figyelembe, hogy az alkalmazásunkban több oldal is található, például a Bejelentkezési oldal, a Regisztrációs oldal és a Repülőjegyek oldala.

• A Bejelentkezés oldal a bejelentkezési funkciók összes webes elemét tartalmazza
• A Regisztráció tartalmazza a regisztrációs folyamat összes módját és webes elemét
• A Repülőjegyek foglalása tartalmazza a repülőjegy-foglalási oldal webes elemeit

Három teszteset létezik, nevezetesen a TC1, TC2 és TC3.

• A TC1 tartalmazza a bejelentkezési teszteseteket.
• A TC2 bejelentkezési és regisztrációs teszteseteket tartalmaz
• A TC3 bejelentkezési, regisztrációs és repülésfoglalási teszteseteket tartalmaz

Most a bejelentkezési oldal kölcsönhatásba lép a TC1-gyel.

A regisztrációs oldalnak kölcsönhatásba kell lépnie a TC1-vel és a TC2-vel, és

A repülőjegy-foglalási oldalnak kölcsönhatásba kell lépnie a TC1, TC2 és TC3 között

Mint látható, mindhárom teszteset között vannak közös funkciók. Ahelyett, hogy a bejelentkezés metódusait és helymeghatározóit az összes teszteset fájlba írnánk, külön-külön is elérhetővé tehetjük őket, és elérhetjük őket a fájlok között. Így a kód nem ismétlődik, és könnyen olvasható.

A kódolás egyik legjobb gyakorlata az ún DRY. Azt jelenti Ne ismételje meg magát. Ahogy a teljes űrlap egyértelműen mondja, nem szabad újra és újra megismételnünk a kódsorokat. Ennek leküzdésére, Oldalobjektum modell fontos szerepet játszik a legjobb kódolási gyakorlatokban.

Oldal objektum modell keretrendszer architektúrája

A oldalobjektum modell keretrendszer az architektúra egy bevált architektúra, amely egyszerű módszerekkel testreszabható. Ma már szinte minden cég követi az agilis módszertanokat, amelyek folyamatos integrációt, fejlesztést és tesztelést foglalnak magukban. Az automatizálási tesztelők fenntartják a teszt keretrendszert, hogy a fejlesztési folyamat mellett működjenek együtt Oldalobjektum modell. Ez egy jelentőségteljes tervezési minta az automatizálási teszt keretrendszer karbantartásában ahogy a kód új funkciókkal bővül.

Az oldalobjektum egy tervezési minta, amely egy objektumorientált osztály, amely kölcsönhatásba lép a tesztelt alkalmazás oldalaival.. Az oldalobjektum a következőkből áll: Oldal osztály és a Teszt esetek. Oldal osztály módszerekből és helymeghatározókból áll a webelemekkel való interakcióhoz. Az alkalmazás minden oldalához külön osztályokat hozunk létre. Minden egyes funkcióhoz egyedi metódusokat hozunk létre, és ezeket a specifikációs fájlunkban érjük el.

Az oldalobjektum modell használatának előnyei a Cypressben

1. A módszerek az újrahasználható az egész projektre kiterjedően, és könnyen karbantartható, ha a projekt növekszik. A kódsorok válnak kevesebb olvasható és a optimalizált.
2. Az oldalobjektum minta azt javasolja, hogy válasszuk el a műveletek és áramlás hogy a felhasználói felületen végzünk ellenőrzés lépések. Amikor a POM-mintát követjük, hajlamosak vagyunk írni tiszta és könnyen érthető kód.
3. Az oldalobjektum modellel objektumok és a teszt esetek függetlenek egymástól. Az objektumokat a projektben bárhol hívhatjuk. Így, ha különböző eszközöket használunk, mint például a TestNG/JUnit a funkcionális teszteléshez vagy az Cucumber az átvételi teszteléshez, akkor könnyen hozzáférhető.

Lépésről lépésre oldal Objektummodell Cypress példával

Ez a rész megérti, hogyan lehet oldalobjektum-modellt létrehozni Cypress valós idejű példákkal amelyeket projektekben tudunk megvalósítani. Az oldalobjektum-modell létrehozásának alapvető beállításából és lépésről lépésre történő folyamatából meg fogjuk érteni.

Beszéljük meg azt a forgatókönyvet, amelyre ebben a példában a függvényeket írjuk.

1. navigáljon https://admin-demo.nopcommerce.com/
2. Adja meg az érvényes felhasználónevet és jelszót
3. Kattintson a Bejelentkezés gombra
4. Érvényesítse az URL-t, függetlenül attól, hogy hozzá van-e fűzve /admin bejelentkezés után

Két fájlt fogunk létrehozni – egy PageObject fájlt és egy specifikációs fájlt ehhez a példához. Fogjunk hozzá!

1 lépés: Nyissa meg projektünket VS kódban. Hozzon létre egy mappát, melynek neve PageObject alatt a integráció mappát. Ebben a mappában oldalobjektum fájlokat hozhat létre bármely modulhoz.

2 lépés: Hozzon létre egy nevű fájlt LoginPage.js alatt a PageObject mappát. A LoginPage.js-ben megírjuk azokat a metódusokat, amelyek magukban foglalják a bejelentkezési funkciókat.

3 lépés: Kezdjük el írni az első tesztmódszerünket a LoginPage.js fájlt. Először létre kell hoznunk egy osztályt, amelyet exportálni fogunk a specifikációs fájlunkban. Az osztályunkat így fogjuk hívni Bejelentkezési oldal

osztály bejelentkezési oldal { }

A pszeudokódunk alapján az első lépésünk az URL-re való navigálás. Módszerünket így fogjuk nevezni navigate(). A navigációs módszerünkön belül hozzáadjuk a cy.visit() funkció a Cypress-től.

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

4 lépés: Most meg kell adnunk a felhasználónevet az e-mail mezőnkben. Módszerünket így fogjuk elnevezni enterEmail(). Először is meg kell szereznünk az e-mail mező lokátorát, és elérnünk kell őket ezen keresztül cy.get() parancs. Ezután töröljük a mezőt a clear() parancsot, és adja hozzá a felhasználónevet a type() parancs. Módszerünkben paramétert adunk át felhasználónév hogy átadja az értéket a specifikációs fájlban. Ily módon általános marad a módszer elérése, ha más e-mail azonosítóra van szükség.

enterEmail(felhasználónév) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(felhasználónév); küldd vissza ezt }

Ahelyett, hogy megírná a cy.get() parancsot kétszer a fenti kódban, egyszerűen hurkolhatjuk őket a pont operátor.

  enterEmail(felhasználónév) { cy.get('[id=Email]') .clear() .type(felhasználónév); küldd vissza ezt }

Talán észrevetted return this a 9. sorban. ezt azt jelzi, hogy a írja be az e-mailt módszer az adotthoz tartozik Bejelentkezési oldal osztály. Alapvetően, ezt osztályt képviseli.

5 lépés: Az enterEmail metódusunkhoz hasonló metódust kell létrehoznunk a jelszavakhoz. A jelszavas módszerünket így fogjuk hívni enterPassword(). Kezdetben megkapjuk a jelszó helymeghatározóját, töröljük a mezőt, és beírjuk a bemeneti értéket. A nevezett metódusunknak átadunk egy paramétert pswd és hozzáférést a type() parancs.

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

6 lépés: Az utolsó módszerünk az lenne, ha a bejelentkezés gombra kattintunk. Módszerünket a következőképpen nevezzük el submit(). Megkapjuk a lokátort, és a gombbal kattintunk a gombra click() módszer a Cypress-től.

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

Lépés 7: Most exportálnunk kell ezt az osztályt, hogy a specifikációs fájlunkban használhassuk. Ehhez csak egy sort adunk az osztályunkon kívülre, és könnyen elérhetjük a specifikációs fájlunkban.

alapértelmezett bejelentkezési oldal exportálása

Hurrá! Létrehoztunk egy oldalobjektum fájlt a projektünkhöz. Nagyon egyszerű és könnyű volt!

Az oldalobjektumok elérése a Spec fájlban

Most pedig térjünk át tesztesetünk fájljára. Létre kell hoznunk egy specifikációs fájlt az integrációs mappánkban. Meghívjuk a specifikációs fájlunkat POMDemo.spec.js.

1 lépés: A LoginPage.js fájlban lévő metódusaink eléréséhez szükséges importál azokat a specifikációs fájlunkba. Az importálási utasítás használatával importálunk. A LoginPage.js fájlhoz kell navigálnunk a használatával ../

A mi esetünkben az út az ../integration/PageObject/LoginPage. Tehát az importálási utasítás az alábbiakhoz hasonlóan fog kinézni.

importálja a bejelentkezési oldalt innen: "../integration/PageObject/LoginPage"

2 lépés: Mivel Mochát használunk, beleírjuk a tesztesetünket describe() és a it() Blokk. A description() jelentése a tesztcsomag, és ez() az a próbaper. Mindkét blokk függvény, és elfogad egy karakterlánc-paramétert, amely tartalmazza a leírás a teszt.

description("Cypress POM Test Suite", függvény () { })

A leírás blokkba beleírjuk a sajátunkat it() hozzáadva a leírást érvényes hitelesítő adatokkal rendelkező bejelentkezéshez.

it("Jelentkezzen be érvényes hitelesítő adatokkal", függvény () { })

3 lépés: Ahhoz, hogy metódusainkat a Page objektumfájlunkból érhessük el, létre kell hoznunk egy példányt a Login osztályunkhoz. A bejelentkezési osztály példányának létrehozásához deklarálnunk kell egy változót, és hozzá kell rendelnünk az osztályfájlunkhoz a segítségével új kulcsszó. A deklarált változóval könnyen elérhetjük a metódusokat a Page objektum fájlból.

                                               const login = new LoginPage();

Megjegyzések: A változóval login, a metódusokat a Page objektumosztályból érhetjük el. Amikor elkezdünk gépelni login. , a vscode felsorolja a LoginPage.js fájlban elérhető összes módszer javaslatát. Ez segít ellenőrizni, hogy megfelelően exportáltuk és importáltuk-e osztályunkat!

4 lépés: Hívjuk a miénket navigate() módszert az URL meglátogatásához. Ez az első művelet tesztesetünkben.

/// bejelentkezési oldal importálása innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Jelentkezzen be érvényes hitelesítő adatokkal", function () { const login = new LoginPage(); login.navigate(); }); });

5 lépés: Az email mezőbe be kell írnunk a felhasználónevet. Hozzáférünk a enterEmail() a ... val Belépés tárgy. enterEmail() metódus elfogad egy paramétert felhasználónév. Tehát a felhasználónév értékét a-ként kell átadnunk húr specifikációs fájlunkban

/// bejelentkezési oldal importálása innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Jelentkezzen be érvényes hitelesítő adatokkal", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); }) })

6 lépés: Az 5. lépéshez hasonlóan hívnunk kell a sajátunkat enterPassword() módszert a jelszó paraméterként történő átadásával a karakterláncban.

/// bejelentkezési oldal importálása innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Jelentkezzen be érvényes hitelesítő adatokkal", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); }) })

7 lépés: Ezután a bejelentkezés gombra kell kattintanunk. Nevezzük a módszert submit() oldalobjektum fájlunkból.

/// bejelentkezési oldal importálása innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Jelentkezzen be érvényes hitelesítő adatokkal", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); }) })

8 lépés: Bejelentkezés után érvényesítenünk kell az URL-t. Ellenőrizzük, hogy az URL helyes-e egyenlő az URL-re a bejelentkezés után. Az állításhoz használjuk a Chai állítási könyvtár, amely a Cypressbe van beépítve.

/// bejelentkezési oldal importálása innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Jelentkezzen be érvényes hitelesítő adatokkal", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo .nopcommerce.com/admin/') }) })

A fenti kép a bejelentkezési tesztet ábrázolja. Nagyon kevés egyszerű lépéssel tudtunk tesztesetet írni egy oldalobjektum modellel. Most futtassuk le a tesztesetet, és nézzük meg az eredményt.

Megnyitjuk a Cypress tesztfutót, és rákattintunk a specifikációs fájlra, és futtatjuk a tesztesetünket. Nézd meg cikkben hogyan kell megnyitni a Cypress tesztfutót.

Hurrá! Sikeresen megírtunk egy tesztesetet, amely a Cypress oldalobjektum modelljét használja. Ezt a mintát beépíthetjük valós idejű projektekbe. Sokféleképpen írhatjuk a metódusokat egy oldalobjektum fájlba. Mutattam egy példát, amely szabványos, és minden projektnél működik. Azt is írhatod, hogy csak a return függvény az oldalobjektum fájlban, majd kattintson a és gombra típus közvetlenül a specifikációs fájlunkban.

Látni fogunk egy másik mintát, amelyet felhasználhatunk a projektben. Ez a módszer is tökéletesen működik.

Ennél a típusnál a módszerünkben csak a lokátor függvényt adjuk vissza, és a tesztfájlban hajtunk végre műveleteket. Ugyanazhoz a forgatókönyvhöz írunk kódot, amelyet fent láttunk.

Oldalobjektum – LoginPage.js

class LoginPage { navigate() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Jelszó]') } submit() { return cy.get('[type=submit]') } } export alapértelmezett bejelentkezési oldal

Mint fentebb láttuk, csak a lokátort írjuk be a függvényünkbe, és adjuk vissza azokat. A visszatérés azt jelenti, hogy az adott metódus a osztály LoginPage.js. Nem adunk hozzá semmilyen műveletet a módszereinkhez.

Specifikációs fájl – POMDemo.spec.js

Megnézzük a metódusok elérésének példáját a specifikációs fájlban.

/// bejelentkezési oldal importálása innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Jelentkezzen be érvényes hitelesítő adatokkal", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('admin@yourstore.com'); login.enterPassword().clear() login.enterPassword().type('admin'); bejelentkezés. submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Itt meghívjuk a metódust a PageObject fájlból, és végrehajtjuk a teszteset műveleteket. Tehát először a referenciaváltozónkat hívjuk meg Belépés majd hozzáfűzve a metódussal enterEmail() és végül a cselekvés hozzáfűzése típus. Miénkben type(), átadjuk a felhasználónevet érték.

Amint láthatja, az összes parancs végrehajtásra került, és a teszteset sikeres volt!

Kiválaszthatja a projektjének és véleményének megfelelő oldalobjektum-modellt. Nincs különösebb szabály, hogy csak egy eljáráshoz ragaszkodjunk.

Hogyan használhatjuk a Fixtures-t tesztadatforrásként a Cypress oldalobjektum-modelljében?

Az oldalobjektum modell példáinkban a felhasználónév és a jelszó értéket közvetlenül adtuk át az oldalobjektum fájlban vagy közvetlenül a teszteset fájlban. Ez a rész megérti, hogyan kell használni lámpatestek Cypressben hogy az adatok biztonságban legyenek, és ne legyenek kitéve. Meg kell próbálnunk az összes hitelesítő adatot és adatot egy fájlban tartani, és elérni őket. Így könnyen karbantartható, és az olyan érzékeny adatok, mint a felhasználónév és a jelszó nem kerülnek nyilvánosságra. Ez a módszer is egyike azon eljárásoknak, amelyeket követnünk kell az oldalobjektum mintában.

Amint arról korábban szó volt, A Fixture segít az adatok tárolásában JSON-fájlban vagy Excel-fájlban, vagy külső könyvtárban, például az Apache POI-ban. Ezeket az adatokat változó létrehozásával használjuk fel, és a specifikációs fájlunkban érjük el őket. Értsük meg egy példával.

A Cypress egy "" nevű mappát biztosítlámpatestek.” Létrehozzuk a JSON nevű fájl Megbízólevél.json a „Fixtures” mappában.

Adjuk meg felhasználónevünket, jelszavankat és URL-értékeinket, amelyeket ellenőriznünk kell JSON formátumban a következőben hitelesítő adatok.json fájlt.

{ "felhasználónév" : "admin@yourstore.com", "password" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

Az értékek elérése a teszteset-fájlban található JSON-fájlból

Mivel a JSON-fájlunkban meghatároztuk az értékeket, a teszteset-fájlunkban a használatával fogjuk elérni őket mérkőzések a Cypresstől. Ezzel fogjuk elérni a JSON értéket ezt kulcsszó. Tekerjük a fixture függvényt a-ba előtt () Blokk.

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

cy.fixture('credentials').then(function (testdata) { this.testdata = tesztadatok }) – ez a vonal azt jelenti, hogy áthaladunk a hitelesítő adatok.json fájl paraméterként a mi cy.fixture() parancs. Itt nem szükséges megadnunk, hogy JSON-fájlról van-e szó. Csak adja át a fájl nevét. Később átmegyünk teszt adat paraméterként a függvényben, és elérje a teszt adat változó használatával ezt.

/// import bejelentkezési oldal innen: "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').)then(function (testdata) { this.testdata = tesztadatok }) }) it("Jelentkezzen be érvényes hitelesítő adatokkal", 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(this.testdata.username) – Ez lekéri a felhasználónév értékét a credentials.json fájlból, és kitölti az e-mail mezőben.

login.enterPassword(this.testdata.password) – Ez lekéri a jelszó értékét a credentials.json fájlból, és kitölti a jelszó mezőbe

cy.url().should('be.equal', this.testdata.adminUrl) – Ez lekéri az adminUrl-t a credentials.json fájlból, és érvényesíti az állításban

Most pedig futtassuk le a tesztesetet az eredményért.

Amint látjuk, a tesztesetek végrehajtásra kerültek és sikeresek lettek. Ez a példa segít egy alapvető adatvezérelt teszteset megírásában. Ezzel a módszerrel beépítheti projektjébe. Létrehozhat új JSON-fájlokat a Fixture mappában, hozzáadhat a tesztadatokhoz kapcsolódó értékeket, és bármely tesztfájlon keresztül elérheti azokat.

Gyakran ismételt kérdések

A Cypress támogatja az oldalobjektum modellt?

Természetesen. A Cypress minden rugalmasságot biztosít az adattárban lévő oldalakkal és objektumokkal való játékhoz. Könnyen megvalósítható.

Melyik oldalobjektum-modellt használjam a fenti példák közül?

Nincs különösebb szabály arra, hogy az oldalobjektum-modellnek csak egy módjához ragaszkodjunk. Bármilyen modellt használhat, amelyet fent tárgyaltunk. Szabadon testreszabhatja a modellt a projektje szerint.

Miért használjak rögzítőket a Cypress oldalobjektum-modelljében?

A Fixture segít az érzékeny adatok, például felhasználónév, jelszó és URL-címek tárolásában egy külön fájlban, például JSON-ban vagy Excelben. Ez biztosítja az alkalmazás biztonságát, és könnyen elérheti azokat a projekt bármely fájljában. A JSON-fájl eléréséhez használjuk lámpatestek használni a specifikációs fájlunkban.