Czym są wzorce projektowe i dlaczego warto je stosować? Dowiecie się tego tutaj: Wzorce projektowe – jak ogarnąć automatyzację testów i nie zginąć w chaosie.

Natomiast przypominając lub w ramach uzupełnienia, jeśli nie czytaliście poprzedniego artykułu, oto krótkie wyjaśnienie dwóch ważnych pojęć:

  • Wzorzec projektowy to sprawdzone rozwiązanie często powtarzających się problemów w tworzeniu oprogramowania. Pomaga uporządkować kod, ułatwia jego utrzymanie i sprawia, że jest bardziej czytelny, dzięki czemu praca staje się bardziej efektywna i mniej chaotyczna.
  • Page Object Model (POM) to jeden z takich wzorców, używany w automatyzacji testów. Polega na tworzeniu oddzielnych „klas”, które opisują poszczególne strony lub ich elementy. Dzięki temu zmiany w interfejsie trzeba wprowadzać tylko w jednym miejscu, co ułatwia zarządzanie testami i zwiększa ich stabilność.

Ten kod to przykład implementacji Page Object Model (POM) w frameworku Cypress, który służy do automatyzacji testów stron internetowych.

class RegistrationPage {
    // Registration form elements
    elements = {
        emailInput: () => cy.get('#reg_email'),
        passwordInput: () => cy.get('#reg_password'),
        registerButton: () => cy.get('button[name="register"]')
    }

    // Enter the email address
    enterEmail(email) {
        this.elements.emailInput()
            .should('be.visible')
            .type(email);
    }

    // Enter the password
    enterPassword(password) {
        this.elements.passwordInput()
            .should('be.visible')
            .type(password);
    }

    // Click the register button
    clickSubmitButton() {
        this.elements.registerButton()
            .should('be.visible')
            .click();
    }
}

export default new RegistrationPage();

Co tu się dzieje?

  • Klasa RegistrationPage reprezentuje stronę rejestracji użytkownika.
  • Wewnątrz klasy jest obiekt elements, który definiuje selektory do najważniejszych elementów na stronie:
    • emailInput – pole do wpisania adresu e-mail,
    • passwordInput – pole do wpisania hasła,
    • registerButton – przycisk rejestracji.
  • Metody:
    • enterEmail(email) – znajduje pole e-mail, sprawdza, czy jest widoczne, a następnie wpisuje podany adres e-mail.
    • enterPassword(password) – podobnie jak wyżej, ale dla pola hasła.
    • clickSubmitButton() – znajduje przycisk rejestracji, upewnia się, że jest widoczny, i klika go.

Dlaczego tak?

  • POM pomaga utrzymać porządek: wszystkie elementy i akcje związane z konkretną stroną są w jednym miejscu.
  • Testy są czytelniejsze: w testach możesz po prostu wywołać np. registrationPage.enterEmail('test@example.com') zamiast powtarzać selektory i metody.
  • Łatwość utrzymania: jeśli zmieni się wygląd strony (np. zmieni się selektor pola e-mail), poprawiasz go tylko tutaj, a nie w każdym teście.