Model objektu stránky, obecně známý jako POM, je oblíbeným vzorem v jakémkoli automatizačním rámci. Page Object Model lze použít i v Cypressu. Page Object Model má mnoho výhod při vytváření rámce pro automatizaci testování, jako je snížení duplikace kódu a zvýšení udržovatelnosti a čitelnosti. Cypress nám poskytuje flexibilitu pro začlenění Page Object Model do testovacího skriptu. V tomto článku se podíváme na vytvoření modelu objektu stránky v Cypřišový krok krok za krokem s příklady.

Obsah:

• Co je objektový model stránky?
• Page Object Framework Framework Architecture
• Výhody použití Page Object Model v Cypressu
• Objektový model stránky krok za krokem Cypress s příkladem
• Přístup k objektům stránky v souboru Spec
• Jak používat svítidla jako zdroj testovacích dat v objektovém modelu stránky v Cypressu?
• Přístup k hodnotám ze souboru JSON v souboru testovacího případu
• Často kladené otázky

Co je objektový model stránky?

Objektový model stránky je návrhový vzor, ​​kde objekty stránky jsou odděleny od testovacích skriptů automatizace. Testování automatizace nám dává mnoho výhod, které nám při testování prospívají; existují však některé výsledky, jako je duplikace kódu a zvýšení rizika udržovatelnosti, jak projekt roste. Pojďme pochopit význam POM na příkladu.

Uvažujte, že v naší aplikaci máme více stránek, jako je přihlašovací stránka, registrační stránka a stránka rezervace letenek.

• Přihlašovací stránka obsahuje všechny webové prvky přihlašovacích funkcí
• Registrace obsahuje všechny metody a webové prvky procesu registrace
• Letenky Rezervovat obsahují webové prvky stránky rezervace letenek

Existují tři testovací případy, konkrétně TC1, TC2 a TC3.

• TC1 obsahuje testovací případy přihlášení.
• TC2 obsahuje testovací případy přihlášení a registrace
• TC3 obsahuje případy přihlášení, registrace a rezervace letenek

Nyní přihlašovací stránka interaguje s TC1.

Registrační stránka musí komunikovat s TC1 a TC2 a

Stránka rezervace letu musí komunikovat s TC1, TC2 a TC3

Jak vidíte, mezi všemi třemi testovacími případy existují společné funkce. Namísto psaní metod a lokátorů přihlášení do všech souborů testovacích případů je můžeme mít samostatně a přistupovat k nim napříč soubory. Tímto způsobem se kód neopakuje a je snadno čitelný.

Jedním z nejlepších postupů při kódování je koncept nazvaný DRY. To znamená Neopakujte se. Jak jasně říká plná forma, neměli bychom opakovat řádky kódu znovu a znovu. Abychom to překonali, Model objektu stránky hraje důležitou roli v osvědčených postupech kódování.

Page Object Framework Framework Architecture

Projekt rámec objektového modelu stránky architektura je osvědčená architektura, kterou lze přizpůsobit jednoduchými metodami. Dnes téměř všechny společnosti dodržují agilní metodiky, které zahrnují neustálou integraci, vývoj a testování. Automatizační testeři udržují testovací rámec, aby spolupracovali s vývojovým procesem Model objektu stránky. Je to významné návrhový vzor při udržování rámce automatizačních testů jak se kód rozrůstá o nové funkce.

Objekt stránky je návrhový vzor, ​​což je objektově orientovaná třída, která interaguje se stránkami aplikace, kterou testujeme. Objekt stránky obsahuje Třída stránky  a  Testovací případy. Třída stránky skládá se z metod a lokátorů pro interakci s webovými prvky. Vytváříme samostatné třídy pro každou stránku v aplikaci. Pro každou funkci vytvoříme individuální metody a přistupujeme k nim v našem souboru specifikací.

Výhody použití Page Object Model v Cypressu

1. Metody jsou znovu použitelný napříč celým projektem a snadno se udržuje, když projekt roste. Řádky kódu se stanou méně čitelný  a  optimalizováno.
2. Vzorec objektu stránky naznačuje, že oddělíme operace a tok ze kterého vystupujeme v uživatelském rozhraní ověření kroky. Když se řídíme vzorem POM, máme tendenci psát čistý a snadno srozumitelný kód.
3. S objektovým modelem stránky Objekty  a  testovací případy jsou na sobě nezávislé. Objekty můžeme volat kamkoli v rámci projektu. Tímto způsobem, pokud používáme různé nástroje jako TestNG/JUnit pro funkční testování nebo Cucumber pro akceptační testování, pak je to snadné přístupné.

