Структура page objects

Page Object Model (POM) — это шаблон проектирования, направленный на повышение читаемости и поддерживаемости тестов через разделение логики тестов и логики работы с элементами страницы. В контексте Cypress его использование позволяет создавать абстракции над интерфейсом, что сокращает дублирование кода и упрощает внесение изменений при модификации приложения.

Основные принципы Page Object

1. Инкапсуляция элементов страницы Элементы страницы описываются как свойства класса или объекта. Это позволяет изменять селекторы в одном месте без необходимости правки всех тестов, где они используются.

Пример:

class LoginPage {
    get usernameInput() {
        return cy.get('#username');
    }

    get passwordInput() {
        return cy.get('#password');
    }

    get loginButton() {
        return cy.get('button[type="submit"]');
    }
}

2. Методы взаимодействия Page Object должен содержать методы, которые описывают действия пользователя. Методы не должны дублировать логику тестов, а предоставлять чистые действия над страницей.

login(username, password) {
    this.usernameInput.type(username);
    this.passwordInput.type(password);
    this.loginButton.click();
}

3. Разделение логики теста и логики страницы Тест должен концентрироваться на проверках и сценариях, а не на низкоуровневом взаимодействии с элементами. Page Object берет на себя работу с DOM.

Пример теста с использованием Page Object:

describe('Login tests', () => {
    const loginPage = new LoginPage();

    it('Успешный вход', () => {
        cy.visit('/login');
        loginPage.login('user', 'password');
        cy.url().should('include', '/dashboard');
    });
});

Организация файловой структуры

Для крупных проектов рекомендуется разделять Page Objects по функциональным блокам приложения:

cypress/
 └─ support/
     └─ page_objects/
         ├─ loginPage.js
         ├─ dashboardPage.js
         └─ settingsPage.js

Каждый файл содержит один класс или объект, полностью инкапсулирующий работу с конкретной страницей. Это облегчает навигацию по проекту и поиск нужного Page Object.

Использование вспомогательных функций

Для повторяющихся действий или комплексных сценариев, которые затрагивают несколько страниц, можно создавать вспомогательные методы внутри Page Object или отдельные утилиты:

export function loginAsUser(username, password) {
    const loginPage = new LoginPage();
    loginPage.login(username, password);
}

Динамические элементы и асинхронность

Cypress автоматически ждет элементы на странице, поэтому в Page Object можно безопасно использовать цепочки команд без явных wait. Для динамических элементов полезно создавать методы, принимающие параметры:

class DashboardPage {
    menuItem(name) {
        return cy.contains('nav li', name);
    }

    openMenuItem(name) {
        this.menuItem(name).click();
    }
}

Организация проверок в Page Object

Хотя Page Object не должен содержать сами тестовые сценарии, он может включать методы для проверок состояния элементов. Это особенно удобно для повторяющихся assertion:

class LoginPage {
    errorMessage() {
        return cy.get('.error-message');
    }

    verifyError(message) {
        this.errorMessage().should('have.text', message);
    }
}

Паттерны для крупных проектов

  • Базовый класс страницы — содержит общие методы для всех страниц, например visit(url), getHeader().
  • Композиция Page Objects — если одна страница состоит из нескольких логических блоков, их можно инкапсулировать отдельными объектами и включать в основной Page Object.
  • Фабрики данных — для передачи данных в методы Page Object используются объекты или JSON, что делает тесты более читаемыми и расширяемыми.

Преимущества использования Page Object в Cypress

  • Повышение читаемости тестов: тесты сосредоточены на логике, а не на селекторах.
  • Упрощение поддержки: при изменении селекторов или структуры страницы правится только Page Object.
  • Снижение дублирования кода: общие действия инкапсулируются в методах.
  • Упрощение масштабирования: новые страницы и блоки легко интегрируются в существующую структуру.

Структура Page Objects формирует фундамент для масштабируемых, поддерживаемых и устойчивых к изменениям тестов, делая Cypress мощным инструментом автоматизации в больших проектах.

Оглавление