PageObject

PageObject (з англійської «об'єкт сторінки») — шаблон проєктування, що використовується при написанні автоматизованих тестів^[1], який дає змогу абстрагуватись від окремих елементів HTML і інкапсулювати їх у функції доступу до елементів інтерфейсу вищого рівня, як їх бачить користувач. PageObject є об'єктом ООП, і містить методи, на основі яких створюється DSL для керування застосунком на основі якої пишуть варіанти тестування. Хоча в назві міститься слово «сторінка», один PageObject не обов'язково відповідає одній сторінці, він відповідає певній частині інтерфейсу, можливою правильнішою назвою була б Panel Object, але поточна назва вже стала поширеною.^[2]

Цей шаблон уперше застосували в проєкті WebDriver, який пізніше об'єднався з Selenium.^[3]

Переваги

• Розділення логіки роботи та представлення
• Зменшення дублювання коду для пошуку елементів керування застосунком
• При змінах інтерфейсу, що не зачіпають логіки, потрібно буде змінити лише PageObject, а не логіку тестів.^[1]

Структура

Page Object зазвичай містить лише код для доступу до елементів керування і не містить ніяких тестових припущень. Єдині перевірки, які здійснюються під час створення об'єкта — це те, що інтерфейс та елементи керування на ньому завантажились і відобразились коректно.^[1]

З елементами керування можна або взаємодіяти, або отримувати від них інформацію. Наприклад, галочка може відображатись у змінну типу boolean

Приклади

Цей паттерн можна реалізувати на різних об'єктно орієнтованих мовах. Існують реалізації на Java^[4], JavaScript^[5], Python^[6], Ruby^[7]

Приклад мовою C #

Приклад реалізації

public class HomePage
{
        private const string PagePath = "https://localhost:6001/home-page";

        private IBrowser _browser;
        private IPage _page;

        public HomePage()
        {
            Browser = await Playwright
              .Create()
              .Chromium.LaunchAsync(new BrowserTypeLaunchOptions());
        }

        public async Task Navigate()
        {
            Page = await Browser.NewPageAsync();
            await Page.GotoAsync(PagePath);
        }

        public async Task<string> GetTitle()
        {
            return await Page.InputValueAsync("#title");
        }

        public async Task ClickButton() { . . . }
        public async Task EnterText() { . . . }
}
}}

// використання в юніт-тесті

[Fact]
public async Task HomePage_should_have_correct_title()
{
            // Arrange
            var page = new HomePage();

            // Act
            await page.Navigate();
            var title = await page.GetTitle();

            // Assert
            Assert.Equal(expected: "Home", actual: title);
}

Приклад мовою TypeScript

Приклад реалізації

export class AppPage {
	navigateTo() {
		return browser.get('/');
	}

	getParagraphText() {
		return element(by.css('app-root h1')).getText();
	}

	clickButton() { . . . }
    enterText() { . . . }
}

// використання в юніт-тесті

describe('AppPage', () => {
	it('should display welcome message', () => {
        // Arrange
        const page = new AppPage();

        // Act
		page.navigateTo();
		
        // Assert
        expect(page.getParagraphText()).toEqual('Welcome to client!');
	});
});

Див. також

• Selenium
• MVC
• Фасад (шаблон проєктування)