Objektový model stránky krok za krokem Cypress s příkladem

V této části se dozvíte, jak vytvořit objektový model stránky v Cypřiš s příklady v reálném čase které můžeme implementovat do projektů. Pochopíme to ze základního nastavení a krok za krokem procesu vytváření Page Object Model.

Pojďme diskutovat o scénáři, ve kterém budeme psát funkce v tomto příkladu.

1. přejděte na https://admin-demo.nopcommerce.com/ webových stránkách
2. Zadejte platné uživatelské jméno a heslo
3. Klikněte na tlačítko Přihlášení
4. Ověřte adresu URL, zda je připojena k /admin po přihlášení

Vytvoříme dva soubory - jeden soubor PageObject a jeden soubor spec pro tento příklad. Nech nás začít!

Krok 1: Otevřete náš projekt v kódu VS. Vytvořte složku s názvem PageObject pod integrace složku. V této složce můžete vytvářet soubory objektů stránky pro všechny moduly.

Krok 2: Vytvořte soubor s názvem LoginPage.js pod PageObject složku. V LoginPage.js budeme psát metody, které zahrnují funkce přihlášení.

Krok 3: Začněme psát naši první testovací metodu v soubor LoginPage.js soubor. Nejprve musíme vytvořit třídu, kterou budeme exportovat do našeho souboru specifikací. Říkáme naší třídě jako Přihlašovací stránka

třída přihlašovací stránka { }

Na základě našeho pseudokódu je naším prvním krokem navigace na adresu URL. Naši metodu budeme nazývat jako navigate(). Do naší navigační metody přidáme cy.visit() funkce od Cypress.

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

Krok 4: Nyní budeme muset zadat uživatelské jméno do našeho e -mailového pole. Naši metodu pojmenujeme jako zadejte email(). Nejprve bychom měli získat lokátor e -mailového pole a přistupovat k nim prostřednictvím cy.get() příkaz. Poté pole vymažeme pomocí clear() příkaz a přidejte uživatelské jméno pomocí type() příkaz. V naší metodě předáme parametr uživatelské jméno předat hodnotu v souboru spec. Tímto způsobem ponecháme obecný přístup k této metodě, pokud je vyžadováno jiné ID e -mailu.

enterEmail(uživatelské jméno) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(uživatelské jméno); vrátit toto }

Místo psaní cy.get() dvakrát ve výše uvedeném kódu, můžeme je jednoduše smyčkou s tečka operátor.

  enterEmail(username) { cy.get('[id=Email]') .clear() .type(username); vrátit toto }

Možná jste si všimli return this v řádku 9. tento naznačuje, že zadejte email metoda patří konkrétnímu Přihlašovací stránka třída. V podstatě, tento představuje třídu.

Krok 5: Musíme vytvořit metodu pro hesla podobnou naší metodě enterEmail. Náš způsob hesla budeme nazývat jako enterPassword(). Zpočátku získáme lokátor hesla, pole vymažeme a zadáme vstupní hodnotu. Předáme parametr naší metodě s názvem pswd a přístup v type() příkaz.

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

Krok 6: Naší poslední metodou by bylo kliknout na přihlašovací tlačítko. Naši metodu pojmenujeme jako submit(). Získáme lokátor a klikneme na tlačítko pomocí click() metoda od společnosti Cypress.

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

Krok 7: Nyní musíme tuto třídu exportovat, abychom ji mohli použít v našem souboru specifikací. Za tímto účelem přidáme jeden řádek mimo naši třídu a můžeme k němu snadno přistupovat v našem souboru specifikací.

exportovat výchozí přihlašovací stránku

Hurá! Pro náš projekt jsme vytvořili soubor Page Object. Bylo to docela jednoduché a snadné!

Přístup k objektům stránky v souboru Spec

Nyní přejdeme k našemu souboru testovacích případů. V naší integrační složce musíme vytvořit soubor specifikací. Zavoláme náš soubor specifikací POMDemo.spec.js.

Krok 1: Pro přístup k našim metodám v souboru LoginPage.js musíme import vložte je do našeho souboru specifikací. Importujeme pomocí příkazu import. Měli bychom přejít do souboru LoginPage.js pomocí ../

V našem případě je cesta ../integration/PageObject/LoginPage. Takže prohlášení o importu bude vypadat nějak takto.

