Ми вже знаємо що таке Node.js, WebSocket, ієрархія браузера і fixtures. Час написати перший реальний тест — і ти побачиш як всі ці концепти з’єднуються разом.

Базовий тест складається з трьох частин: імпорт test і expect з Playwright, оголошення тесту через функцію test() з назвою і async функцією, і деструктуризація fixtures { page } — саме тут ми “просимо” Playwright дати нам готову вкладку.

Зверни увагу на await перед кожною дією — Playwright асинхронний, і без await наступний рядок виконається не чекаючи завершення попереднього.

TypeScript

import { test, expect } from '@playwright/test';

test('should display homepage title', async ({ page }) => {
  await page.goto('https://example.com');
  
  await expect(page).toHaveTitle(/Example Domain/);
  
  const heading = page.locator('h1');
  await expect(heading).toBeVisible();
  await expect(heading).toHaveText('Example Domain');
});

🔧 TypeScript / JS патерни в цьому прикладіimport { test, expect } from '@playwright/test' — ES modules import з деструктуризацією: беремо конкретні exports з пакету; async ({ page }) => {} — стрілочна async функція; await перед кожною дією — чекаємо завершення асинхронної операції; expect(locator).toBeVisible() — ланцюжок методів (method chaining).

🗣 Як читати вголосІмпортуємо test і expect з пакету Playwright. Викликаємо функцію test, передаємо назву тесту рядком і асинхронну стрілочну функцію — вона деструктурує page з fixtures. Всередині: чекаємо навігацію через page.goto, потім перевіряємо заголовок сторінки через expect(page).toHaveTitle з регулярним виразом. Далі оголошуємо константу heading — це локатор на тег h1 — і перевіряємо що він видимий і має потрібний текст.