Model obiektu strony, Powszechnie znany jako POM, jest popularnym wzorcem w dowolnej strukturze automatyzacji. Page Object Model można również zastosować w Cypress. Page Object Model ma wiele zalet w tworzeniu frameworka do automatyzacji testów, takich jak ograniczenie duplikacji kodu oraz zwiększenie łatwości konserwacji i czytelności. Cypress zapewnia nam elastyczność we włączaniu Page Object Model do skryptu testowego. W tym artykule przyjrzymy się tworzeniu Page Object Model w Krok cyprysowy krok po kroku z przykładami.

Spis treści:

• Co to jest model obiektowy strony?
• Architektura Page Object Model Framework
• Zalety korzystania z Page Object Model w Cypress
• Cypress Model obiektowy strony krok po kroku z przykładem
• Uzyskiwanie dostępu do obiektów strony w pliku Spec
• Jak używać urządzeń jako źródła danych testowych w Page Object Model w Cypress?
• Dostęp do wartości z pliku JSON w pliku przypadku testowego
• Często Zadawane Pytania

Co to jest model obiektowy strony?

Page Object Model to wzorzec projektowy, w którym obiekty strony są oddzielone od skryptów testów automatyzacji. Testowanie automatyzacji daje nam wiele korzyści, które przynoszą nam korzyści w testowaniu; istnieją jednak pewne wyniki, takie jak powielanie kodu i wzrost ryzyka utrzymania w miarę rozwoju projektu. Zrozummy znaczenie POM na przykładzie.

Weź pod uwagę, że w naszej aplikacji mamy wiele stron, takich jak strona logowania, strona rejestracji i strona rezerwacji lotów.

• Strona logowania zawiera wszystkie elementy sieciowe funkcji logowania
• Rejestracja zawiera wszystkie metody i elementy internetowe procesu rejestracji
• Rezerwuj loty zawierają elementy internetowe strony rezerwacji lotów

Istnieją trzy przypadki testowe, a mianowicie TC1, TC2 i TC3.

• TC1 zawiera przypadki testów logowania.
• TC2 zawiera przypadki testowe logowania i rejestracji
• TC3 zawiera przypadki testowe logowania, rejestracji i rezerwacji lotów

Teraz strona logowania współdziała z TC1.

Strona rejestracji musi współpracować z TC1 i TC2 oraz

Strona rezerwacji lotów musi wchodzić w interakcję z TC1, TC2 i TC3

Jak widać, wszystkie trzy przypadki testowe mają wspólne funkcjonalności. Zamiast pisać metody i lokalizatory logowania we wszystkich plikach przypadków testowych, możemy mieć je osobno i uzyskiwać do nich dostęp we wszystkich plikach. W ten sposób kod się nie powtarza i jest łatwy do odczytania.

Jedną z najlepszych praktyk w kodowaniu jest koncepcja o nazwie DRY. To znaczy Nie powtarzaj się. Jak wyraźnie mówi pełna forma, nie powinniśmy ciągle powtarzać linijek kodu. Aby to przezwyciężyć, Model obiektu strony odgrywa ważną rolę w najlepszych praktykach kodowania.

Architektura Page Object Model Framework

Połączenia Struktura modelu obiektów strony architektura to sprawdzona architektura, którą można dostosować za pomocą prostych metod. Obecnie prawie wszystkie firmy stosują metodyki zwinne, które obejmują ciągłą integrację, rozwój i testowanie. Testerzy automatyzacji utrzymują ramy testowe, aby współpracować z procesem rozwoju z Model obiektu strony. Jest to znaczące wzorca projektowego w utrzymaniu frameworku testów automatyzacji wraz z rozwojem kodu o nowe funkcje.

Obiekt strony to wzorzec projektowy, który jest klasą zorientowaną obiektowo, która wchodzi w interakcję ze stronami testowanej aplikacji. Obiekt strony składa się z Klasa strony i Przypadki testowe. Klasa strony składa się z metod i lokalizatorów do interakcji z elementami sieci. Dla każdej strony w aplikacji tworzymy osobne klasy. Będziemy tworzyć indywidualne metody dla każdej funkcjonalności i uzyskać do nich dostęp w naszym pliku specyfikacji.

Zalety korzystania z Page Object Model w Cypress