importovat přihlašovací stránku z "../integration/PageObject/LoginPage"

Krok 2: Protože používáme Mochu, napíšeme náš testovací případ dovnitř describe()  a  it() blok. description () představuje a testovací souprava, a to () představuje a modelový případ. Oba bloky jsou funkcí a přijímají řetězcový parametr, který obsahuje popis testu.

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

Do bloku popisu napíšeme náš it() přidáním popisu jako přihlášení s platnými přihlašovacími údaji.

it("Přihlášení s platnými přihlašovacími údaji", funkce () { })

Krok 3: Pro přístup k našim metodám z našeho souboru objektu Page bychom měli vytvořit instanci pro naši třídu Login. Chcete -li vytvořit instanci pro třídu přihlášení, musíme deklarovat proměnnou a přiřadit ji k souboru naší třídy pomocí nový klíčové slovo. S deklarovanou proměnnou můžeme snadno přistupovat k metodám ze souboru objektu stránky.

                                               const login = new LoginPage();

Poznámka: S proměnnou login, můžeme přistupovat k metodám ze třídy objektu Page. Když začneme psát login. , vscode vypíše návrhy všech metod dostupných v souboru LoginPage.js. To nám pomáhá ověřit, že jsme naši třídu exportovali a importovali správně!

Krok 4: Zavoláme naše navigate() způsob návštěvy adresy URL. Toto je první akce v našem testovacím případě.

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Přihlášení s platnými přihlašovacími údaji", function () { const login = new LoginPage(); login.navigate(); }); });

Krok 5: Měli bychom zadat uživatelské jméno do pole e -mailu. Přistupujeme k enterEmail() s přihlásit se objekt. enterEmail() metoda přijímá parametr uživatelské jméno. Měli bychom tedy předat hodnotu pro uživatelské jméno jako a šňůra v našem souboru specifikací

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Přihlášení s platnými přihlašovacími údaji", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); }) })

Krok 6: Podobně jako v kroku 5 bychom měli zavolat naši enterPassword() metoda předáním hesla jako parametru v řetězci.

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Přihlášení s platnými přihlašovacími údaji", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); }) })

Krok 7: Dále musíme kliknout na přihlašovací tlačítko. Zavoláme metodu submit() z našeho souboru objektu stránky.

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Přihlášení s platnými přihlašovacími údaji", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); }) })

Krok 8: Po přihlášení musíme potvrdit URL. Ověříme, zda je adresa URL stejný na URL po přihlášení. Pro tvrzení použijeme Chai knihovna tvrzení, která je integrována s Cypress.

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Přihlášení s platnými přihlašovacími údaji", 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/') }) })

Výše uvedený obrázek představuje testovací případ přihlášení. Byli jsme schopni napsat testovací případ s objektovým modelem stránky s několika málo jednoduchými kroky. Nyní spustíme testovací případ a uvidíme výsledek.

Otevřeme testovací běžec Cypress a klikneme na soubor spec a spustíme náš testovací případ. Koukni na tohle článek o tom, jak otevřít testovací běžec Cypress.

Hurá! Úspěšně jsme napsali testovací případ, který používá v Cypressu objektový model stránky. Tento vzorec můžeme začlenit do projektů v reálném čase. Existuje mnoho způsobů, jak můžeme metody zapsat do souboru objektu stránky. Ukázal jsem vám příklad, který je standardní a funguje pro jakýkoli projekt. Můžete také psát pouze návratová funkce v souboru objektu stránky a poté klikněte na a typ přímo v našem souboru specifikací.

Uvidíme další vzor, ​​který můžeme v projektu použít. Tato metoda bude také fungovat naprosto v pořádku.

V tomto typu budeme vracet pouze funkci lokátoru v naší metodě a provádět akce v testovacím souboru. Napíšeme kód pro stejný scénář, jaký jsme viděli výše.

Objekt stránky - LoginPage.js

