login.page.ts

import { Page } from ‘@playwright/test’;

export class LoginPage {
private page: Page;
private usernameInput = ‘#user-name’;
private passwordInput = ‘#password’;
private loginButton = ‘#login-button’;
private errorMessage = ‘.error-message-container’;

constructor(page: Page) {
this.page = page;
}

async goto() {
await this.page.goto(‘/’);
}

async login(username: string, password: string) {
await this.page.fill(this.usernameInput, username);
await this.page.fill(this.passwordInput, password);
await this.page.click(this.loginButton);
}

async getErrorMessage() {
return await this.page.innerText(this.errorMessage);
}
}

Опис класу LoginPage

Клас LoginPage інкапсулює елементи і взаємодії на сторінці логіну для подальшого використання у тестах. Він надає методи для навігації на сторінку, введення даних користувача, натискання кнопки логіну та отримання повідомлень про помилки.

Імпорти:

import { Page } from ‘@playwright/test’;

Імпортується Page з Playwright для роботи зі сторінкою, на якій будуть виконуватись дії.

Оголошення класу:

export class LoginPage {
private page: Page;
private usernameInput = ‘#user-name’;
private passwordInput = ‘#password’;
private loginButton = ‘#login-button’;
private errorMessage = ‘.error-message-container’;

• page — об’єкт сторінки, через який здійснюються всі взаємодії.
• usernameInput, passwordInput, loginButton, errorMessage — селектори елементів на сторінці (поле для введення імені користувача, поле для пароля, кнопка для входу та контейнер для повідомлення про помилку).

Конструктор:

constructor(page: Page) {
this.page = page;
}

Конструктор приймає об’єкт page і ініціалізує його для подальшого використання у методах класу.

Методи класу:

1. Метод goto:

async goto() {
await this.page.goto(‘/’);
}

Цей метод використовує Playwright для переходу на домашню сторінку (за умовчанням / — корінь сайту).

Метод login:

async login(username: string, password: string) {
await this.page.fill(this.usernameInput, username);
await this.page.fill(this.passwordInput, password);
await this.page.click(this.loginButton);
}

Метод заповнює поля для імені користувача і пароля, а потім натискає кнопку логіну для авторизації.

Метод getErrorMessage:

async getErrorMessage() {
return await this.page.innerText(this.errorMessage);
}

Цей метод повертає текст повідомлення про помилку, якщо авторизація не вдалася.

Пояснення основних дій:

• this.page.fill(selector, value) — метод Playwright, який заповнює текстове поле на сторінці значенням.
• this.page.click(selector) — метод, який натискає на елемент сторінки, наприклад, кнопку.
• this.page.innerText(selector) — отримує текст, що міститься в елементі, що відповідає заданому селектору.

Цей клас можна використовувати в тестах для автоматизованого тестування процесу логіну на веб-сторінці, забезпечуючи відокремлення елементів інтерфейсу від тестових сценаріїв.

inventory.page.ts

Оголошення класу:

export class InventoryPage {
private page: Page;
private productTitles = ‘.inventory_item_name’;
private productPrice = ‘.inventory_item_price’;
private addToCartButton = ‘.btn_inventory’;
private backpackTitle = ‘Sauce Labs Backpack’; 

• page — об’єкт сторінки для взаємодії з веб-сторінкою.
• productTitles — CSS-селектор для елементів, що містять назви товарів на сторінці.
• productPrice — CSS-селектор для елементів, що містять ціни товарів.
• addToCartButton — CSS-селектор для кнопок додавання товарів у кошик.
• backpackTitle — конкретна назва товару, який ми хочемо додати в кошик (в даному випадку, «Sauce Labs Backpack»).

Методи класу:

Метод getProductTitles:

async getProductTitles() {
return await this.page.$$eval(this.productTitles, titles => titles.map(title => title.textContent?.trim()));
}

Метод використовує метод $$eval для отримання всіх елементів, що відповідають селектору productTitles (тобто назв товарів), і повертає їх текстове значення у вигляді масиву.

Метод getProductPrices:

async getProductPrices() {
return await this.page.$$eval(this.productPrice, prices => prices.map(price => price.textContent?.trim()));
}

Аналогічно до попереднього методу, цей метод отримує ціни товарів з елементів, що відповідають селектору productPrice, і повертає їх як масив.

Метод addBackpackToCart:

async addBackpackToCart() {
const backpackIndex = await this.page.$$eval(this.productTitles, (titles, backpackTitle) =>
titles.findIndex(title => title.textContent?.trim() === backpackTitle), this.backpackTitle);

if (backpackIndex !== -1) {
const addToCartButtons = await this.page.$$(this.addToCartButton);
await addToCartButtons[backpackIndex].click(); 
} else {
throw new Error(‘Sauce Labs Backpack not found on the page’);
}
}

• Цей метод шукає товар «Sauce Labs Backpack» на сторінці, використовуючи $$eval для пошуку індексу цього товару серед усіх назв товарів.
• Якщо товар знайдений (тобто індекс не дорівнює -1), метод натискає кнопку «Add to cart» для цього товару, використовуючи знайдений індекс товару в масиві кнопок додавання.
• Якщо товар не знайдений, викидається помилка з повідомленням про відсутність товару на сторінці.

Пояснення основних методів Playwright:

• $$eval(selector, callback) — цей метод дозволяє отримати всі елементи, що відповідають селектору, і застосувати до них функцію зворотного виклику (callback), яка повертає значення.
• this.page.$$(selector) — знаходить всі елементи, що відповідають даному селектору, і повертає їх як масив елементів.
• element.click() — викликає клік на елементі.

cart.page.ts

Опис класу CartPage

Клас CartPage відповідає за взаємодію з елементами на сторінці кошика, такими як отримання списку товарів у кошику та навігація на сторінку кошика.

Оголошення класу:

export class CartPage {
private page: Page;
private cartItemsSelector = ‘.cart_item’;

• page — об’єкт сторінки, на якій будуть виконуватися дії.
• cartItemsSelector — CSS-селектор для елементів, що містять товари в кошику (в даному випадку клас .cart_item).

Методи класу:

Метод getCartItems:

async getCartItems() {
return await this.page.$$eval(this.cartItemsSelector, items => items.map(item => item.textContent?.trim()));
}

• Цей метод використовує метод $$eval, щоб отримати всі елементи, які відповідають селектору cartItemsSelector (тобто всі товари в кошику).
• Він застосовує функцію до кожного елементу, яка отримує текстовий вміст елемента та видаляє зайві пробіли, повертаючи масив назв товарів у кошику.

Метод goto:

async goto() {
await this.page.goto(‘/cart.html’);
}

Метод використовує this.page.goto() для переходу на сторінку кошика (/cart.html), щоб автоматизовано відкривати цю сторінку в тестах.

Пояснення основних методів Playwright:

• $$eval(selector, callback) — цей метод шукає всі елементи на сторінці, що відповідають заданому селектору, і викликає на них функцію зворотного виклику, яка повертає необхідні дані (в даному випадку, текстові значення).
• this.page.goto(url) — перехід на іншу сторінку сайту, в даному випадку на сторінку кошика.

checkout.page.ts

Клас CheckoutPage відповідає за взаємодію з елементами на сторінці оформлення замовлення, такими як заповнення форми з особистими даними та завершення процесу оформлення замовлення.

Оголошення класу:

export class CheckoutPage {
private page: Page;
private firstNameInput = ‘#first-name’;
private lastNameInput = ‘#last-name’;
private postalCodeInput = ‘#postal-code’;
private continueButton = ‘#continue’;
private finishButton = ‘#finish’;

• page — об’єкт сторінки, з якою здійснюються взаємодії.
• firstNameInput — CSS-селектор для поля введення імені.
• lastNameInput — CSS-селектор для поля введення прізвища.
• postalCodeInput — CSS-селектор для поля введення поштового індексу.
• continueButton — CSS-селектор для кнопки продовження після введення особистих даних.
• finishButton — CSS-селектор для кнопки завершення оформлення замовлення.