1. Metody są wielokrotnego użytku w całym projekcie i łatwe w utrzymaniu, gdy projekt się rozrasta. Linie kodu stają się mniej czytelny i zoptymalizowany.
2. Wzorzec obiektu strony sugeruje, aby oddzielić operacje i przepływ które wykonujemy w interfejsie użytkownika weryfikacja kroki. Kiedy podążamy za wzorem POM, mamy tendencję do pisania czysty i łatwo zrozumiały kod.
3. Z modelem obiektów strony, obiekty i przypadki testowe są od siebie niezależne. Możemy wywoływać obiekty w dowolnym miejscu projektu. W ten sposób, jeśli używamy różnych narzędzi, takich jak TestNG/JUnit do testów funkcjonalnych lub Cucumber do testów akceptacyjnych, to jest to łatwe dostępny.

Cypress Model obiektowy strony krok po kroku z przykładem

W tej sekcji dowiesz się, jak utworzyć obiektowy model strony w Cyprys z przykładami w czasie rzeczywistym które możemy wdrożyć w projektach. Zrozumiemy od podstawowej konfiguracji i krok po kroku proces tworzenia Page Object Model.

Omówmy scenariusz, na którym napiszemy funkcje w tym przykładzie.

1. Nawigować do https://admin-demo.nopcommerce.com/
2. Wpisz prawidłową nazwę użytkownika i hasło
3. Kliknij przycisk logowania
4. Sprawdź poprawność adresu URL, niezależnie od tego, czy jest do niego dodany /admin po zalogowaniu

W tym przykładzie stworzymy dwa pliki – jeden plik PageObject i jeden plik spec. Zacznijmy!

Krok 1: Otwórz nasz projekt w kodzie VS. Utwórz folder o nazwie StronaObiekt pod integracja teczka. W tym folderze możesz tworzyć pliki obiektów strony dla dowolnych modułów.

Krok 2: Utwórz plik o nazwie Strona logowania.js pod StronaObiekt teczka. W LoginPage.js będziemy pisać metody, które zawierają funkcjonalności logowania.

Krok 3: Zacznijmy pisać naszą pierwszą metodę testową w LoginPage.js plik. Najpierw musimy stworzyć klasę, którą będziemy eksportować w naszym pliku spec. Zadzwonimy do naszej klasy jako Strona logowania

klasa Strona logowania { }

Bazując na naszym pseudokodzie, naszym pierwszym krokiem jest przejście do adresu URL. Naszą metodę będziemy nazywać navigate(). Wewnątrz naszej metody nawigacji dodamy cy.visit() funkcja z Cypru.

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

Krok 4: Teraz będziemy musieli wpisać nazwę użytkownika w naszym polu e-mail. Naszą metodę nazwiemy Wprowadź e-mail(). Najpierw powinniśmy uzyskać lokalizator pola e-mail i uzyskać do nich dostęp przez cy.get() Komenda. Następnie wyczyścimy pole za pomocą clear() i dodaj nazwę użytkownika za pomocą type() Komenda. W naszej metodzie przekazujemy parametr nazwa użytkownika przekazać wartość w pliku spec. W ten sposób zachowujemy ogólny dostęp do tej metody, jeśli wymagany jest inny identyfikator e-mail.

enterEmail(nazwa użytkownika) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(nazwa użytkownika); zwróć to }

Zamiast pisać cy.get() polecenie dwukrotnie w powyższym kodzie, możemy je po prostu zapętlić za pomocą kropka operator.

  enterEmail(nazwa użytkownika) { cy.get('[id=Email]') .clear() .type(nazwa użytkownika); zwróć to }

Mogłeś zauważyć return this w wierszu 9. to wskazuje, że Wprowadź e-mail metoda należy do szczególnych Strona logowania klasa. Zasadniczo, to reprezentuje klasę.

Krok 5: Musimy stworzyć metodę dla haseł podobną do naszej metody enterEmail. Naszą metodę hasła nazwiemy jako enterPassword(). Początkowo uzyskamy lokalizator hasła, wyczyścimy pole i wpiszemy wartość wejściową. Przekażemy parametr do naszej metody o nazwie psw i dostęp w type() dowództwo.

enterPassword(pswd) { cy.get('[id=Hasło]') .clear() .type(pswd) zwróć to }

Krok 6: Naszą ostatnią metodą byłoby kliknięcie przycisku logowania. Naszą metodę nazwiemy submit(). Otrzymamy lokalizator i klikniemy przycisk za pomocą click() metoda z Cyprysa.

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

