Інтерв’юер: …Розкажіть про свій досвід роботи з Playwright. Які завдання ви вирішували за допомогою цього інструменту?

Кандидат: Я використовував Playwright для автоматизації тестів у браузері. В основному, я створював end-to-end тести для вебзастосунків, використовуючи TypeScript і Playwright. Основна частина роботи полягала в тестуванні інтерфейсів користувача та взаємодій з елементами сторінки, такими як форми, кнопки, посилання. Також налаштовував тести для різних браузерів (Chromium, Firefox, WebKit).

Технічні питання:

Інтерв’юер: Як ви організовуєте структуру тестів з використанням Page Object Model у Playwright? Чому POM важлива?

Кандидат: У Page Object Model (POM) ми створюємо класи для кожної сторінки або компонента, де зберігаємо селектори та методи для взаємодії з елементами сторінки. Це робить код тестів більш зрозумілим, зменшує дублювання та полегшує підтримку. Кожен тест використовує методи з цих класів, щоб не взаємодіяти безпосередньо з селекторами.

Наприклад:

class LoginPage {
private usernameField = this.page.locator(‘#username’);
private passwordField = this.page.locator(‘#password’);
private loginButton = this.page.locator(‘button[type=»submit»]’);

constructor(private page: Page) {}

async login(username: string, password: string) {
await this.usernameField.fill(username);
await this.passwordField.fill(password);
await this.loginButton.click();
}
}

Інтерв’юер: Як ви обробляєте асинхронні операції в тестах Playwright? Наведіть приклад.

Кандидат: У Playwright більшість дій є асинхронними, і вони повертають проміси. Ми можемо використовувати await для очікування завершення дій. Наприклад:

const page = await browser.newPage();
await page.goto(‘https://test.com’);
await page.fill(‘input[name=»username»]’, ‘testuser’);
await page.click(‘button[type=»submit»]’);
const response = await page.waitForResponse((response) =>
response.url().includes(‘/api/auth’) && response.status() === 200
);
console.log(await response.json());

Інтерв’юер: Як можна зробити тести в Playwright більш надійними та стійкими до змін в UI?

Кандидат: Щоб зробити тести більш надійними, можна:

• • Використовувати стабільні селектори: замість залежності від класів і id, які можуть змінитися, можна використовувати текстові селектори або атрибути data-testid.
  • Очікувати не тільки елемент, але й його стан (наприклад, видимість, активність), використовуючи методи waitForSelector, waitForFunction.
  • Використовувати механізм перехоплення мережевих запитів для перевірки коректної роботи API.

Практичне завдання:

Інтерв’юер: Уявіть, що вам потрібно протестувати форму логіна. Вам необхідно перевірити, що:

1. При введенні некоректних даних з’являється повідомлення про помилку.
2. При коректному логіні відбувається редирект на головну сторінку.

Як би ви написали такий тест?

Кандидат:

import { test, expect } from ‘@playwright/test’;

test(‘Login form validation’, async ({ page }) => {
// Відкриваємо сторінку логіна
await page.goto(‘https://example.com/login’);

// Вводимо некоректні дані
await page.fill(‘#username’, ‘wronguser’);
await page.fill(‘#password’, ‘wrongpassword’);
await page.click(‘button[type=»submit»]’);

// Перевіряємо, що з’являється повідомлення про помилку
const errorMessage = await page.locator(‘.error-message’);
await expect(errorMessage).toBeVisible();
await expect(errorMessage).toHaveText(‘Invalid username or password’);

// Вводимо коректні дані
await page.fill(‘#username’, ‘correctuser’);
await page.fill(‘#password’, ‘correctpassword’);
await page.click(‘button[type=»submit»]’);

// Перевіряємо редирект на головну сторінку
await expect(page).toHaveURL(‘https://example.com/dashboard’);
});