class LoginPage { navigate() { 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]') } } exportovat výchozí přihlašovací stránku

Jak jsme viděli výše, píšeme do naší funkce pouze lokátor a vracíme je. Návrat představuje, že konkrétní metoda patří do třída LoginPage.js. Do našich metod nepřidáváme žádné akce.

Spec File - POMDemo.spec.js

Podíváme se na příklad přístupu k metodám v souboru spec.

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { it("Přihlášení s platnými přihlašovacími údaji", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('admin@yourstore.com'); login.enterPassword().clear() login.enterPassword().type('admin'); přihlášení. submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Zde zavoláme metodu ze souboru PageObject a provedeme akce testovacího případu. Nejprve tedy voláme naši referenční proměnnou přihlásit se a poté jej připojte metodou enterEmail() a nakonec připojení akce typ. V našem type(), předáváme uživatelské jméno hodnota.

Jak vidíte, všechny příkazy byly provedeny a testovací případ prošel!

Můžete si vybrat libovolný objektový model stránky, který vyhovuje vašemu projektu a vašemu názoru. Neexistuje žádné konkrétní pravidlo, které by se drželo pouze jednoho postupu.

Jak používat svítidla jako zdroj testovacích dat v objektovém modelu stránky v Cypressu?

V našich příkladech modelu Page Object jsme předali hodnotu uživatelského jména a hesla přímo v souboru Page Object nebo přímo v souboru testovacího případu. Tato část pochopí, jak používat příslušenství v Cypressu aby byla data v bezpečí a nebyla vystavena. Měli bychom se snažit uchovávat všechna pověření a data v jednom souboru a přistupovat k nim. Tímto způsobem se snadno udržuje a citlivá data, jako je uživatelské jméno a heslo, nejsou vystavena. Tato metoda je také jedním z postupů, které musíme dodržovat ve vzoru objektu stránky.

Jak již bylo řečeno, Fixture pomáhá ukládat data do souboru JSON nebo Excel nebo do externí knihovny, jako je Apache POI. Tyto údaje použijeme vytvořením proměnné a přistupujeme k nim v našem souboru specifikací. Pojďme to pochopit na příkladu.

Cypress poskytuje složku s názvem „svítidla. ” Vytvoříme a JSON soubor s názvem pověření.json ve složce „Příslušenství“.

Deklarujme naše uživatelské jméno, heslo a hodnoty URL, které potřebujeme ověřit ve formátu JSON v credentials.json soubor.

{ "username" : "admin@yourstore.com", "password" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

Přístup k hodnotám ze souboru JSON v souboru testovacího případu

Jak jsme definovali hodnoty v našem souboru JSON, přistoupíme k nim v našem souboru testovacích případů pomocí Přístroje z Cypressu. K hodnotě JSON přistoupíme pomocí tento klíčové slovo. Pojďme zabalit funkci přípravku do a před() 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}) - tento řádek představuje, že míjíme credentials.json soubor jako parametr pro náš cy.fixture () příkaz. Zde nemusíme předávat, zda se jedná o soubor JSON. Jednoduše předejte název souboru. Později projíždíme testovací data jako parametr ve funkci a přístup k testovací data variabilní pomocí tento.

/// import LoginPage z "./PageObject/LoginPage" description("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Přihlášení s platnými přihlašovacími údaji", funkce () { 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) - Tím se načte hodnota uživatelského jména ze souboru credentials.json a vyplní se do pole e -mailu.

login.enterPassword (this.testdata.password) - Tím se načte hodnota hesla ze souboru credentials.json a vyplní se do pole pro heslo

cy.url (). should ('be.equal', this.testdata.adminUrl) - Tím získáte adminUrl ze souboru credentials.json a ověříte v tvrzení

Nyní spustíme testovací případ pro výsledek.

Jak vidíme, testovací případy byly provedeny a prošly. Tento příklad vám pomůže napsat základní testovací případ řízený daty. Tuto metodu můžete začlenit do svého projektu. Ve složce Fixture můžete vytvářet nové soubory JSON, přidávat hodnoty související s testovacími daty a přistupovat k nim v libovolném testovacím souboru.

Často kladené otázky

Podporuje Cypress objektový model stránky?

Samozřejmě. Cypress poskytuje veškerou flexibilitu při hraní se stránkami a objekty v úložišti. Je snadné jej implementovat.

Který objektový model stránky mám použít z výše uvedených příkladů?

Neexistuje žádné konkrétní pravidlo, které by se drželo pouze jednoho způsobu objektového modelu stránky. Můžete použít jakýkoli model, který byl diskutován výše. Model si můžete přizpůsobit podle svého projektu.

Proč bych měl v Cypressu používat příslušenství v objektovém modelu stránky?

Fixture pomáhá ukládat citlivá data, jako je uživatelské jméno, heslo a adresy URL, do samostatného souboru, jako je JSON nebo Excel. Tím je zajištěno zabezpečení aplikace a snadný přístup k nim v jakýchkoli souborech v rámci projektu. K přístupu k souboru JSON používáme svítidla použít v našem souboru specifikací.