Ewolucja krok po kroku 7: Teraz musimy wyeksportować tę klasę, aby użyć jej w naszym pliku specyfikacji. W tym celu po prostu dodajemy jedną linię poza naszą klasą i możemy łatwo uzyskać do niej dostęp w naszym pliku specyfikacji.

eksportuj domyślną stronę logowania

Hurra! Dla naszego projektu stworzyliśmy plik Page Object. To było całkiem proste i łatwe!

Uzyskiwanie dostępu do obiektów strony w pliku Spec

Przejdźmy teraz do naszego pliku przypadku testowego. Musimy stworzyć plik spec w naszym folderze integracji. Zadzwonimy do naszego pliku specyfikacji POMDemo.spec.js.

Krok 1: Aby uzyskać dostęp do naszych metod w pliku LoginPage.js, musimy importować je do naszego pliku specyfikacji. Importujemy za pomocą instrukcji import. Powinniśmy przejść do pliku LoginPage.js za pomocą ../

W naszym przypadku ścieżka jest ../integration/PageObject/LoginPage. Tak więc instrukcja import będzie wyglądać mniej więcej tak, jak poniżej.

importuj stronę logowania z "../integration/PageObject/LoginPage"

Krok 2: Ponieważ używamy Mocha, napiszemy nasz przypadek testowy w środku describe() i it() blok. description() reprezentuje a zestaw testów, a it() reprezentuje a walizka testowa. Oba bloki są funkcją i akceptują parametr ciągu, który zawiera opis testu.

opisz("Pakiet testowy Cypress POM", funkcja () { })

W bloku opisu napiszemy nasze it() dodając opis jako login z poprawnymi poświadczeniami.

it("Zaloguj się z prawidłowymi danymi uwierzytelniającymi", funkcja () { })

Krok 3: Aby uzyskać dostęp do naszych metod z naszego pliku obiektu Page, powinniśmy utworzyć instancję dla naszej klasy Login. Aby utworzyć instancję dla klasy logowania, musimy zadeklarować zmienną i przypisać ją do naszego pliku klasy za pomocą nowa słowo kluczowe. Dzięki zadeklarowanej zmiennej możemy łatwo uzyskać dostęp do metod z pliku obiektu Page.

                                               const login = nowa strona logowania();

Note: Ze zmienną login, możemy uzyskać dostęp do metod z klasy obiektu Page. Kiedy zaczynamy pisać login. , vscode wyświetli sugestie wszystkich metod dostępnych w pliku LoginPage.js. Pomaga nam to zweryfikować, czy prawidłowo wyeksportowaliśmy i zaimportowaliśmy naszą klasę!

Krok 4: Nazwijmy nasze navigate() metoda, aby odwiedzić adres URL. To pierwsza czynność w naszym przypadku testowym.

/// importuj LoginPage z "./PageObject/LoginPage" define("Pakiet testowy Cypress POM", function () { it("Zaloguj się z ważnymi danymi uwierzytelniającymi", function () { const login = new LoginPage(); login.navigate(); }); });

Krok 5: Powinniśmy wpisać nazwę użytkownika w polu e-mail. Mamy dostęp do enterEmail() z Zaloguj Się obiekt. enterEmail() metoda przyjmuje parametr nazwa użytkownika. Powinniśmy więc przekazać wartość nazwy użytkownika jako a ciąg w naszym pliku specyfikacji

/// zaimportuj LoginPage z "./PageObject/LoginPage" opis("Cypress POM Test Suite", funkcja () { it("Zaloguj się przy użyciu ważnych danych uwierzytelniających", funkcja () { const login = new LoginPage(); login.navigate(); zaloguj.wprowadźE-mail('[email chroniony]'); }) })

Krok 6: Podobnie jak w kroku 5, powinniśmy zadzwonić do naszego enterPassword() metodę, przekazując hasło jako parametr w ciągu.

/// zaimportuj LoginPage z "./PageObject/LoginPage" opis("Cypress POM Test Suite", funkcja () { it("Zaloguj się przy użyciu ważnych danych uwierzytelniających", funkcja () { const login = new LoginPage(); login.navigate(); zaloguj.wprowadźE-mail('[email chroniony]'); login.enterPassword('admin'); }) })

Krok 7: Następnie musimy kliknąć przycisk logowania. Nazwiemy metodę submit() z naszego pliku obiektu strony.

/// zaimportuj LoginPage z "./PageObject/LoginPage" opis("Cypress POM Test Suite", funkcja () { it("Zaloguj się przy użyciu ważnych danych uwierzytelniających", funkcja () { const login = new LoginPage(); login.navigate(); zaloguj.wprowadźE-mail('[email chroniony]'); login.enterPassword('admin'); zaloguj.prześlij(); }) })

Krok 8: Po zalogowaniu musimy potwierdzić adres URL. Zweryfikujemy, czy adres URL jest równy do adresu URL po zalogowaniu. Do asercji użyjemy Chai biblioteka asercji, która jest wbudowana w Cypress.

/// zaimportuj LoginPage z "./PageObject/LoginPage" opis("Cypress POM Test Suite", funkcja () { it("Zaloguj się przy użyciu ważnych danych uwierzytelniających", funkcja () { const login = new LoginPage(); login.navigate(); zaloguj.wprowadźE-mail('[email chroniony]'); login.enterPassword('admin'); zaloguj.prześlij(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

Powyższy obraz przedstawia przypadek testowy logowania. Udało nam się napisać przypadek testowy z Page Object Model w kilku prostych krokach. Przejdźmy teraz do przypadku testowego i zobaczmy wynik.

Otworzymy program uruchamiający test Cypress, klikniemy plik specyfikacji i uruchomimy nasz przypadek testowy. Sprawdź to artykuł jak otworzyć testera Cypress.

Hurra! Z powodzeniem napisaliśmy przypadek testowy wykorzystujący Page Object Model w Cypress. Możemy zastosować ten wzorzec w projektach w czasie rzeczywistym. Istnieje wiele sposobów na zapisanie metod w pliku obiektu strony. Pokazałem ci przykład, który jest standardowy i sprawdza się w każdym projekcie. Możesz też pisać tylko funkcja powrotu w pliku obiektu strony, a następnie kliknij i rodzaj bezpośrednio w naszym pliku specyfikacji.

Zobaczymy kolejny wzór, który możemy wykorzystać w projekcie. Ta metoda również będzie działać doskonale.

W tym typie będziemy zwracać tylko funkcję lokalizatora w naszej metodzie i wykonywać akcje w pliku testowym. Napiszemy kod dla tego samego scenariusza, który widzieliśmy powyżej.

Obiekt strony – LoginPage.js

class LoginPage { nawigacja() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Hasło]') } submit() { return cy.get('[type=submit]') } } eksportuj domyślną stronę logowania

Jak widzieliśmy powyżej, zapisujemy tylko lokalizator wewnątrz naszej funkcji i zwracamy je. Zwrot oznacza, że ​​dana metoda należy do klasa LoginPage.js. W naszych metodach nie dodajemy żadnych akcji.

Plik specyfikacji – POMDemo.spec.js

Przyjrzymy się przykładowi dostępu do metod w pliku spec.

/// zaimportuj LoginPage z "./PageObject/LoginPage" opis("Cypress POM Test Suite", funkcja () { it("Zaloguj się przy użyciu ważnych danych uwierzytelniających", funkcja () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('[email chroniony]'); login.enterPassword().clear() login.enterPassword().type('admin'); login.submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Tutaj wywołujemy metodę z pliku PageObject i wykonujemy akcje przypadku testowego. Więc najpierw wywołujemy naszą zmienną referencyjną Zaloguj Się a następnie dołączenie go za pomocą metody enterEmail() i wreszcie dołączenie akcji rodzaj. W naszym type(), przekazujemy nazwę użytkownika wartość.

Jak widać, wszystkie polecenia zostały wykonane, a przypadek testowy zaliczony!

Możesz wybrać dowolny model obiektu strony, który odpowiada Twojemu projektowi i Twojej opinii. Nie ma szczególnej zasady, aby trzymać się tylko jednej procedury.

Jak używać urządzeń jako źródła danych testowych w Page Object Model w Cypress?

W naszych przykładach Page Object Model przekazaliśmy nazwę użytkownika i hasło bezpośrednio w pliku Page Object lub bezpośrednio w pliku przypadku testowego. Ta sekcja zrozumie, jak używać oprawy w Cyprysie aby dane były bezpieczne i nieujawniane. Powinniśmy starać się przechowywać wszystkie poświadczenia i dane w jednym pliku i uzyskiwać do nich dostęp. W ten sposób jest łatwy w utrzymaniu, a poufne dane, takie jak nazwa użytkownika i hasło, nie są ujawniane. Ta metoda jest również jedną z procedur, które musimy wykonać we wzorcu obiektu strony.

Jak omówiono wcześniej, Fixture pomaga przechowywać dane w pliku JSON lub pliku Excel lub w zewnętrznej bibliotece, takiej jak Apache POI. Wykorzystamy te dane, tworząc zmienną i uzyskując do nich dostęp w naszym pliku specyfikacji. Rozumiemy na przykładzie.

Cypress udostępnia folder o nazwie „armatura”. Stworzymy JSON plik o nazwie kwalifikacje.json w folderze „Urządzenia”.

Zadeklarujmy naszą nazwę użytkownika, hasło i wartości URL, które musimy zweryfikować w formacie JSON w poświadczenia.json plik.

{ "nazwa użytkownika" : "[email chroniony]", "hasło": "admin", "adminUrl": "https://admin-demo.nopcommerce.com/admin/" }

Dostęp do wartości z pliku JSON w pliku przypadku testowego

Ponieważ zdefiniowaliśmy wartości w naszym pliku JSON, uzyskamy do nich dostęp w naszym pliku przypadku testowego za pomocą Lampy z Cyprysa. Uzyskamy dostęp do wartości JSON za pomocą to słowo kluczowe. Zawińmy funkcję urządzenia w a przed() blok.

opisz("Pakiet testowy Cypress POM", funkcja () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) – ta linia oznacza, że ​​mijamy poświadczenia.json plik jako parametr do naszego cy.oprawa() Komenda. Tutaj nie musimy podawać, czy jest to plik JSON. Po prostu przekaż samą nazwę pliku. Później mijamy dane testowe jako parametr w funkcji i wejdź do dane testowe zmienna za pomocą to.

/// importuj LoginPage z "./PageObject/LoginPage" define("Pakiet testowy Cypress POM", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Zaloguj się z prawidłowymi danymi uwierzytelniającymi", 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) – Spowoduje to pobranie wartości nazwy użytkownika z pliku poświadczenia.json i wypełnienie jej w polu e-mail.

login.enterPassword(this.testdata.password) – Spowoduje to pobranie wartości hasła z pliku poświadczenia.json i wypełnienie go w polu hasła

cy.url().should('być.równy', this.testdata.adminUrl) – Spowoduje to pobranie adminUrl z pliku poświadczenia.json i walidację w asercji

Teraz przeprowadźmy przypadek testowy dla wyniku.

Jak widać, przypadki testowe zostały wykonane i zaliczone. Ten przykład pomoże Ci napisać podstawowy przypadek testowy oparty na danych. Możesz włączyć go do swojego projektu za pomocą tej metody. Możesz tworzyć nowe pliki JSON w folderze Fixture, dodawać wartości związane z danymi testowymi i uzyskiwać do nich dostęp w dowolnym pliku testowym.

Często Zadawane Pytania

Czy Cypress obsługuje model obiektowy strony?

Oczywiście. Cypress zapewnia pełną elastyczność w zabawie ze stronami i obiektami w repozytorium. Jest łatwy do wdrożenia.

Który model obiektów strony powinienem użyć z powyższych przykładów?

Nie ma żadnej szczególnej zasady, aby trzymać się tylko jednego sposobu Page Object Model. Możesz użyć dowolnego modelu, który został omówiony powyżej. Możesz dostosować model do swojego projektu.

Dlaczego powinienem używać osprzętu w Page Object Model w Cypress?

Fixture pomaga przechowywać poufne dane, takie jak nazwa użytkownika, hasło i adresy URL, w oddzielnym pliku, takim jak JSON lub Excel. Zapewnia to bezpieczeństwo aplikacji i łatwy dostęp do nich w dowolnych plikach w całym projekcie. Aby uzyskać dostęp do pliku JSON, używamy armatura aby użyć go w naszym pliku specyfikacji.

Aishwarya Lakszmi

Cześć… nazywam się Aishwarya Lakshmi, ukończyłem B.Tech i mam prawie 2 lata doświadczenia w domenie testowania. Jestem entuzjastą testowania i pasjonuję się testowaniem. Uwielbiam odkrywać nowe rzeczy w mojej dziedzinie i dzielić się nimi z rówieśnikami. W wolnym czasie lubię pisać blogi w najprostszy, ale skuteczny sposób. Jako tester lubię mieć wszystko dopracowane do perfekcji, dlatego życzę moim czytelnikom doskonałego zrozumienia technologii. Na bieżąco śledzę nowe technologie związane z testowaniem i poświęcam czas na ich zrozumienie. Cieszę się, że mogę pomóc uczniom zrozumieć pojęcia używane w testowaniu.