Playwright Interview Guide

import { chromium } from 'playwright';
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');

┌─────────────────────────────┐
│       Playwright Test        │   test(), expect(), fixtures,
│                               │   hooks, workers, retries,
│                               │   projects, reporters
└──────────────┬────────────────┘
               │ використовує
               ▼
┌─────────────────────────────┐
│   Browser Automation API     │   BrowserType, Browser,
│                               │   BrowserContext, Page, Locator
└─────────────────────────────┘

Playwright Test Runner
        │
        ├── Worker 1 (окремий Node.js процес)
        │        └── Browser (запускається лише якщо тест його попросив)
        │              └── BrowserContext (новий для кожного тесту)
        │                    └── Page
        │
        └── Worker 2 (окремий Node.js процес)
                 └── Browser
                       └── BrowserContext
                             └── Page

// ══════════════════════════════════════════════════════════════════
// Node.js процес (твій тест)        Браузер (окремий процес)
// ══════════════════════════════════════════════════════════════════
//
// const expected = 48; ──────────── // expected тут не існує!
// const page = ...    ◄──WebSocket──► window.dataLayer = [...]
// await page.click()  ──"клікни"──► document.querySelector(...)  
// await page.evaluate() ──код──────► виконується тут
//                      ◄──результат─ повертається в Node.js
//
// Все що є в Node.js — недоступне в браузері і навпаки
// Єдиний міст — WebSocket, через який Playwright передає команди

// ── HTTP — нове з'єднання на кожен запит ─────────────────────────
//
// Клієнт         Сервер
// ───────        ──────
// "GET /page" ──────►  з'єднання відкрилось
// ◄────── HTML         з'єднання закрилось
//
// "GET /api/data" ───► нове з'єднання
// ◄──── JSON           закрилось
//
// Кожен запит = відкрити + закрити з'єднання

// ── WebSocket — одне з'єднання на весь час ───────────────────────
//
// Клієнт         Сервер
// ───────        ──────
// "привіт" ────────►   з'єднання відкрилось — І ЛИШАЄТЬСЯ ВІДКРИТИМ
// ◄──── "привіт"
// "клікни .btn" ───►   (те саме з'єднання)
// ◄──── "ok"
// "заповни #input" ►   (те саме з'єднання)
// ◄──── "ok"
// ...                  з'єднання закривається тільки в кінці

// Ти пишеш звичайний код тесту:
await page.goto('/products');
await page.locator('.add-to-cart').click();
await page.fill('#promo', 'SAVE10');

// Під капотом Playwright надсилає через WebSocket команди браузеру:
// → { method: "Page.navigate", params: { url: "/products" } }
// ← { result: { frameId: "..." } }
//
// → { method: "DOM.querySelector", params: { selector: ".add-to-cart" } }
// ← { result: { nodeId: 42 } }
//
// → { method: "Input.dispatchMouseEvent", params: { type: "click", ... } }
// ← { result: {} }
//
// Всі ці повідомлення йдуть через ОДНЕ WebSocket з'єднання
// Це і є Chrome DevTools Protocol (CDP) — мова на якій Playwright говорить з браузером

// Окрема тема: WebSocket на самій сторінці
// Якщо сторінка використовує WebSocket для реалтайм даних (чат, тікери) —
// Playwright дозволяє слухати ці з'єднання через page.on('websocket')

test('WebSocket отримує оновлення ціни', async ({ page }) => {
  const wsMessages: string[] = [];

  // Підписуємось на WebSocket з'єднання сторінки
  page.on('websocket', ws => {
    console.log('WS відкрито:', ws.url());

    // Слухаємо фрейми які приходять від сервера
    ws.on('framereceived', event => {
      wsMessages.push(event.payload as string);
    });

    ws.on('close', () => console.log('WS закрито'));
  });

  await page.goto('/prices');

  // Чекаємо поки прийде повідомлення про ціну
  // ✅ Правильно: wsMessages живе в Node.js — перевіряємо через expect.poll
  await expect.poll(() => wsMessages.length, { timeout: 10_000 })
    .toBeGreaterThan(0);
  // ❌ НЕ ПРАВИЛЬНО: window.wsMessages не існує в браузері!
  // await page.waitForFunction(() => (window as any).wsMessages?.length > 0);
  // wsMessages — це змінна Node.js, вона недоступна в контексті браузера

  // Перевіряємо вміст WebSocket повідомлення
  const priceUpdate = JSON.parse(wsMessages[0]);
  expect(priceUpdate).toHaveProperty('price');
});

Зовнішня програма (Playwright, DevTools)
        ↓ CDP через WebSocket
   Браузер (Chrome engine)
        ↓ виконує JS
   Код аплікейшину (React, ванільний JS)

// Коли ти пишеш звичайний Playwright код:
await page.goto('https://myshop.com');
await page.locator('.add-to-cart').click();

// Playwright під капотом надсилає CDP команди через WebSocket:
// → { "method": "Page.navigate", "params": { "url": "https://myshop.com" } }
// ← { "result": { "frameId": "abc123" } }
//
// → { "method": "DOM.querySelector", "params": { "selector": ".add-to-cart" } }
// ← { "result": { "nodeId": 42 } }
//
// → { "method": "Input.dispatchMouseEvent", "params": { "type": "click" } }
// ← { "result": {} }
//
// Ти цього не бачиш — Playwright робить це автоматично

// Зазвичай CDP не треба викликати напряму — Playwright все робить сам
// Але для просунутих речей є прямий доступ:

const client = await page.context().newCDPSession(page);
// ↑ відкриваємо CDP сесію для конкретної вкладки

// Вмикаємо domain Performance і отримуємо метрики
await client.send('Performance.enable');
const { metrics } = await client.send('Performance.getMetrics');
console.log(metrics); // JSHeapUsedSize, LayoutCount, TaskDuration...

// Емулюємо мобільну мережу через CDP
await client.send('Network.emulateNetworkConditions', {
  offline: false,
  downloadThroughput: 1.5 * 1024 * 1024 / 8, // 1.5 Mbps
  uploadThroughput: 750 * 1024 / 8,
  latency: 40,
});

// Ієрархія, яку будує Playwright під капотом:
// Browser  → один процес браузера (Chromium/Firefox/WebKit)
//   └─ BrowserContext → ізольована "профіль"-сесія (cookies, storage, кеш)
//        └─ Page → одна вкладка всередині цього контексту

test('приклад', async ({ page }: { page: Page }) => {
  // page тут — вже готова вкладка, Playwright сам:
  // 1. запустив Browser (або перевикористав з пулу)
  // 2. створив новий ізольований BrowserContext саме для цього тесту
  // 3. відкрив у ньому одну Page і передав її як fixture

  await page.goto('/login');
  await page.fill('#email', 'test@test.com');
});

// Чому це важливо для ізоляції тестів:
test('тест А логіниться', async ({ page }) => {
  await page.goto('/login'); // свій BrowserContext, свої cookies
});
test('тест Б — гість', async ({ page }) => {
  await page.goto('/'); // НЕ бачить cookies тесту А — інший BrowserContext
});

// test() — функція з параметрами "за домовленістю", як DI
test('приклад', async ({ page }) => {
  // "page" — ключ в об'єкті fixtures, Playwright розпізнає
  // це ім'я і підставляє відповідний готовий ресурс
  await page.goto('/login');
});

// Тобі НЕ треба робити це вручну:
// const browser = await chromium.launch();
// const context = await browser.newContext();
// const page = await context.newPage();
// ... тест ...
// await page.close();
// await context.close();
// Playwright робить усе це сам, і сам же прибирає після тесту

// Вбудовані фікстури з різним життєвим циклом:
// page    → нова для КОЖНОГО тесту
// context → нова для КОЖНОГО тесту (page живе всередині неї)
// browser → одна на ВЕСЬ файл / прогін (дорого перестворювати)

// ✅ З фікстурами — ти просто називаєш що потрібно
test('мій тест', async ({ page, context, browser }) => {
  // page, context, browser вже готові — ти їх не створювала
  await page.goto('/shop');
});
// Після тесту Playwright сам закриває page і context. Крапка.

// ❌ Без фікстур — ти б мала писати це вручну КОЖНОГО РАЗУ:
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
// ... тест ...
await page.close();    // і не забути! а якщо тест впав посередині?
await context.close(); // тоді close не виконається, і браузер лишиться висіти
await browser.close();

// ─────────────────────────────────────────────────────
// Різний час життя фікстур — це теж частина "підготовки і прибирання":
//
// browser  — одна на ВЕСЬ тестовий прогін (або файл)
//            запустити Chrome — дорого (секунди)
//            тому Playwright переюзовує один процес
//
// context  — нова для КОЖНОГО тесту
//            це ізоляція: свої cookies, localStorage, cache
//            дешево створити (мілісекунди)
//
// page     — нова для КОЖНОГО тесту (живе всередині context)
//            одна вкладка = один тест

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');
});

const user = { name: 'Iuliia', age: 30 }; // об'єкт в пам'яті

// Серіалізація — перетворюємо в рядок (JSON текст)
const text = JSON.stringify(user);
// text = '{"name":"Iuliia","age":30}'
// тепер можна зберегти у файл або відправити через мережу

// Десеріалізація — перетворюємо рядок назад в об'єкт
const obj = JSON.parse(text);
// obj = { name: 'Iuliia', age: 30 }

const expected = 48; // змінна в Node.js

// Playwright серіалізує 48 в JSON і передає через WebSocket в браузер
// Браузер десеріалізує і отримує число 48 як аргумент функції
await page.waitForFunction(
  (count) => document.querySelectorAll('.product-card').length >= count,
  expected // ← серіалізується і передається в браузер
);

// Closure НЕ працює через межу процесів — бо функція переїжджає в браузер
// а змінна expected залишається в Node.js (різні процеси, різна пам'ять)
await page.waitForFunction(
  () => document.querySelectorAll('.product-card').length >= expected // ❌ undefined!
);

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Без spread — масив всередині масиву
const bad = [arr1, arr2];          // [[1,2,3], [4,5,6]]

// Зі spread — розгортаємо вміст
const good = [...arr1, ...arr2];   // [1, 2, 3, 4, 5, 6]

const defaults = { color: 'black', size: 'M', price: 100 };
const override = { price: 200, sale: true };

// Spread розгортає поля і вставляє їх
const result = { ...defaults, ...override };
// { color: 'black', size: 'M', price: 200, sale: true }
//                              ↑
// price перезаписаний бо override йде після defaults

// devices['iPhone 14'] — це готовий об'єкт:
// {
//   viewport: { width: 390, height: 844 },
//   userAgent: 'Mozilla/5.0 ...',
//   isMobile: true,
//   hasTouch: true,
// }

// Spread розгортає всі поля в наш об'єкт use:
use: { ...devices['iPhone 14'], locale: 'uk-UA' }
// {
//   viewport: { width: 390, height: 844 },
//   userAgent: 'Mozilla/5.0 ...',
//   isMobile: true,
//   hasTouch: true,
//   locale: 'uk-UA',  ← наше додаткове поле
// }
// Замість копіювати всі поля вручну — розгортаємо готовий профіль

// Без try/catch — помилка зупиняє все
const data = JSON.parse('це не JSON'); // ❌ кидає SyntaxError
console.log('цей рядок не виконається');

// З try/catch — перехоплюємо і продовжуємо
try {
  const data = JSON.parse('це не JSON');
} catch (e) {
  console.log('не вдалось розпарсити:', e.message);
}
console.log('цей рядок виконається'); // ✅

try {
  // код який може кинути помилку
} catch (e) {
  // що робити якщо помилка сталась
  // e — об'єкт помилки: e.message, e.name, e.stack
} finally {
  // виконується ЗАВЖДИ — і при помилці і без
  // типово для закриття з'єднань, файлів тощо
}

// Playwright кидає TimeoutError якщо елемент не з'явився
try {
  await page.waitForSelector('.success-banner', { timeout: 3000 });
  console.log('операція успішна');
} catch (e) {
  // .success-banner не з'явився за 3 секунди — продовжуємо
  console.log('операція не завершилась вчасно');
}

// ⚠️ Коли НЕ треба try/catch:
// Більшість методів Playwright вже кидають зрозумілі помилки
// і тест падає з чітким повідомленням.
// try/catch потрібен тільки коли хочеш ВІДНОВИТИСЬ після помилки
// і продовжити тест, а не дати йому впасти.

// ── Про .rejects.toThrow() ──────────────────────────────────────
// В e-commerce UI тестах майже ніколи не потрібен.
// Неавторизований юзер на /account → додаток показує UI помилку:
await page.goto('/account');
await expect(page).toHaveURL('/login');           // редирект
await expect(page.getByText('Please sign in')).toBeVisible(); // або повідомлення
// Тестуємо те що бачить юзер — жодного rejects.toThrow()
//
// .rejects.toThrow() — для тестування JS функцій які КИДАЮТЬ виключення:
await expect(getUser('')).rejects.toThrow('ID is required'); // unit тест

// ✅ Семантичні — шукають за змістом і роллю, стійкі до змін верстки

page.getByRole('button', { name: 'Submit' })
// Шукає елемент з ARIA роллю 'button' і текстом 'Submit'
// ARIA роль — це семантичне значення елемента для screen readers

page.getByLabel('Email address')
// Шукає <input> який пов'язаний з лейблом "Email address"
// В HTML: <label for="email">Email address</label><input id="email">
// Атрибут for у лейблі вказує на id інпута — ось цей зв'язок і шукає getByLabel

page.getByPlaceholder('Enter email')
// Шукає input з атрибутом placeholder="Enter email"

page.getByText('Welcome back')
// Шукає будь-який елемент що містить цей текст

page.getByTestId('submit-btn')
// Шукає елемент з атрибутом data-testid="submit-btn"
// Розробники додають його спеціально для тестів
// За замовчуванням атрибут 'data-testid', але можна змінити в конфізі:
// defineConfig({ use: { testIdAttribute: 'data-qa' } })
// Тоді getByTestId('submit-btn') шукатиме data-qa="submit-btn"

// ⚠️ Допустимі — CSS і XPath, але крихкіші
page.locator('.btn-primary')             // CSS клас може змінитись
page.locator('xpath=//button[@type="submit"]') // XPath складніше читати

// ❌ Уникати — залежать від структури DOM
page.locator('.sc-a8f9b2 > div:nth-child(3)') // впаде при будь-якому рефакторингу

// ❌ Якщо на сторінці кілька .product-card — впаде з помилкою
await page.locator('.product-card').click();
// Error: strict mode violation: locator resolved to 12 elements

// ✅ Звужуємо до конкретного елементу
await page.locator('.product-card').first().click();
await page.locator('.product-card').nth(2).click();
await page.locator('.product-card').filter({ hasText: 'Trench Coat' }).click();

// ✅ Сучасний спосіб — композиція локаторів через filter()
// filter({ hasText }) — картка що МІСТИТЬ цей текст будь-де всередині
await page.getByRole('listitem')
  .filter({ hasText: 'Trench Coat' })
  .getByRole('button', { name: 'Add to Bag' })
  .click();

// filter({ has: locator }) — картка що МІСТИТЬ інший елемент
// "знайди картку в якій є бейдж Sale, і клікни в ній кнопку"
await page.locator('.product-card')
  .filter({ has: page.locator('.sale-badge') })
  .getByRole('button', { name: 'Add to Bag' })
  .click();

// filter({ hasNot }) / filter({ hasNotText }) — інверсія
const inStock = page.locator('.product-card')
  .filter({ hasNotText: 'Out of stock' });

// ✅ Або працюємо з усім списком свідомо (count/all)
const count = await page.locator('.product-card').count();

// ── ElementHandle ── це ФОТОГРАФІЯ елемента, знята прямо зараз ──
// page.$() знаходить елемент НЕГАЙНО і повертає посилання на конкретний
// DOM-вузол — той, що існує В ЦЮ МІЛІСЕКУНДУ в пам'яті браузера
const handle = await page.$('.buy-button');

// Уяви: React перерендерив компонент між цим рядком і наступним.
// Старий DOM-вузол знищений, новий створений на його місці.
// Але handle все ще тримає посилання на СТАРИЙ, якого вже немає.
await handle?.click(); // ❌ клік на "привид" — помилка або нічого не відбувається

// ── Locator ── це ІНСТРУКЦІЯ як знайти елемент ──
// page.locator() НЕ шукає елемент зараз. Він просто запам'ятовує
// "рецепт": знайди елемент з класом .buy-button
const locator = page.locator('.buy-button'); // нічого не відбулось, немає await!

// Тільки тут Playwright реально шукає елемент — заново, прямо зараз
// і одразу чекає, поки він стане видимим і клікабельним (auto-waiting)
await locator.click(); // ✅ завжди знаходить актуальний елемент

// ❌ Старий стиль (Puppeteer-era) — legacy API, discouraged:
const btn = await page.$('button.submit');   // $ повертає ElementHandle | null
const btns = await page.$$('li.item');         // $$ повертає ElementHandle[]
await btn?.click();                              // ?. бо може бути null

// ✅ Сучасний стиль — завжди так, без виключень:
const btn = page.locator('button.submit');    // без await — locator синхронний!
const btns = page.locator('li.item');          // теж без await
await btn.click();                               // await тільки тут, на дії

// Важливо: page.locator() — синхронний, без await
// await з'являється тільки коли викликаєш дію: .click(), .fill(), .toBeVisible()
// Якщо хтось пише "await page.locator(...)" — це теж помилка розуміння

// ✅ Auto-waiting — просто клікаємо, Playwright чекає сам
await page.getByRole('button', { name: 'Save' }).click();
// Playwright перевіряє: кнопка є в DOM? видима? не анімується? активна?
// Тільки коли всі умови виконані — клікає

// ── Коли waitFor() потрібен явно ────────────────────────────────

// 1. Чекаємо навігацію на іншу сторінку
await page.waitForURL('**/dashboard');
// Після кліку на Login — чекаємо поки URL зміниться на /dashboard

// 2. Чекаємо стан завантаження
await page.waitForLoadState('domcontentloaded');
// 'domcontentloaded' — HTML завантажений і розібраний
// 'networkidle' — немає активних мережевих запитів 500мс (обережно, може зависнути)

// 3. Чекаємо елемент-індикатор (не для дії, а для перевірки стану)
await page.locator('.toast-success').waitFor({ state: 'visible' });
// Toast з'явився — значить дія пройшла успішно
await page.locator('.loading-spinner').waitFor({ state: 'hidden' });
// Спінер зник — завантаження завершилось

// 4. Чекаємо JS умову в браузері (детальніше в Middle картці waitForFunction)
await page.waitForFunction(() => (window as any).dataLayer?.length > 0);
// Немає DOM-елемента — перевіряємо напряму через JavaScript

// ❌ Антипатерн: фіксована пауза "на удачу"
await page.click('.add-to-cart');
await page.waitForTimeout(2000); // чекаємо 2с і сподіваємось, що toast встиг зʼявитись
await expect(page.locator('.toast')).toBeVisible();

// ✅ Чекаємо саме той стан, який нам потрібен
await page.click('.add-to-cart');
await expect(page.locator('.toast')).toBeVisible(); // сама ретраїться, без зайвої затримки

// ❌ Здається надійним, але офіційно НЕ рекомендовано для SPA
await page.goto('/product/123');
await page.waitForLoadState('networkidle');
// Якщо сторінка має polling, analytics beacons, чат-віджет з
// періодичними запитами — "idle" (0 запитів 500мс) може НІКОЛИ не настати

// ✅ Чекаємо конкретний бізнес-сигнал готовності
await page.goto('/product/123');
await expect(page.locator('[data-testid="pdp-price"]')).toBeVisible();

// waitForResponse — чекаємо конкретний запит, але:
// ⚠️ НЕ гарантує що UI вже відрендерив відповідь!
// Потрібно додатково чекати елемент або використовувати Promise.all
// щоб підписатись ДО дії яка тригерить запит:
const [response] = await Promise.all([
  page.waitForResponse(resp => resp.url().includes('/api/product')),
  page.locator('.load-more').click(), // дія що тригерить запит
]);

globalTimeout (весь прогін)
    ↓
Конфіг: timeout / expect.timeout / use.actionTimeout / use.navigationTimeout
    ↓ перевизначається
test.describe.configure({ timeout: 60_000 })     ← рівень describe
    ↓ перевизначається
test('...', { timeout: 60_000 }, async () => {}) ← рівень тесту
test.setTimeout(60_000)                          ← всередині тесту
    ↓ перевизначається
await locator.click({ timeout: 10_000 })         ← рівень окремої дії
await expect(locator).toBeVisible({ timeout: 10_000 })  ← рівень assertion

// Чим конкретніше — тим вищий пріоритет. Найточніший виграє.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 1. TEST TIMEOUT — весь тест має вкластись у цей час
  timeout: 60_000, // 60 секунд (за замовч. 30с)

  // 2. EXPECT TIMEOUT — скільки web-first assertions ретраяться
  expect: {
    timeout: 10_000, // 10 секунд (за замовч. 5с)
  },

  use: {
    // 3. ACTION TIMEOUT — скільки чекати на кожну окрему дію
    actionTimeout: 15_000, // 15 секунд (за замовч. немає, ділить з test timeout)

    // 4. NAVIGATION TIMEOUT — окремо для goto(), reload(), waitForNavigation()
    navigationTimeout: 30_000, // 30 секунд
  },
});

// Override test timeout для одного повільного тесту
test('повільний e2e сценарій', async ({ page }) => {
  test.setTimeout(120_000); // 2 хвилини тільки для цього тесту
  await page.goto('/checkout');
  // ... довгий сценарій ...
});

// Override action timeout для конкретної повільної дії
await page.locator('.heavy-animation-btn').click({ timeout: 20_000 });
await page.locator('#slow-input').fill('value', { timeout: 10_000 });

// Override expect timeout для конкретного assertion
await expect(page.locator('.lazy-loaded-image'))
  .toBeVisible({ timeout: 15_000 }); // ця картинка грузиться довго — даємо більше часу

// Override для групи тестів через describe
test.describe('повільні інтеграційні тести', () => {
  test.setTimeout(90_000); // всі тести в цьому describe отримають 90с

  test('тест 1', async ({ page }) => { /* ... */ });
  test('тест 2', async ({ page }) => { /* ... */ });
});

// ── Приклад 1: впав expect timeout ──
// TimeoutError: expect(locator).toBeVisible() timeout 5000ms exceeded
// → елемент не зʼявився за 5 секунд
// → або елемент взагалі відсутній, або треба збільшити expect timeout
await expect(page.locator('.modal')).toBeVisible(); // ← тут впав

// ── Приклад 2: впав action timeout ──
// TimeoutError: page.click: timeout 30000ms exceeded
// → елемент знайдений, але не став клікабельним (перекритий, disabled, анімується)
await page.locator('.submit-btn').click(); // ← тут впав

// ── Приклад 3: впав test timeout ──
// Test timeout of 30000ms exceeded
// → весь тест не вклався — можливо завис waitForEvent або нескінченний цикл
// → перевір чи немає missing await, або збільш test timeout

// ❌ Одноразова перевірка: isVisible() повертає стан ЗАРАЗ, в цю мілісекунду
const visible = await page.locator('.toast-message').isVisible();
expect(visible).toBe(true); // flaky: toast міг ще не встигнути зʼявитись

// ✅ Web-first assertion: сама себе ретраїть до 5 секунд (за замовчуванням)
await expect(page.locator('.toast-message')).toBeVisible();
// Playwright перевіряє стан раз у кілька десятків мс, поки умова
// не стане true АБО не вийде timeout — тому не треба ручних wait

// ── toBeAttached() — елемент Є В DOM (видимість не важлива) ─────
await expect(locator).toBeAttached();
// ✅ пройде для: <div style="display:none">текст</div>
// Елемент існує в дереві, але юзер його не бачить

// ── toBeVisible() — елемент є В DOM І ВИДИМИЙ ───────────────────
await expect(locator).toBeVisible();
// ❌ впаде для: <div style="display:none">
// Видимий = має непорожній bounding box і не має visibility:hidden

// ── toBeHidden() — НЕ видимий: або прихований, АБО взагалі не в DOM
await expect(locator).toBeHidden();
// ✅ пройде і для display:none, і для повністю відсутнього елемента
// ⚠️ Головна пастка: toBeHidden() != not.toBeVisible()? Ні, це те саме.
// Але toBeHidden() != not.toBeAttached() — різні речі!

// ── Перевірити що елемента НЕМАЄ в DOM взагалі ──────────────────
await expect(locator).not.toBeAttached();  // точна перевірка "видалений з DOM"
await expect(locator).toHaveCount(0);      // те саме іншими словами

// ── toHaveCount() — єдиний що НЕ падає на strict mode ───────────
await expect(page.locator('.product-card')).toHaveCount(12);
// toBeVisible() на 12 елементах → strict mode violation
// toHaveCount() працює зі списком за задумом

test('product page validations', async ({ page }) => {
  await page.goto('/product/123');

  // Зупиняє тест при першій помилці
  await expect(page.locator('h1')).toBeVisible();

  // Soft: продовжує навіть якщо ці впадуть
  await expect.soft(page.locator('.price')).toBeVisible();
  await expect.soft(page.locator('.rating')).toBeVisible();
  await expect.soft(page.locator('.stock-badge')).toHaveText(/In Stock/);

  // Всі помилки виведуться разом
});

await page.waitForFunction(() => {
  return Array.isArray((window as any).dataLayer)
    && (window as any).dataLayer.length > 0;
});

const expected = 48; // змінна в Node.js

// ❌ НЕ ПРАЦЮЄ — браузер не бачить Node.js змінні через closure
await page.waitForFunction(() => {
  return document.querySelectorAll('.product-card').length >= expected; // expected → undefined!
});

// ✅ ПРАВИЛЬНО — передаємо як другий аргумент
// Playwright серіалізує 48 в JSON і передає в браузер як параметр функції
await page.waitForFunction(
  (expectedCount) => {                  // параметр функції
    return document.querySelectorAll('.product-card').length >= expectedCount;
  },
  48                                    // ← стане значенням expectedCount
);

// async потрібен якщо всередині браузера треба зробити fetch
await page.waitForFunction(async () => {
  const response = await fetch('/api/status'); // fetch — браузерний API
  const data = await response.json();
  return data.status === 'ready';
});
// В більшості випадків async не потрібен — window/document/CSS синхронні

// GTM або analytics скрипт завантажується асинхронно
// Якщо перевірити window.dataLayer одразу — він може ще не існувати
test('GTM ініціалізувався', async ({ page }) => {
  await page.goto('/product/trench-coat');

  // ❌ evaluate() — виконується ОДИН РАЗ прямо зараз
  // Якщо скрипт ще не завантажився — поверне undefined
  const ready = await page.evaluate(() => (window as any).dataLayer);

  // ✅ waitForFunction() — повторює кожні ~100мс поки не true
  await page.waitForFunction(() => {
    return Array.isArray((window as any).dataLayer)
      && (window as any).dataLayer.length > 0;
  });

  // Тепер точно є — дістаємо для перевірки
  const events = await page.evaluate(() => (window as any).dataLayer);
  console.log(events); // [{ event: 'page_view', ... }]
});

test('подія add_to_cart зафіксована', async ({ page }) => {
  await page.goto('/product/trench-coat');
  await page.locator('button.add-to-cart').click();

  // Чекаємо саме цю подію — не просто що dataLayer існує
  await page.waitForFunction(() => {
    const dl = (window as any).dataLayer || [];
    return dl.some((e: any) => e.event === 'add_to_cart');
  });

  // Дістаємо подію і перевіряємо деталі
  const event = await page.evaluate(() =>
    (window as any).dataLayer.find((e: any) => e.event === 'add_to_cart')
  );
  expect(event.ecommerce.items[0].item_id).toBe('SKU-123');
});

test('модальне вікно повністю відкрилось', async ({ page }) => {
  await page.goto('/products');
  await page.locator('.quick-view').click();

  // toBeVisible() → true одразу коли opacity > 0
  // але ми хочемо дочекатись коли анімація ЗАВЕРШИЛАСЬ (opacity = 1)
  await page.waitForFunction(() => {
    const modal = document.querySelector('.modal');
    return getComputedStyle(modal!).opacity === '1';
  });

  // Анімація завершена — скріншот без змазаного переходу
  await expect(page.locator('.modal')).toHaveScreenshot('modal-open.png');
});

test('список товарів повністю завантажений', async ({ page }) => {
  await page.goto('/women/dresses');

  // Передаємо 48 як аргумент з Node.js в браузер
  // Чекаємо конкретну кількість — не просто появу першого елемента
  await page.waitForFunction(
    (expectedCount) => {
      const items = document.querySelectorAll('.product-card');
      return items.length >= expectedCount;
    },
    48,                              // ← аргумент з Node.js
    { timeout: 10000, polling: 500 } // перевіряємо кожні 500мс
  );

  const count = await page.locator('.product-card').count();
  expect(count).toBe(48);
});

// polling: 'raf' — перевіряти на кожен requestAnimationFrame
// Ідеально для анімацій — синхронізовано з браузерним render loop
await page.waitForFunction(
  () => getComputedStyle(document.querySelector('.hero')!).opacity === '1',
  undefined,
  { polling: 'raf' }
);

// Передаємо аргумент з Node.js в браузер — той самий патерн що й у evaluate()
const expectedCount = 48;

await page.waitForFunction(
  (count) => {
    // count прийшов з Node.js — доступний тут в браузері
    const items = document.querySelectorAll('.product-card');
    return items.length >= count;
  },
  expectedCount, // ← передаємо як другий аргумент
  { timeout: 10000, polling: 500 } // таймаут 10с, перевіряємо кожні 500мс
);

// polling: 'raf' — перевіряти на кожен requestAnimationFrame (для анімацій)
await page.waitForFunction(
  () => {
    const el = document.querySelector('.animated-element');
    return getComputedStyle(el!).opacity === '1';
  },
  undefined, // аргумент не передаємо
  { polling: 'raf' } // синхронізовано з браузерним render loop
);

// Для простих умов є зручніша альтернатива — expect.poll()
// Вона ретраїть довільну функцію як web-first assertion

// ✅ Коротше і читабельніше ніж waitForFunction для простих перевірок
await expect.poll(async () => {
  return await page.evaluate(() => (window as any).analyticsReady);
}, { timeout: 5000, intervals: [100, 250, 500] }).toBe(true);

// Різниця між waitForFunction і expect.poll():
// waitForFunction — функція виконується В БРАУЗЕРІ, має доступ до window/DOM
// expect.poll()  — функція виконується В NODE.JS, може робити будь-що: API запити, читати файли
await expect.poll(async () => {
  const response = await request.get('/api/status');
  return (await response.json()).status;
}).toBe('ready'); // ретраїть API запит поки не отримає 'ready'

// Чекаємо поки API поверне правильний статус
await expect.poll(
  async () => {
    const res = await page.request.get('/api/jobs/abc123');
    return (await res.json()).status;
  },
  {
    message: 'Job should complete within 30s',
    timeout: 30_000,
    intervals: [500, 1000, 2000, 5000], // exponential backoff
  }
).toBe('completed');

// Чекаємо поки email прийде (через mailhog API)
await expect.poll(
  async () => {
    const res = await page.request.get('http://mailhog:8025/api/v2/messages');
    return (await res.json()).total;
  },
  { timeout: 15_000 }
).toBeGreaterThan(0);

// helpers/assertions.ts — просто функція
function expectValidPrice(price: string) {
  expect(price).toMatch(/^\£\d+\.\d{2}$/);
  expect(price).not.toBe('');
  expect(parseFloat(price.replace('£', ''))).toBeGreaterThan(0);
}

// В тесті — те саме що custom matcher, але простіше:
expectValidPrice(price);

// Helper падає так:
// Expected: match /^\£\d+\.\d{2}$/
// Received: "abc"

// Custom matcher падає так:
// Expected price to be valid product price format
// Received: "abc"

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

expect.extend({
  async toHaveProductPrice(locator: Locator, currency: string) {
    const text = await locator.textContent();
    const priceRegex = new RegExp(`\\${currency}\\d+\\.\\d{2}`);
    const pass = priceRegex.test(text ?? '');

    return {
      pass,
      message: () => pass
        ? `Expected price NOT to match ${currency} format but got: ${text}`
        : `Expected price to match ${currency}XX.XX but got: ${text}`,
    };
  },
});

// TypeScript типи для матчера
declare module '@playwright/test' {
  interface Matchers<R> {
    toHaveProductPrice(currency: string): Promise<R>;
  }
}

// Використання
await expect(page.locator('.price')).toHaveProductPrice('£');
await expect(page.locator('.price')).toHaveProductPrice('€');

// Web Component з shadow root, наприклад кастомний <product-rating>
// <product-rating>         ← звичайний DOM, поза shadow root
//   #shadow-root           ← межа Shadow DOM
//     <span class="stars">★★★★☆</span>  ← всередині shadow root
// </product-rating>

// ✅ Playwright локатор проникає в shadow DOM автоматично
// Спочатку знаходимо host елемент, потім шукаємо всередині shadow root
await expect(
  page.locator('product-rating').locator('.stars')
).toHaveText('★★★★☆');
// або через getByRole що теж проникає через shadow DOM:
await expect(
  page.locator('product-rating').getByRole('img', { name: '4 stars' })
).toBeVisible();

// ❌ В Selenium довелось би явно заходити в shadow root:
// const shadowHost = driver.findElement(By.css('product-rating'));
// const shadowRoot = shadowHost.getShadowRoot();
// const stars = shadowRoot.findElement(By.css('.stars'));

test('login flow', async ({ page, context, request }) => {
  // page — новий Tab в ізольованому контексті
  await page.goto('/');

  // context — BrowserContext для cookies/storage
  await context.addCookies([{ name: 'session', value: 'abc', url: '/' }]);

  // request — API calls без браузера
  const res = await request.get('/api/users/me');
  await expect(res).toBeOK();
});

// Потрібен page — беремо його
loginPage: async ({ page }, use) => { await use(new LoginPage(page)); }

// Нічого не потрібно — порожня деструктуризація
dbConnection: async ({}, use) => { const db = await connectDB(); await use(db); }

import { test as base, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
import { ProductPage } from '../pages/ProductPage';

type MyFixtures = {
  loginPage: LoginPage;
  productPage: ProductPage;
  authenticatedPage: Page;
};

export const test = base.extend<MyFixtures>({
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  },

  authenticatedPage: async ({ page }, use) => {
    // Setup: логін через API (швидше ніж через UI)
    await page.request.post('/api/login', {
      data: { email: 'test@test.com', password: 'pass' }
    });
    await use(page);  // <-- тест виконується тут
    // Teardown: після use()
    await page.request.post('/api/logout');
  },
});

export { expect };

import { test, expect } from '../fixtures';

test('already authenticated', async ({ authenticatedPage, loginPage }) => {
  await authenticatedPage.goto('/profile');
  // вже залогінений, fixture відпрацьовує setup автоматично
});

// З use() — функція приймає use як аргумент
myFixture: async ({}, use) => {
  // setup
  await use(value); // ← тест виконується тут
  // teardown
}

// З yield — функція-генератор "зупиняється" на yield поки тест виконується
myFixture: async function* ({}) {
  // setup
  yield value; // ← тест виконується тут
  // teardown
}

// ── З use() ──────────────────────────────────────────────────────
const test = base.extend({
  dbConnection: async ({}, use) => {
    const db = await connectToDatabase(); // setup
    await use(db);                          // тест виконується тут
    await db.disconnect();                  // teardown
  },
});

// ── З yield — той самий результат ────────────────────────────────
const test = base.extend({
  dbConnection: async function* () {
    const db = await connectToDatabase(); // setup
    yield db;                               // тест виконується тут
    await db.disconnect();                  // teardown
  },
});

// В тесті використовується однаково:
test('тест з БД', async ({ dbConnection }) => {
  const users = await dbConnection.query('SELECT * FROM users');
  expect(users.length).toBeGreaterThan(0);
});

// ❌ З use() — try/finally виглядає незграбно
dbConnection: async ({}, use) => {
  const db = await connectToDatabase();
  try {
    await use(db); // якщо тест впаде з помилкою...
  } finally {
    await db.disconnect(); // ...disconnect виконається в будь-якому разі
  }
},

// ✅ З yield — try/finally читається природньо
dbConnection: async function* () {
  const db = await connectToDatabase();
  try {
    yield db; // тест виконується тут
  } finally {
    await db.disconnect(); // завжди виконається — навіть якщо тест впав
  }
},

// Примітка: Playwright і без try/finally гарантує виконання teardown
// (код після use() або yield завжди виконується)
// try/finally потрібен тільки якщо setup сам може впасти і треба прибрати часткові ресурси

// З yield кілька ресурсів виглядають чисто
testEnvironment: async function* () {
  const db = await connectToDatabase();
  try {
    const server = await startMockServer();
    try {
      const cache = await initCache();
      try {
        yield { db, server, cache }; // тест отримує всі три ресурси
      } finally {
        await cache.flush();        // прибираємо cache першим
      }
    } finally {
      await server.stop();         // потім зупиняємо сервер
    }
  } finally {
    await db.disconnect();         // останнім закриваємо БД
  }
},

// В тесті:
test('інтеграційний тест', async ({ testEnvironment }) => {
  const { db, server, cache } = testEnvironment;
  // ...
});

Worker 1:
  Тест 1 → створити fixture → тест → знищити fixture
  Тест 2 → створити fixture → тест → знищити fixture
  Тест 3 → створити fixture → тест → знищити fixture

Worker 1:
  → створити fixture (один раз)
  Тест 1 → використовує fixture
  Тест 2 → використовує ту саму fixture
  Тест 3 → використовує ту саму fixture
  → знищити fixture (один раз)

type WorkerFixtures = { dbConnection: Database };

export const test = base.extend<{}, WorkerFixtures>({
  // Другий параметр extend<TestFixtures, WorkerFixtures>
  dbConnection: [async ({}, use) => {
    const db = await Database.connect(process.env.DB_URL!);
    await use(db);            // ← одне з'єднання на Worker
    await db.disconnect();   // teardown після всіх тестів воркера
  }, { scope: 'worker' }],   // ← ключовий параметр
});

// Тепер всі тести в файлі використовують одне DB з'єднання
test('query users', async ({ dbConnection }) => {
  const users = await dbConnection.query('SELECT * FROM users');
  expect(users).toHaveLength(10);
});

test('мій тест', async ({ page, myFixture }) => { ... })
//                                  ↑ треба явно попросити

export const test = base.extend({
// ↑ беремо стандартний Playwright test і розширюємо новою фікстурою

  autoLogger: [async ({ page }, use, testInfo) => {
// ↑ назва фікстури. Ніколи не пишемо { autoLogger } в тесті — вона виконується сама
// { page } — інші фікстури які нам потрібні всередині
// use    — функція яку треба викликати щоб "дати місце" тесту
// testInfo — метадані: назва тесту, статус, шлях до файлу

    console.log(`▶ Починаємо: ${testInfo.title}`);
    // ↑ все ДО use() виконується ДО тесту (setup)

    await use(undefined);
    // ↑ НАЙВАЖЛИВІШИЙ рядок. Тут виконується сам тест.
    // undefined бо ми нічого не передаємо в тест
    // Все ДО цього — setup. Все ПІСЛЯ — teardown.

    console.log(`✓ Завершено: ${testInfo.title}`);
    // ↑ все ПІСЛЯ use() виконується ПІСЛЯ тесту (teardown)

  }, { auto: true }],
// ↑ { auto: true } — другий елемент масиву
// Каже Playwright: "запускай це завжди, без оголошення в тесті"
});

// fixtures/base.ts — визначаємо auto fixture один раз
import { test as base } from '@playwright/test';

export const test = base.extend({
  // auto: true — виконується для КОЖНОГО тесту автоматично
  // { auto: true } замість просто значення
  autoLogger: [async ({ page }, use, testInfo) => {
    // Setup — виконується ДО тесту
    console.log(`▶ Починаємо: ${testInfo.title}`);
    const startTime = Date.now();

    // use() — тут виконується сам тест
    await use(undefined); // undefined бо нічого не передаємо в тест

    // Teardown — виконується ПІСЛЯ тесту
    const duration = Date.now() - startTime;
    console.log(`✓ Завершено: ${testInfo.title} (${duration}мс)`);
  }, { auto: true }], // ← ось тут auto: true
});

checkNoJsErrors: [async ({ page }, use) => {
  const errors: Error[] = [];

  page.on('pageerror', error => errors.push(error));
  // ↑ підписуємось ДО use() — тому слухач активний з першої секунди тесту
  // якби підписались ПІСЛЯ use() — вже було б пізно, тест закінчився

  await use(undefined);
  // ↑ тест виконується. errors[] накопичує помилки якщо є

  expect(errors, `JS помилки:
${errors.map(e => e.message).join('
')}`).toHaveLength(0);
  // ↑ ПІСЛЯ тесту — перевіряємо що errors[] порожній
  // другий аргумент expect() — кастомне повідомлення при фейлі
  // якщо помилок не було — рядок проходить, тест завершується нормально
}, { auto: true }],

// Тест НІЧОГО не знає про checkNoJsErrors:
test('відкриваємо PDP', async ({ page }) => {
  await page.goto('/product/trench-coat');
  await expect(page.locator('h1')).toBeVisible();
  // Якщо на сторінці є JS-помилка — тест впаде ПІСЛЯ цього рядка
  // з повідомленням "JS помилки: TypeError: cannot read..."
});

// fixtures/base.ts
export const test = base.extend({
  // Перевіряємо JS-помилки для КОЖНОГО тесту — тест не знає про це
  checkNoJsErrors: [async ({ page }, use) => {
    const errors: Error[] = [];

    // Підписуємось до тесту
    page.on('pageerror', error => errors.push(error));

    // Тест виконується
    await use(undefined);

    // Після тесту — перевіряємо що не було JS-помилок
    expect(
      errors,
      `JS помилки на сторінці:\n${errors.map(e => e.message).join('\n')}`
    ).toHaveLength(0);
  }, { auto: true }],
});

// tests/product.spec.ts — тест не знає про checkNoJsErrors
// але він все одно виконується після кожного тесту
test('відкриваємо PDP', async ({ page }) => {
  await page.goto('/product/trench-coat');
  // Якщо на сторінці є JS-помилки — тест впаде з зрозумілим повідомленням
  // навіть якщо сам тест не перевіряє помилки
});

expensiveSetup: [async ({}, use) => {
  const db = await connectToTestDatabase();
  // ↑ підключились до БД ОДИН РАЗ — до всіх тестів в цьому worker

  await use(undefined);
  // ↑ всі тести в цьому worker виконуються (може бути 20-30 тестів)

  await db.disconnect();
  // ↑ відключились ОДИН РАЗ — після всіх тестів в цьому worker

}, { auto: true, scope: 'worker' }],
// ↑ scope: 'worker' — фікстура живе весь час поки живе worker-процес
// Без scope: 'worker' (тобто scope: 'test' за замовчуванням):
// підключення до БД відкривалось і закривалось би для КОЖНОГО тесту окремо
// З scope: 'worker': одне підключення на всі 20-30 тестів — набагато швидше

export const test = base.extend({
  // Блокуємо GTM і аналітику для ВСІХ тестів автоматично
  // Тести швидші і не залежать від зовнішніх сервісів
  blockAnalytics: [async ({ page }, use) => {
    await page.route(
      '**/{gtm,analytics,hotjar,intercom}*',
      route => route.abort()
    );
    await use(undefined); // тест виконується без аналітики
    // teardown не потрібен — route.unroute() Playwright зробить сам
  }, { auto: true }],

  // Scope: 'test' за замовчуванням — нова для кожного тесту
  // Scope: 'worker' — одна на весь worker-процес (для дорогих ресурсів)
  expensiveSetup: [async ({}, use) => {
    const db = await connectToTestDatabase();
    await use(undefined);
    await db.disconnect();
  }, { auto: true, scope: 'worker' }], // підключення до БД один раз на worker
});

// ❌ Якщо імпортувати з @playwright/test — auto fixtures не спрацюють
// import { test, expect } from '@playwright/test';

// ✅ Імпортуємо кастомний test де визначені наші auto fixtures
import { test, expect } from '../fixtures/base';

// Тепер всі тести в цьому файлі автоматично отримують:
// - логування через autoLogger
// - перевірку JS-помилок через checkNoJsErrors
// - заблоковану аналітику через blockAnalytics
// Тест про це нічого не знає і нічого не оголошує
test('простий тест', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('h1')).toBeVisible();
});

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

test.describe('Shopping Cart', () => {
  test.beforeAll(async ({ request }) => {
    // Виконується ОДИН РАЗ перед усіма тестами блоку
    // Scope: worker (shared між тестами одного воркера)
    await request.post('/api/seed-products');
  });

  test.beforeEach(async ({ page }) => {
    // Перед КОЖНИМ тестом
    await page.goto('/cart');
  });

  test.afterEach(async ({ page }, testInfo) => {
    // Після кожного — корисно для cleanup
    if (testInfo.status !== testInfo.expectedStatus) {
      await page.screenshot({ path: `failure-${testInfo.title}.png` });
    }
  });

  test.afterAll(async ({ request }) => {
    // Після всіх тестів блоку
    await request.delete('/api/test-data');
  });
});

зовнішній beforeAll        ← виконується ОДИН РАЗ перед усіма тестами
  внутрішній beforeAll     ← виконується ОДИН РАЗ перед тестами вкладеного describe
    зовнішній beforeEach   ← для КОЖНОГО тесту
      внутрішній beforeEach ← для КОЖНОГО тесту у вкладеному describe
        → ТЕСТ
      внутрішній afterEach  ← для КОЖНОГО тесту
    зовнішній afterEach    ← для КОЖНОГО тесту
  внутрішній afterAll      ← ОДИН РАЗ після всіх тестів вкладеного describe
зовнішній afterAll         ← ОДИН РАЗ після ВСІХ тестів включно з вкладеними

test.describe('Зовнішній', () => {
  test.beforeAll(() => console.log('1. зовнішній beforeAll'));
  test.afterAll(() =>  console.log('8. зовнішній afterAll'));
  test.beforeEach(() => console.log('3. зовнішній beforeEach'));
  test.afterEach(() =>  console.log('6. зовнішній afterEach'));

  test.describe('Внутрішній', () => {
    test.beforeAll(() => console.log('2. внутрішній beforeAll'));
    test.afterAll(() =>  console.log('7. внутрішній afterAll'));
    test.beforeEach(() => console.log('4. внутрішній beforeEach'));
    test.afterEach(() =>  console.log('5. внутрішній afterEach'));

    test('тест', () => console.log('→ ТЕСТ'));
  });
});

// Вивід в консоль:
// 1. зовнішній beforeAll
// 2. внутрішній beforeAll
// 3. зовнішній beforeEach   ← зовнішній ПЕРШИЙ
// 4. внутрішній beforeEach
// → ТЕСТ
// 5. внутрішній afterEach   ← внутрішній ПЕРШИЙ при виході
// 6. зовнішній afterEach
// 7. внутрішній afterAll
// 8. зовнішній afterAll     ← зовнішній ОСТАННІЙ

test.describe('Checkout', () => {
  // Зовнішній beforeEach: загальний setup для всіх checkout тестів
  test.beforeEach(async ({ page }) => {
    await page.goto('/cart');
    await page.locator('.add-to-cart').click();
    // Виконується для ВСІХ тестів — і зовнішніх і вкладених
  });

  test('кошик не порожній', async ({ page }) => {
    await expect(page.locator('.cart-count')).toHaveText('1');
  });

  test.describe('залогінений юзер', () => {
    // Внутрішній beforeEach: виконується ПІСЛЯ зовнішнього
    // Тобто порядок: goto('/cart') → click('.add-to-cart') → loginAsUser()
    test.beforeEach(async ({ page }) => {
      await loginAsUser(page); // логін після того як товар вже в кошику
    });

    test('зберігає кошик після логіну', async ({ page }) => {
      await expect(page.locator('.cart-count')).toHaveText('1');
    });
  });

  test.describe('гість', () => {
    // Цей beforeEach теж виконується ПІСЛЯ зовнішнього
    test.beforeEach(async ({ page }) => {
      await page.locator('.guest-checkout').click();
    });

    test('гість бачить форму оплати', async ({ page }) => {
      await expect(page.locator('.payment-form')).toBeVisible();
    });
  });
});

// ❌ Типова помилка: думаємо що зовнішній beforeAll тільки для зовнішніх тестів
test.describe('Products', () => {
  test.beforeAll(async () => {
    await seedDatabase(); // ← виконається і перед тестами вкладеного describe!
  });

  test('показує список товарів', async ({ page }) => { /* ... */ });

  test.describe('Filters', () => {
    // seedDatabase() теж виконається перед цими тестами
    // навіть якщо фільтри не потребують бази даних
    test('фільтр по ціні', async ({ page }) => { /* ... */ });
  });
});

// ✅ Правильно: якщо setup потрібен тільки для конкретних тестів — перенести всередину
test.describe('Products', () => {
  test('показує список товарів', async ({ page }) => { /* ... */ });

  test.describe('з базою даних', () => {
    test.beforeAll(async () => {
      await seedDatabase(); // тепер тільки для цього вкладеного describe
    });
    test('фільтр по ціні', async ({ page }) => { /* ... */ });
  });
});

// product.spec.ts — всі тести в одному worker
let sharedData: string;

test.beforeAll(async () => { sharedData = 'готово'; });
test('тест 1', async () => { console.log(sharedData); }); // ✅ бачить
test('тест 2', async () => { console.log(sharedData); }); // ✅ бачить

// ❌ Якщо тести потрапили в різні workers
let testCounter = 0;
test('тест 1', async () => { testCounter++; console.log(testCounter); }); // 1
test('тест 2', async () => { testCounter++; console.log(testCounter); }); // теж 1!
// Кожен worker має свою копію testCounter — вони не знають один про одного

// ❌ Очікування: лічильник рахує всі тести по черзі
let testCounter = 0;

test('тест 1', async () => {
  testCounter++;
  console.log(testCounter); // може вивести 1
});

test('тест 2', async () => {
  testCounter++;
  console.log(testCounter); // теж може вивести 1, а не 2!
});
// Якщо тести 1 і 2 потрапили в РІЗНІ workers — це окремі Node.js процеси,
// кожен зі своєю копією модуля і своєю пам'яттю → testCounter НЕ спільний

// ✅ Для дійсно спільного стану — зовнішнє сховище (файл, БД, API)
await writeFile('./counter.json', JSON.stringify({ count: 1 }));

test.describe('Сторінка /account', () => {
  test.beforeEach(async ({ page }) => { await page.goto('/account'); });

  test('адмін бачить кнопку видалити', async ({ page }) => {
    await loginAs(page, 'admin');
    await expect(page.locator('.delete-btn')).toBeVisible();
  });

  test('юзер НЕ бачить кнопку видалити', async ({ page }) => {
    await loginAs(page, 'user');
    await expect(page.locator('.delete-btn')).not.toBeVisible();
  });
});

// ✅ Один describe, beforeEach відкриває сторінку, кожен тест сам логіниться
// Просто, читабельно, без зайвої вкладеності
test.describe('Сторінка /account', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/account');
  });

  test('адмін бачить кнопку видалити', async ({ page }) => {
    await loginAs(page, 'admin');
    await expect(page.locator('.delete-btn')).toBeVisible();
  });

  test('юзер НЕ бачить кнопку видалити', async ({ page }) => {
    await loginAs(page, 'user');
    await expect(page.locator('.delete-btn')).not.toBeVisible();
  });

  test('гість редиректить на /login', async ({ page }) => {
    await expect(page).toHaveURL('/login');
  });
});

// Спільний setup: 3 кроки для всіх + 1 специфічний для групи + 3 тести в кожній групі
// Без вкладених: 4 кроки × 6 тестів = 24 рядки дублювання
// З вкладеними: 3 спільних + 1×2 специфічних = 5 рядків setup
test.describe('Checkout', () => {

  test.beforeEach(async ({ page }) => {
    // 3 спільних кроки для ВСІХ тестів
    await page.goto('/cart');
    await page.locator('.add-to-cart').first().click();
    await page.locator('.proceed-to-checkout').click();
  });

  test.describe('залогінений юзер', () => {
    test.beforeEach(async ({ page }) => {
      await loginAs(page, 'user'); // +1 крок тільки для цієї групи
    });

    // Без вкладених describe — довелось би повторювати 4 кроки в кожному з 3 тестів
    test('бачить збережені адреси', async ({ page }) => { /* ... */ });
    test('бачить збережені картки', async ({ page }) => { /* ... */ });
    test('може оформити в один клік', async ({ page }) => { /* ... */ });
  });

  test.describe('гість', () => {
    test.beforeEach(async ({ page }) => {
      await page.locator('.guest-checkout').click(); // +1 крок для гостя
    });

    test('бачить форму введення адреси', async ({ page }) => { /* ... */ });
    test('бачить форму введення картки', async ({ page }) => { /* ... */ });
    test('не бачить "один клік"', async ({ page }) => { /* ... */ });
  });
});

// ❌ Без вкладеного describe — 4 кроки повторюються в кожному тесті
test('юзер бачить збережені адреси', async ({ page }) => {
  await page.goto('/cart');                              // крок 1
  await page.locator('.add-to-cart').first().click();   // крок 2
  await page.locator('.proceed-to-checkout').click();   // крок 3
  await loginAs(page, 'user');                           // крок 4
  // ... сам тест
});

test('юзер бачить збережені картки', async ({ page }) => {
  await page.goto('/cart');                              // крок 1 — знову!
  await page.locator('.add-to-cart').first().click();   // крок 2 — знову!
  await page.locator('.proceed-to-checkout').click();   // крок 3 — знову!
  await loginAs(page, 'user');                           // крок 4 — знову!
  // ... сам тест
});
// І так ще 4 рази для решти тестів... 24 рядки дублювання

// ✅ З вкладеним describe — setup написаний один раз, тест — тільки тест
test.describe('залогінений юзер', () => {
  test.beforeEach(...); // 4 кроки написані ОДИН РАЗ

  test('бачить збережені адреси', async ({ page }) => { /* тільки тест */ });
  test('бачить збережені картки', async ({ page }) => { /* тільки тест */ });
});

// За замовчуванням: тести незалежні, порядок не гарантований,
// фейл одного НЕ впливає на інші

// ✅ serial: навмисно ламаємо ізоляцію, коли тести логічно залежні
test.describe.serial('checkout flow покроково', () => {
  let orderId: string;

  test('1. додати товар в кошик', async ({ page }) => {
    await page.goto('/cart');
    // ...
  });

  test('2. оформити замовлення', async ({ page }) => {
    // виконується ТІЛЬКИ якщо тест 1 пройшов; orderId доступний далі
    orderId = 'ORD-123';
  });

  test('3. перевірити email підтвердження', async () => {
    // якщо тест 2 впав — цей тест буде SKIPPED, не запуститься взагалі
  });
});

// Без fullyParallel (за замовчуванням):
// checkout.spec.ts має 10 тестів
// → Worker 1 виконує всі 10 тестів послідовно: test1 → test2 → ... → test10
// → Workers 2-6 в цей час виконують інші файли або чекають
// → Якщо checkout.spec.ts найбільший файл — він стає "вузьким місцем"

// З fullyParallel: true:
// checkout.spec.ts має 10 тестів
// → Workers 1-6 беруть тести з checkout.spec.ts по одному
// → test1(W1), test2(W2), test3(W3), test4(W4), test5(W5), test6(W6) — паралельно
// → Потім ще test7(W1), test8(W2), test9(W3), test10(W4) — другий раунд
// → 10 тестів замість ~10x часу займають ~2x часу (2 раунди по 6)

export default defineConfig({
  // Увімкнути паралелізм на рівні окремих тестів (не тільки файлів)
  fullyParallel: true,

  // Кількість workers не змінюється — тільки як вони використовуються
  workers: process.env.CI ? 4 : undefined, // undefined = автоматично (50% CPU cores)

  use: {
    baseURL: 'https://staging.myshop.com',
  },
});

// Можна також вимкнути fullyParallel для конкретного файлу або describe:

// Якщо fullyParallel: true глобально, але є файл з залежними тестами —
// можна вимкнути паралелізм локально для цього файлу

// Варіант 1: весь файл послідовно
test.describe.configure({ mode: 'serial' }); // на верхньому рівні файлу

test('крок 1: логін', async ({ page }) => { /* ... */ });
test('крок 2: додати товар', async ({ page }) => { /* ... */ });
test('крок 3: оформити замовлення', async ({ page }) => { /* ... */ });
// Всі три виконуються послідовно навіть при fullyParallel: true

// Варіант 2: тільки один describe блок послідовно, решта файлу — паралельно
test.describe('залежні кроки', () => {
  test.describe.configure({ mode: 'serial' });
  test('крок 1', async ({ page }) => { /* ... */ });
  test('крок 2', async ({ page }) => { /* ... */ });
});

// Незалежні тести поза describe — виконуються паралельно
test('незалежний тест A', async ({ page }) => { /* ... */ });
test('незалежний тест B', async ({ page }) => { /* ... */ });

// Приклад: ~4000 тестів, 6 workers
//
// БЕЗ fullyParallel:
// Якщо є 10 файлів по 400 тестів — кожен файл на 1 worker
// Паралельно виконується max 6 файлів, кожен послідовно
// "Вузьке місце" = найдовший файл × кількість файлів / 6 workers
//
// З fullyParallel: true:
// Всі 4000 тестів розподіляються між 6 workers незалежно від файлів
// Workers ніколи не чекають — завжди беруть наступний тест зі спільної черги
// Теоретичний мінімум: загальний час / 6 (при ідеальному балансуванні)
// На практиці: регресія <3 год → може скоротитись до ~1.5 год

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

// Глобально: Desktop Chrome (з конфігу)

test.describe('мобільна версія PLP', () => {
  // Локально для цього describe: емулюємо iPhone 14
  test.use({ ...devices['iPhone 14'] });
  // devices['iPhone 14'] містить: viewport, userAgent, isMobile, hasTouch

  test('фільтри відкриваються як bottom sheet', async ({ page }) => {
    await page.goto('/women/dresses');
    await page.locator('button.filters-toggle').click();
    // На мобільному фільтри відкриваються знизу, а не сайдбар
    await expect(page.locator('.bottom-sheet-filters')).toBeVisible();
  });

  test('swipe по галереї зображень', async ({ page }) => {
    await page.goto('/product/trench-coat');
    // Viewport вже мобільний — isMobile: true, hasTouch: true
    await expect(page.locator('.swipe-gallery')).toBeVisible();
  });
});

// Цей тест — знову Desktop Chrome з глобального конфігу
test('desktop PLP має сайдбар фільтрів', async ({ page }) => {
  await page.goto('/women/dresses');
  await expect(page.locator('.sidebar-filters')).toBeVisible();
});

// В одному файлі тестуємо і адміна і звичайного юзера
// Без test.use() довелось би або два окремих файли або логін в кожному тесті

test.describe('адмін панель', () => {
  // Для всіх тестів в цьому блоці — сесія адміна
  test.use({ storageState: '.auth/admin.json' });

  test('адмін бачить кнопку "Управління товарами"', async ({ page }) => {
    await page.goto('/dashboard');
    await expect(page.locator('button.manage-products')).toBeVisible();
  });

  test('адмін може видалити відгук', async ({ page }) => {
    await page.goto('/reviews');
    await expect(page.locator('button.delete-review')).toBeVisible();
  });
});

test.describe('звичайний юзер', () => {
  // Для цього блоку — сесія звичайного юзера
  test.use({ storageState: '.auth/user.json' });

  test('юзер НЕ бачить кнопку управління', async ({ page }) => {
    await page.goto('/dashboard');
    await expect(page.locator('button.manage-products')).not.toBeVisible();
  });
});

test.describe('французька локаль', () => {
  test.use({
    locale: 'fr-FR',
    timezoneId: 'Europe/Paris',
  });

  test('ціни показуються у форматі EUR', async ({ page }) => {
    await page.goto('/fr/products');
    await expect(page.locator('.price')).toContainText('€');
  });

  test('дати форматуються по-французьки', async ({ page }) => {
    await page.goto('/fr/orders');
    // Французький формат: 15/01/2024, а не 01/15/2024
    await expect(page.locator('.order-date')).toContainText('15/01/2024');
  });
});

test.describe('японська локаль', () => {
  test.use({
    locale: 'ja-JP',
    timezoneId: 'Asia/Tokyo',
  });

  test('ціни показуються в єнах', async ({ page }) => {
    await page.goto('/jp/products');
    await expect(page.locator('.price')).toContainText('¥');
  });
});

// playwright.config.ts — глобальний конфіг
export default defineConfig({
  use: {
    baseURL: 'https://staging.myshop.com',
    locale: 'en-GB',
    viewport: { width: 1280, height: 720 },
  },
});

// tests/french.spec.ts
test.describe('французька локаль', () => {
  test.use({
    locale: 'fr-FR', // замінюємо ТІЛЬКИ це поле
    // baseURL і viewport НЕ вказані — залишаються з конфігу
  });

  test('ціни в євро', async ({ page }) => {
    // baseURL → https://staging.myshop.com (з конфігу, не змінили)
    // viewport → 1280x720 (з конфігу, не змінили)
    // locale  → fr-FR (замінили через test.use)
    await page.goto('/fr/products');
    await expect(page.locator('.price')).toContainText('€');
  });
});

// Аналогія: test.use() працює як Object.assign
// finalConfig = Object.assign({}, globalConfig, localTestUse)
// тобто ти передаєш тільки те що хочеш поміняти — решта залишається

// ❌ НЕ працює — test.use() не можна викликати всередині test()
test('якийсь тест', async ({ page }) => {
  test.use({ locale: 'fr-FR' }); // помилка!
  // test.use() працює тільки на верхньому рівні describe, до всіх тестів
});

Browser
├── BrowserContext (Alice)
│   ├── Page
│   └── Page        ← ті самі cookies що й сусідня Page
└── BrowserContext (Bob)
    └── Page         ← окремі cookies, Alice їх не бачить

test('buyer and seller see same product', async ({ browser }) => {
  // Два незалежних контексти = дві різні "сесії"
  const sellerCtx = await browser.newContext({
    storageState: '.auth/seller.json'
  });
  const buyerCtx = await browser.newContext({
    storageState: '.auth/buyer.json'
  });

  const sellerPage = await sellerCtx.newPage();
  const buyerPage = await buyerCtx.newPage();

  // Паралельні дії
  await Promise.all([
    sellerPage.goto('/seller/product/123'),
    buyerPage.goto('/product/123'),
  ]);

  await sellerCtx.close();
  await buyerCtx.close();
});

{
  "cookies": [
    { "name": "session_id", "value": "abc123", "domain": "myshop.com" }
  ],
  "origins": [
    { "origin": "https://myshop.com",
      "localStorage": [{ "name": "user_id", "value": "42" }] }
  ]
}

Мій проєкт/
├── tests/
│   └── auth.setup.ts   ← файл з кодом
└── .auth/
    └── user.json       ← сюди хочемо зберегти

import { test as setup } from '@playwright/test';
import path from 'path';

const authFile = path.join(__dirname, '../.auth/user.json');

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill(process.env.TEST_EMAIL!);
  await page.getByLabel('Password').fill(process.env.TEST_PASS!);
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.waitForURL('**/dashboard');

  // Зберігаємо cookies + localStorage
  await page.context().storageState({ path: authFile });
});

projects: [
  { name: 'setup', testMatch: /auth\.setup\.ts/ },
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
      storageState: '.auth/user.json', // ← всі тести стартують авторизованими
    },
    dependencies: ['setup'],
  },
]

// Встановити значення
await page.evaluate(() => {
  localStorage.setItem('user_token', 'test-token-123');
  localStorage.setItem('locale', 'en-GB');
});

// Прочитати значення
const token = await page.evaluate(() =>
  localStorage.getItem('user_token')
);

// Очистити
await page.evaluate(() => localStorage.clear());

// Встановити значення — без evaluate()
await page.localStorage.setItem('user_token', 'test-token-123');
await page.localStorage.setItem('locale', 'en-GB');

// Прочитати значення
const token = await page.localStorage.getItem('user_token');

// Видалити одне поле
await page.localStorage.removeItem('user_token');

// Очистити все
await page.localStorage.clear();

// Отримати всі ключі
const keys = await page.localStorage.keys();

<!-- Звичайне посилання — відкривається в тій самій вкладці -->
<a href="/products">Товари</a>

<!-- З target="_blank" — відкривається в НОВІЙ вкладці -->
<a href="/products" target="_blank">Товари</a>

// Підпишись і забудь — код не зупиняється, нова вкладка в callback
page.on('popup', async (popup) => {
  await expect(popup).toHaveURL(/privacy/); // перевірили і все
});

await page.click('.privacy-link');
// тест продовжується далі не чекаючи нової вкладки

// Promise.all() повертає МАСИВ результатів:
// results = [newPage, undefined]
//            ↑           ↑
//         нова вкладка   click нічого не повертає
//
// const [newPage] — деструктуризація масиву: беремо тільки перший елемент
// Те саме що: const results = await Promise.all([...]); const newPage = results[0];
const [newPage] = await Promise.all([
  context.waitForEvent('page'),  // слухаємо ДО кліку — не пропустимо подію
  page.click('.privacy-link'),    // клікаємо
]);

// newPage — повноцінна змінна, можемо взаємодіяти скільки завгодно
await newPage.waitForLoadState();
await newPage.locator('.accept-cookies').click();
await newPage.locator('.subscribe-form').fill('test@test.com');
await expect(newPage.locator('.confirmation')).toBeVisible();

// Через frameLocator (рекомендований спосіб)
const frame = page.frameLocator('iframe[name="payment"]');
await frame.getByLabel('Card number').fill('4111111111111111');

// Через frame() якщо потрібен доступ до page-level методів
const iframe = page.frame({ name: 'payment' });
const content = await iframe?.content();

// Вкладені iframe
const nested = page
  .frameLocator('#outer')
  .frameLocator('#inner');
await nested.getByRole('button').click();

// Обробник ТРЕБА додати ДО дії що викликає діалог
page.on('dialog', async (dialog) => {
  console.log(dialog.message());       // текст діалогу
  console.log(dialog.type());          // 'alert' | 'confirm' | 'prompt'

  if (dialog.type() === 'confirm') {
    await dialog.accept();              // OK
  } else if (dialog.type() === 'prompt') {
    await dialog.accept('my input');   // з відповіддю
  } else {
    await dialog.dismiss();            // Cancel
  }
});

await page.getByRole('button', { name: 'Delete' }).click();

// Форма
await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret123');

// Select/dropdown
await page.selectOption('#country', { label: 'Ukraine' });

// Checkbox
await page.getByRole('checkbox', { name: 'Accept terms' }).check();

// Upload файлу
await page.getByLabel('Upload avatar').setInputFiles('avatar.jpg');

// Upload кількох файлів
await page.locator('input[type="file"]').setInputFiles([
  'file1.pdf', 'file2.pdf'
]);

// Drag & drop
await page.dragAndDrop('.source', '.target');

test('завантаження PDF звіту', async ({ page }) => {
  await page.goto('/reports');

  // ✅ ПРАВИЛЬНО: спочатку підписуємось — Promise створено, але ще не await
  const downloadPromise = page.waitForEvent('download');

  // Тепер тригеримо подію — Playwright вже "слухає" і не пропустить
  await page.locator('button.download-report').click();

  // Тепер чекаємо результат — download об'єкт доступний
  const download = await downloadPromise;

  // Перевіряємо ім'я файлу
  expect(download.suggestedFilename()).toBe('report-2024.pdf');

  // Зберігаємо файл і перевіряємо що він не порожній
  const path = await download.path();
  expect(path).toBeTruthy();
});

// ❌ НЕПРАВИЛЬНО — race condition: download може завершитись до waitForEvent
// await page.locator('button.download-report').click();
// const download = await page.waitForEvent('download'); // може пропустити!

test('посилання відкривається в новій вкладці', async ({ page, context }) => {
  await page.goto('/products');

  // Підписуємось на context — нова вкладка це подія контексту, не сторінки
  const popupPromise = context.waitForEvent('page');

  // Клікаємо посилання з target="_blank"
  await page.locator('a[target="_blank"]').click();

  // Отримуємо нову Page — це повноцінний об'єкт, можна з ним взаємодіяти
  const newPage = await popupPromise;
  await newPage.waitForLoadState('domcontentloaded');

  // Перевіряємо що нова вкладка відкрила потрібний URL
  expect(newPage.url()).toContain('/product/123');
  await expect(newPage.locator('h1')).toBeVisible();
});

test('підтвердження видалення через confirm()', async ({ page }) => {
  await page.goto('/settings');

  // ⚠️ ВАЖЛИВО: якщо dialog з'явиться і обробника немає — Playwright
  // автоматично відхилить його (dismiss), а виконання тесту заблокується!
  // Тому ЗАВЖДИ реєструємо обробник ДО дії яка викликає діалог
  page.on('dialog', async (dialog) => {
    // Перевіряємо текст діалогу
    expect(dialog.message()).toBe('Ви впевнені що хочете видалити акаунт?');

    // Натискаємо "Ок" (accept) або "Скасувати" (dismiss)
    await dialog.accept(); // або dialog.dismiss() для скасування
  });

  await page.locator('button.delete-account').click();

  // Після підтвердження — перевіряємо результат
  await expect(page.locator('.success-message')).toBeVisible();
});

test('завантаження аватару через file picker', async ({ page }) => {
  await page.goto('/profile');

  // Той самий патерн: спочатку підписуємось, потім тригеримо
  const fileChooserPromise = page.waitForEvent('filechooser');

  // Клікаємо кнопку яка відкриває системний file picker
  await page.locator('button.upload-avatar').click();

  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles('./test-data/avatar.png');

  // Альтернатива — якщо input[type="file"] доступний напряму:
  // await page.locator('input[type="file"]').setInputFiles('./test-data/avatar.png')
  // ⚠️ setInputFiles() тільки для input[type="file"], НЕ для drag-and-drop зон

  await expect(page.locator('.avatar-preview')).toBeVisible();
});

test('сторінка не пише помилки в консоль при завантаженні', async ({ page }) => {
  const consoleErrors: string[] = [];

  // ✅ Підписуємось ДО goto — щоб не пропустити події завантаження
  page.on('console', (msg) => {
    // msg.type() → 'log' | 'warn' | 'error' | 'info' | 'debug'
    // msg.text() → сам текст повідомлення
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

  await page.goto('/product/123');
  await page.locator('.product-title').waitFor();

  // Після завантаження перевіряємо що помилок не було
  expect(consoleErrors).toHaveLength(0);
});

test('перехоплюємо конкретне повідомлення', async ({ page }) => {
  const messages: string[] = [];

  page.on('console', (msg) => messages.push(msg.text()));

  await page.goto('/checkout');
  await page.locator('button.place-order').click();

  // Перевіряємо що після кліку код написав очікуване лог-повідомлення
  expect(messages.some(m => m.includes('Order submitted'))).toBe(true);
});

test('на сторінці немає JS-крешів', async ({ page }) => {
  const jsErrors: Error[] = [];

  // pageerror спрацьовує на будь-який uncaught exception в браузері
  // Це TypeError, ReferenceError, або будь-який throw поза try/catch
  page.on('pageerror', (error) => {
    jsErrors.push(error); // error — це справжній Error об'єкт з message і stack
  });

  await page.goto('/dashboard');

  // Взаємодіємо зі сторінкою — перевіряємо що жоден сценарій не крешить
  await page.locator('nav a').first().click();
  await page.locator('.filter-btn').click();

  // Якщо масив не порожній — виводимо stack trace для дебагу
  expect(jsErrors, jsErrors.map(e => e.message).join('\n')).toHaveLength(0);
});

// Патерн для smoke-тесту: перевірка кількох сторінок одразу
const criticalPages = ['/', '/products', '/cart', '/account'];

for (const path of criticalPages) {
  test(`немає JS-помилок на ${path}`, async ({ page }) => {
    const errors: Error[] = [];
    page.on('pageerror', e => errors.push(e));
    await page.goto(path);
    expect(errors).toHaveLength(0);
  });
}

test('перевіряємо що аналітика викликається при додаванні в кошик', async ({ page }) => {
  const analyticsRequests: string[] = [];

  // Спостерігаємо за запитами — НЕ змінюємо їх (це відрізняє від page.route)
  page.on('request', (request) => {
    if (request.url().includes('analytics.myshop.com')) {
      analyticsRequests.push(request.url());
    }
  });

  await page.goto('/product/trench-coat');
  await page.locator('button.add-to-cart').click();

  // Перевіряємо що аналітичний запит відбувся
  expect(analyticsRequests.length).toBeGreaterThan(0);
});

test('API повертає 200 для критичних ендпоінтів', async ({ page }) => {
  const failedRequests: {url: string, status: number}[] = [];

  // page.on('response') — спрацьовує коли прийшла відповідь
  page.on('response', (response) => {
    if (response.url().includes('/api/') && response.status() >= 400) {
      failedRequests.push({ url: response.url(), status: response.status() });
    }
  });

  await page.goto('/checkout');

  // Якщо є помилки — виводимо деталі для зручного дебагу
  expect(
    failedRequests,
    `Failed API calls: ${failedRequests.map(r => `${r.status} ${r.url}`).join(', ')}`
  ).toHaveLength(0);
});

// page.on() — підписка назавжди, callback для кожної події
page.on('dialog', dialog => dialog.accept());    // кожен dialog буде прийнятий
page.on('console', msg => console.log(msg.text())); // логуємо всі console.log

// page.waitForEvent() — чекає один раз і повертає значення
const dialog = await page.waitForEvent('dialog');  // чекаємо і отримуємо об'єкт
await dialog.accept();

// Вбудовані події Playwright: dialog, popup, page, request,
// response, console, pageerror, worker, websocket, download, filechooser

// dataLayer.push() — це виклик методу всередині JS сторінки
// Playwright не знає про нього — треба підключитись вручну через evaluate()

// Підміняємо dataLayer.push своєю функцією яка "повідомляє" нас через Promise
const dataLayerPromise = page.evaluate(() =>
  new Promise(resolve => {
    (window as any).dataLayer = (window as any).dataLayer || [];
    const orig = (window as any).dataLayer.push.bind((window as any).dataLayer);

    (window as any).dataLayer.push = (...args: any[]) => {
      if (args[0]?.event === 'add_to_cart') resolve(args[0]); // знайшли — повідомляємо
      return orig(...args); // завжди викликаємо оригінальний push
    };
  })
);

// Тепер чекаємо поки подія прийде
const event = await dataLayerPromise;
expect(event).toMatchObject({ event: 'add_to_cart' });

// ── Browser ───────────────────────────────────────────────────────
// Що: один процес браузера (Chromium / Firefox / WebKit)
// Дорогий — один на весь прогін. Звідки: fixture 'browser'
browser.newContext()   // створити ізольований BrowserContext
browser.contexts()     // всі відкриті контексти
browser.version()      // версія браузера рядком
browser.close()        // закрити браузер (рідко вручну)

// ── BrowserContext ────────────────────────────────────────────────
// Що: ізольований "профіль" — свої cookies, localStorage, дозволи.
// Схожий на окреме вікно інкогніто. Новий для КОЖНОГО тесту.
// Звідки: fixture 'context', або browser.newContext({ ... })
context.newPage()                         // відкрити вкладку
context.cookies()                         // прочитати cookies
context.addCookies([...])                 // встановити cookies
context.storageState({ path: 'auth.json' }) // зберегти сесію у файл
context.setGeolocation({ latitude, longitude }) // геолокація
context.grantPermissions(['camera'])      // видати дозволи
context.setOffline(true)                  // симулювати офлайн
context.routeFromHAR('file.har')          // відтворювати HAR
context.waitForEvent('page')              // чекати нову вкладку

// ── Page ─────────────────────────────────────────────────────────
// Що: одна вкладка браузера. Основний об'єкт з яким ти працюєш.
// Звідки: fixture 'page' (найчастіше), або context.newPage()
page.goto(url)                    // перейти на URL
page.locator(selector)            // Locator — рецепт пошуку елемента
page.getByRole / getByText / getByLabel // семантичні локатори
page.route(pattern, handler)      // перехопити мережевий запит
page.waitForResponse(url)         // чекати конкретну відповідь
page.waitForEvent('download')     // чекати browser-подію
page.evaluate(fn)                 // виконати код в браузері → Node.js
page.exposeFunction(name, fn)     // браузер → Node.js функція
page.addInitScript(fn)            // виконати до завантаження сторінки
page.screenshot()                 // скріншот → Buffer
page.on('console', handler)       // слухати консоль браузера
page.on('pageerror', handler)     // слухати JS помилки
page.on('worker', handler)        // слухати Service Worker
page.url() / page.title()         // поточний URL / заголовок
page.clock.install({ time })      // мокати системний час
page.clock.fastForward('30:00')   // перемотати час вперед
page.keyboard / page.mouse        // низькорівневий ввід

// ── Locator ───────────────────────────────────────────────────────
// Що: рецепт пошуку елемента. Шукає заново при кожній дії.
// Підтримує auto-waiting. Звідки: page.locator(), page.getBy*()
locator.click()                    // клік (з auto-waiting)
locator.fill('text')               // заповнити поле повністю
locator.type('text')               // друкувати посимвольно
locator.hover()                    // навести курсор
locator.selectOption('value')      // вибрати опцію у <select>
locator.check() / uncheck()        // чекбокс
locator.count()                    // кількість знайдених елементів
locator.first() / last() / nth(n)  // звузити до конкретного
locator.filter({ hasText: '...' }) // фільтрувати за вмістом
locator.locator('.child')          // знайти дочірній елемент
locator.waitFor()                  // явно чекати появи елемента
locator.isVisible() / isEnabled()  // стан (одноразово, без auto-waiting!)

// ── Frame ─────────────────────────────────────────────────────────
// Що: <iframe> всередині сторінки.
// Відрізняється від Page: не має URL history, живе всередині page.

// Варіант 1: frameLocator (рекомендований — повертає Locator)
const frame = page.frameLocator('iframe[name="payment"]' );
await frame.locator('#card-number').fill('4111111111111111');

// Варіант 2: page.frame() — повертає Frame об'єкт (старіший API)
const paymentFrame = page.frame({ name: 'payment' });
await paymentFrame?.locator('#card-cvv').fill('123');

// ── Accessibility ─────────────────────────────────────────────────
// Що: знімок дерева доступності (як screen reader бачить сторінку)
const snapshot = await page.accessibility.snapshot();
// { role: 'WebArea', name: 'Products', children: [...] }
// Але для a11y тестів краще @axe-core/playwright — автоматичний аудит

// ── Request ───────────────────────────────────────────────────────
// Що: один HTTP запит. Звідки: page.on('request') або page.route()
request.url()          // URL запиту
request.method()       // GET | POST | PUT | DELETE
request.headers()      // заголовки запиту
request.postData()     // тіло POST запиту як рядок
request.resourceType() // 'xhr' | 'fetch' | 'document' | 'image' | ...

// ── Response ──────────────────────────────────────────────────────
// Що: HTTP відповідь. Звідки: page.on('response') або waitForResponse()
response.url()              // URL відповіді
response.status()           // 200, 404, 500...
response.headers()          // заголовки відповіді
await response.json()        // тіло як JSON
await response.text()        // тіло як текст
await response.body()        // тіло як Buffer

// ── APIRequestContext ──────────────────────────────────────────────
// Що: HTTP клієнт БЕЗ браузера. Швидше ніж через page.
// Звідки: fixture 'request'
const res = await request.get('/api/products');
const res = await request.post('/api/cart', { data: { sku: '123' } });
const res = await request.put('/api/user/1', { data: { name: 'Test' } });
const res = await request.delete('/api/cart/item/1');

// ── Download ──────────────────────────────────────────────────────
// Що: файл що скачується. Звідки: waitForEvent('download')
download.suggestedFilename()        // ім'я файлу яке пропонує браузер
await download.path()               // шлях до тимчасового файлу на диску
await download.saveAs('./my.pdf')   // зберегти у вказане місце

// ── Keyboard ──────────────────────────────────────────────────────
// Що: низькорівневий ввід з клавіатури. Доступний через page.keyboard
// Коли: звичайний locator.fill() не підходить (hot keys, shortcuts)
await page.keyboard.press('Enter')        // натиснути клавішу
await page.keyboard.press('Control+A')    // комбінація клавіш
await page.keyboard.press('Shift+Tab')    // tab назад
await page.keyboard.type('Hello')         // друкувати посимвольно
await page.keyboard.down('Shift')        // затиснути клавішу
await page.keyboard.up('Shift')          // відпустити клавішу

// ── Mouse ─────────────────────────────────────────────────────────
// Що: низькорівневі дії миші. Доступний через page.mouse
// Коли: drag-and-drop, canvas, точні координати
await page.mouse.move(100, 200)          // перемістити курсор (x, y)
await page.mouse.click(100, 200)         // клік за координатами
await page.mouse.down()                   // затиснути кнопку миші
await page.mouse.up()                     // відпустити кнопку миші
await page.mouse.wheel(0, 500)           // прокрутити (deltaX, deltaY)

// Drag-and-drop через Mouse:
await page.mouse.move(100, 100);  // навести на елемент
await page.mouse.down();            // затиснути
await page.mouse.move(300, 300);  // тягнути
await page.mouse.up();              // відпустити

// ── Touchscreen ───────────────────────────────────────────────────
// Що: тач-події для мобільної емуляції. page.touchscreen
await page.touchscreen.tap(150, 300)       // тап за координатами

// ── Dialog ────────────────────────────────────────────────────────
// Що: нативний alert/confirm/prompt. Звідки: page.on('dialog')
dialog.type()     // 'alert' | 'confirm' | 'prompt' | 'beforeunload'
dialog.message() // текст діалогу
await dialog.accept('input') // OK (для prompt можна передати текст)
await dialog.dismiss()      // Скасувати

// ── ConsoleMessage ────────────────────────────────────────────────
// Що: одне повідомлення з консолі браузера. Звідки: page.on('console')
msg.type()  // 'log' | 'warn' | 'error' | 'info' | 'debug'
msg.text()  // текст повідомлення
msg.args()  // JSHandle[] — аргументи якщо console.log(obj1, obj2)

// ── Worker ────────────────────────────────────────────────────────
// Що: Web Worker або Service Worker. Звідки: page.on('worker')
worker.url()          // URL скрипта воркера
worker.evaluate(fn)  // виконати код всередині воркера
page.workers()       // всі активні воркери на сторінці зараз

// Напрямок: Node.js → Браузер → Node.js
// Коли: одноразово, прямо зараз, в конкретний момент тесту
// Навіщо: прочитати щось з браузера що недоступне через локатор

// Приклад 1: читаємо значення з window об'єкта
const cartCount = await page.evaluate(() => {
  // Цей код виконується В БРАУЗЕРІ — тут є window, document, localStorage
  return window.cartItems.length; // повертаємо значення назад в Node.js
});
expect(cartCount).toBe(3); // тут вже в Node.js — звичайний assert

// Приклад 2: передаємо аргументи З Node.js В браузер через другий параметр
const productId = 'SKU-123'; // змінна в Node.js
const price = await page.evaluate((id) => {
  // id прийшов з Node.js — тепер він доступний тут, в браузері
  return window.productCatalog[id].price;
}, productId); // ← передаємо productId як аргумент

// ⚠️ ВАЖЛИВА ПАСТКА: closure не працює з evaluate!
const myVar = 'hello';
await page.evaluate(() => {
  // ❌ myVar тут undefined! Браузер не бачить змінні з Node.js через closure
  // Це окремий процес — closure не перетинає межу Node.js ↔ Браузер
  console.log(myVar); // undefined
});
// ✅ Правильно — передавати через другий аргумент:
await page.evaluate((v) => console.log(v), myVar);

// Напрямок: Браузер → Node.js (браузер ініціює!
// Коли: у будь-який момент поки сторінка живе — браузер сам вирішує коли викликати
// Навіщо: перехоплювати події з браузера в реальному часі (GTM dataLayer, аналітика)

const capturedEvents: any[] = [];

// Реєструємо функцію: після цього в браузері з'явиться window.captureEvent()
// яку може викликати будь-який JS код сторінки
await page.exposeFunction('captureEvent', (event: any) => {
  // Цей колбек виконується В NODE.JS коли браузер викликає window.captureEvent()
  capturedEvents.push(event);
});

// Тепер підміняємо dataLayer.push щоб він також викликав наш колбек
await page.addInitScript(() => {
  window.dataLayer = window.dataLayer || [];
  const original = window.dataLayer.push.bind(window.dataLayer);
  window.dataLayer.push = function(...args: any[]) {
    (window as any).captureEvent(args[0]); // → летить в Node.js!
    return original(...args);
  };
});

await page.goto('/product/123');
await page.locator('.add-to-cart').click();

// Перевіряємо зібрані події — вони вже в Node.js масиві capturedEvents
const addToCartEvent = capturedEvents.find(e => e.event === 'add_to_cart');
expect(addToCartEvent?.items[0].item_id).toBe('SKU-123');

// Напрямок: Node.js → Браузер, але ДУЖЕ РАНО
// Коли: до завантаження будь-якого <script> тегу сторінки
// Навіщо: замінити/мокнути щось до того як сторінка це використає

// Приклад 1: мокаємо Math.random щоб тести були детерміновані
await page.addInitScript(() => {
  // Сторінка ще не завантажилась, але наш код вже в браузері
  // Підміняємо Math.random ПЕРЕД тим як React/Vue його використає
  Math.random = () => 0.5; // завжди повертає 0.5 — жодної випадковості
});
await page.goto('/product'); // сторінка завантажується вже з нашим Math.random

// Приклад 2: встановлюємо feature flag до завантаження
await page.addInitScript(() => {
  window.featureFlags = { newCheckout: true, darkMode: false };
});
await page.goto('/checkout'); // сторінка читає featureFlags і бачить наші значення

// Приклад 3: можна передавати аргументи так само як в evaluate
const mockUserId = 'test-user-42';
await page.addInitScript(({ userId }) => {
  window.currentUser = { id: userId, role: 'admin' };
}, { userId: mockUserId }); // ← передаємо з Node.js в браузер

test('візуальна регресія PDP', async ({ page }) => {
  await page.goto('/product/trench-coat');

  // Вимикаємо всі анімації і transitions — скріншот завжди в фінальному стані
  await page.addStyleTag({
    content: `
      *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
      }
      /* Ховаємо курсор — він може потрапити в скріншот */
      * { cursor: none !important; }
      /* Ховаємо елементи що мигають або оновлюються */
      .live-chat-widget,
      .cookie-banner,
      .countdown-timer { display: none !important; }
    `
  });

  await expect(page).toHaveScreenshot('pdp-stable.png');
});

// Або підключаємо зовнішній CSS файл
await page.addStyleTag({ url: 'https://example.com/test-overrides.css' });
// Або файл з диску
await page.addStyleTag({ path: './test-helpers/disable-animations.css' });

// Замість повторювати addStyleTag в кожному тесті — винести в auto fixture
const test = base.extend({
  disableAnimations: [async ({ page }, use) => {
    // Додаємо CSS після кожного goto() — слухаємо навігацію
    page.on('load', async () => {
      await page.addStyleTag({
        content: `* { animation: none !important; transition: none !important; }`
      });
    });
    await use(undefined);
  }, { auto: true }],
});

// ⚠️ Важливо: для більшості завдань addScriptTag не потрібен
// Перевірити кількість елементів → locator.count()
// Прочитати текст → locator.textContent()
// Клікнути кнопку → locator.click()
// addScriptTag — тільки коли потрібне щось що локатор не може дістати

// Реальний кейс 1: внутрішній стан React компонента недоступний у DOM
test('React стан форми містить валідні дані', async ({ page }) => {
  await page.goto('/checkout');
  await page.locator('#email').fill('test@test.com');

  // Додаємо helper який читає внутрішній стан React через __reactFiber
  // Це недоступно через локатори — це JS об'єкт в пам'яті, не DOM атрибут
  await page.addScriptTag({
    content: `
      window.getReactState = function(selector) {
        const el = document.querySelector(selector);
        const key = Object.keys(el).find(k => k.startsWith('__reactFiber'));
        return el[key]?.memoizedState?.queue?.lastRenderedState;
      }
    `
  });

  const formState = await page.evaluate(() =>
    (window as any).getReactState('#checkout-form')
  );
  expect(formState?.isValid).toBe(true);
});

// Реальний кейс 2: симуляція події яку Playwright не підтримує нативно
test('drag-and-drop через кастомний скрипт', async ({ page }) => {
  await page.goto('/kanban');

  // Деякі drag-and-drop бібліотеки не реагують на стандартний mouse.down/move/up
  // Тому ін'єктуємо скрипт який симулює podію через dataTransfer API
  await page.addScriptTag({
    content: `
      window.simulateDrop = function(sourceSelector, targetSelector) {
        const src = document.querySelector(sourceSelector);
        const tgt = document.querySelector(targetSelector);
        const dt = new DataTransfer();
        src.dispatchEvent(new DragEvent('dragstart', { dataTransfer: dt, bubbles: true }));
        tgt.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
      }
    `
  });

  await page.evaluate(() =>
    (window as any).simulateDrop('#card-1', '#column-done')
  );
  await expect(page.locator('#column-done #card-1')).toBeVisible();
});

// ── addInitScript — виконується ДО завантаження ──────────────────
await page.addInitScript(() => {
  // Виконується ПЕРЕД будь-яким скриптом сторінки
  // Підміна тут гарантовано спрацює — сторінка ще не читала Math.random
  Math.random = () => 0.5;
});
await page.goto('/product'); // ← сторінка завантажується вже з нашим Math.random

// ── addScriptTag — виконується ПІСЛЯ завантаження ────────────────
await page.goto('/product'); // ← сторінка вже завантажилась
await page.addScriptTag({
  content: `Math.random = () => 0.5;`
  // Підміна після завантаження — сторінка вже виконала свій код з реальним Math.random
  // Наша підміна вплине тільки на майбутні виклики, не на вже виконані
});

/* Спрацьовує коли OS в темному режимі */
@media (prefers-color-scheme: dark) {
  body { background: black; color: white; }
}

/* Спрацьовує коли юзер натиснув "Друкувати" */
@media print {
  nav { display: none; } /* навігація не потрібна на папері */
}

// Кажемо браузеру: вдавай що OS в темному режимі
await page.emulateMedia({ colorScheme: 'dark' });
// Тепер @media (prefers-color-scheme: dark) спрацьовує
// body стає чорним, текст білим — і ми можемо це перевірити

// Кажемо браузеру: вдавай що юзер натиснув "Друкувати"
await page.emulateMedia({ media: 'print' });
// Тепер @media print спрацьовує
// nav зникає — і ми можемо це перевірити

test('темний режим — фон темний, текст світлий', async ({ page }) => {
  // Вмикаємо темний режим до завантаження — CSS застосується одразу
  await page.emulateMedia({ colorScheme: 'dark' });
  await page.goto('/product/trench-coat');

  // Перевіряємо що темна тема застосована
  const bgColor = await page.evaluate(() =>
    getComputedStyle(document.body).backgroundColor
  );
  expect(bgColor).toBe('rgb(18, 18, 18)'); // темний фон

  // Або візуальна перевірка через snapshot
  await expect(page).toHaveScreenshot('dark-mode.png');
});

test('перемикання між темним і світлим режимом', async ({ page }) => {
  await page.goto('/settings');

  // Починаємо зі світлого
  await page.emulateMedia({ colorScheme: 'light' });
  await expect(page.locator('.theme-icon')).toHaveClass(/sun/);

  // Перемикаємо в темний — emulateMedia можна викликати будь-коли
  await page.emulateMedia({ colorScheme: 'dark' });
  await expect(page.locator('.theme-icon')).toHaveClass(/moon/);
});

test('сторінка замовлення коректно виглядає при друці', async ({ page }) => {
  await page.goto('/order/ORD-12345');

  // Вмикаємо режим друку — спрацьовує @media print { } в CSS
  // Навігація, банери і зайві блоки зазвичай ховаються при друці
  await page.emulateMedia({ media: 'print' });

  // Перевіряємо що навігація схована при друці
  await expect(page.locator('nav.main-navigation')).not.toBeVisible();

  // Перевіряємо що деталі замовлення видимі
  await expect(page.locator('.order-details')).toBeVisible();
  await expect(page.locator('.order-total')).toBeVisible();

  // Скріншот print-версії для візуальної перевірки
  await expect(page).toHaveScreenshot('order-print.png');
});

// reducedMotion: 'reduce' — для тестів де анімації заважають стабільності
// або для перевірки що анімації вимикаються для accessibility
test('анімації вимкнені при prefers-reduced-motion', async ({ page }) => {
  await page.emulateMedia({ reducedMotion: 'reduce' });
  await page.goto('/product');

  // Перевіряємо що CSS animation-duration: 0ms при reduced motion
  const duration = await page.evaluate(() =>
    getComputedStyle(document.querySelector('.hero-animation')!).animationDuration
  );
  expect(duration).toBe('0s');
});

// Або встановити для всіх тестів через context при створенні
test('через context — темна тема глобально для всіх сторінок', async ({ browser }) => {
  const context = await browser.newContext({
    colorScheme: 'dark',        // темна тема
    reducedMotion: 'reduce',    // без анімацій
  });
  const page = await context.newPage();
  await page.goto('/products');
  // Всі сторінки в цьому context матимуть темну тему
  await context.close();
});

await browser.newContext({
  geolocation: { latitude: 51.5074, longitude: -0.1278 },
  permissions: ['geolocation'], // ← без цього — системний попап і зависання
  locale: 'en-GB',             // формат цін £1,990.00, дат, мова
  timezoneId: 'Europe/London', // щоб "до опівночі" було детерміновано
});

// Сценарій: сайт показує "Доставка доступна у Лондоні" якщо юзер у Лондоні

test('показує доставку для Лондона', async ({ browser }) => {
  // Створюємо context з явними координатами Лондона
  // Важливо: геолокація встановлюється на CONTEXT, не на page
  const context = await browser.newContext({
    geolocation: { latitude: 51.5074, longitude: -0.1278 }, // Лондон
    permissions: ['geolocation'], // одразу даємо дозвіл — без системного попапу
  });

  const page = await context.newPage();
  await page.goto('/delivery');

  // Сторінка запитала геолокацію → отримала Лондон → показує відповідний контент
  await expect(page.locator('.delivery-info'))
    .toContainText('Доставка доступна у Лондоні');

  await context.close(); // context створили вручну — самі закриваємо
});

// Порівнюємо два міста в одному тесті — потрібно два різних context
test('різний контент для різних міст', async ({ browser }) => {
  const londonCtx = await browser.newContext({
    geolocation: { latitude: 51.5074, longitude: -0.1278 },
    permissions: ['geolocation'],
  });
  const parisCtx = await browser.newContext({
    geolocation: { latitude: 48.8566, longitude: 2.3522 }, // Париж
    permissions: ['geolocation'],
  });

  const londonPage = await londonCtx.newPage();
  const parisPage = await parisCtx.newPage();

  await londonPage.goto('/delivery');
  await parisPage.goto('/delivery');

  await expect(londonPage.locator('.city')).toHaveText('London');
  await expect(parisPage.locator('.city')).toHaveText('Paris');

  await londonCtx.close();
  await parisCtx.close();
});

// Без grantPermissions браузер показує системний попап — тест зависне
// З grantPermissions — дозвіл вже виданий, попап не з'явиться взагалі

test('підписка на push-сповіщення', async ({ browser }) => {
  const context = await browser.newContext({
    permissions: ['notifications'], // юзер вже "натиснув Дозволити"
  });
  const page = await context.newPage();
  await page.goto('/notifications-settings');

  // Кнопка "Підписатись" одразу доступна — без попапу дозволу
  await page.locator('button.subscribe').click();
  await expect(page.locator('.status')).toHaveText('Підписано');
  await context.close();
});

// Можна також видати дозвіл після створення context — через context.grantPermissions()
test('доступ до камери', async ({ context }) => {
  // context тут — стандартна fixture від Playwright
  await context.grantPermissions(['camera', 'microphone']);
  // Далі будь-яка page з цього context матиме ці дозволи
});

// Сценарій: акція "знижка 20% до опівночі" — але чия північ?
// Для японського юзера опівніч настане раніше ніж для британського

test('акція активна для UK, але закінчилась для Японії', async ({ browser }) => {
  // UK юзер — зараз 23:00, акція ще діє
  const ukCtx = await browser.newContext({
    timezoneId: 'Europe/London', // IANA timezone name
  });

  // Японський юзер — ті самі UTC-мілісекунди, але вже завтра 08:00
  const jpCtx = await browser.newContext({
    timezoneId: 'Asia/Tokyo',
  });

  const ukPage = await ukCtx.newPage();
  const jpPage = await jpCtx.newPage();

  await ukPage.goto('/sale');
  await jpPage.goto('/sale');

  await expect(ukPage.locator('.sale-badge')).toBeVisible();    // акція ще є
  await expect(jpPage.locator('.sale-badge')).not.toBeVisible(); // акція скінчилась

  await ukCtx.close();
  await jpCtx.close();
});

// Або через playwright.config.ts — встановити timezone для цілого проєкту:
// use: { timezoneId: 'Europe/London', locale: 'en-GB' }
// Це гарантує що CI в Амстердамі і локальна машина дають однаковий результат

// Сценарій: сесія закінчується через 30 хвилин, показується попап

test('попап "сесія закінчилась" зʼявляється через 30 хвилин', async ({ page }) => {

  // 1. ВСТАНОВЛЮЄМО час ДО переходу на сторінку
  // Фіксуємо "зараз" як 10:00:00 — браузер буде думати що зараз саме цей час
  await page.clock.install({ time: new Date('2024-01-15T10:00:00') });

  // 2. Заходимо на сторінку — всі таймери стартують з нашого фіксованого часу
  await page.goto('/dashboard');

  // 3. Перевіряємо що попапу ще немає (30 хвилин не минуло)
  await expect(page.locator('.session-timeout-modal')).not.toBeVisible();

  // 4. ПЕРЕМОТУЄМО час на 31 хвилину вперед — миттєво, без реального очікування
  // Всі setTimeout/setInterval в браузері спрацюють так ніби минуло 31 хвилина
  await page.clock.fastForward('31:00'); // формат 'хв:сек'

  // 5. Попап зʼявився — перевіряємо
  await expect(page.locator('.session-timeout-modal')).toBeVisible();
  await expect(page.locator('.session-timeout-modal h2'))
    .toHaveText('Ваша сесія закінчилась');
});

// Сценарій: банер "Акція діє ще 2 години" → "Акція закінчилась"

test('банер акції оновлюється коли час вийшов', async ({ page }) => {

  // Встановлюємо час: акція закінчується о 12:00, зараз 10:00
  await page.clock.install({ time: new Date('2024-01-15T10:00:00') });
  await page.goto('/sale');

  // Зараз 10:00 — банер показує залишок часу
  await expect(page.locator('.sale-banner')).toContainText('Акція діє ще');

  // Перемотуємо рівно на 2 години вперед — тепер "12:00:00"
  await page.clock.fastForward('2:00:00'); // формат 'год:хв:сек'

  // Банер оновився — показує що акція закінчилась
  await expect(page.locator('.sale-banner')).toContainText('Акція закінчилась');
});

// Є три способи керувати часом, і вони різні:

// 1. fastForward(time) — перемотує час І одразу виконує всі таймери що спрацювали б
//    Якщо є setTimeout кожні 5 хвилин — всі 6 викликів за 30 хвилин виконаються
await page.clock.fastForward('30:00');

// 2. tick(milliseconds) — те саме, але аргумент в мілісекундах
await page.clock.tick(30 * 60 * 1000); // 30 хвилин в мс

// 3. setSystemTime(time) — просто зсуває годинник БЕЗ виконання таймерів
//    Корисно коли треба що Date.now() повертав інше число,
//    але не треба щоб спрацювали всі проміжні setInterval
await page.clock.setSystemTime(new Date('2024-12-31T23:59:00'));
// Тепер new Date() в браузері = 31 грудня 23:59, але таймери не спрацювали

// ❌ page.clock НЕ допоможе — перемикання прив'язане до CSS-анімації,
// а не до setTimeout, навіть якщо всередині є якийсь async-код
animatePipProgress(6000)
  .onFinish(() => nextSlide());

// ✅ page.clock ДОПОМОЖЕ — перемикання прив'язане напряму до таймера
setTimeout(() => nextSlide(), 6000);

const before = await page.evaluate(() => ({
  date: Date.now(),
  perf: performance.now(),
  timeline: document.timeline.currentTime,
}));

await page.clock.fastForward(6000);

const after = await page.evaluate(() => ({
  date: Date.now(),
  perf: performance.now(),
  timeline: document.timeline.currentTime,
}));

console.log({
  dateDelta: after.date - before.date,         // ≈ 6000 ✓ механічний перемотався
  perfDelta: after.perf - before.perf,         // ≈ 6000 ✓ механічний перемотався
  timelineDelta: after.timeline - before.timeline, // ≈ 1000 ✗ реальний час, не 6000!
});
// timelineDelta сильно менший за очікуване — ось і причина "тест не бачить перемикання"

// ❌ Варіант 1 — форсувати завершення анімації напряму. Технічно працює,
// але тестує НЕ те, що бачить юзер: він ніколи не викликає getAnimations()
await page.evaluate(() => {
  document.getAnimations().forEach(a => { try { a.finish(); } catch {} });
});

// ✅ Варіант 2 — чесний тест: чекаємо реальний час через expect.poll,
// test.slow() дає x3 таймаут щоб компенсувати повільність
test('carousel autoplay advances through slides', async ({ page }) => {
  test.slow();
  await expect
    .poll(() => getActiveSlideIndex(page), { timeout: 7000 })
    .toBe(2);
});

// ✅✅ Варіант 3 — найкраще в довгій перспективі: тестовий хук від фронтенду
// query-параметр що скорочує тривалість автоплею у не-прод збірці —
// тест більше не залежить ні від clock, ні від реального очікування
await page.goto('/plp?autoPlayDuration=100');

// Scroll до елементу щоб тригернути lazy load
await page.locator('.product-card').last().scrollIntoViewIfNeeded();

// Прокрутити до кінця і порахувати всі продукти
let prevCount = 0;
while (true) {
  const cards = page.locator('.product-card');
  const count = await cards.count();
  if (count === prevCount) break; // більше не завантажується
  prevCount = count;
  await cards.last().scrollIntoViewIfNeeded();
  await page.waitForTimeout(500); // виняток: немає DOM сигналу — єдиний виправданий waitForTimeout
}

// Virtualized list — DOM рендерить тільки видимі елементи
// Шукаємо конкретний елемент через scroll
await page.evaluate(async () => {
  const container = document.querySelector('.virtual-list')!;
  container.scrollTop = 5000;
});
await expect(page.getByText('Product #200')).toBeVisible();

export default defineConfig({
  use: {
    // 'block' — Service Workers не реєструються взагалі
    // Всі мережеві запити йдуть напряму, page.route() і page.on('request') працюють нормально
    serviceWorkers: 'block',

    // 'allow' — за замовчуванням, Service Workers працюють як в реальному браузері
    // serviceWorkers: 'allow',
  },
});

test('мок API відповіді на сторінці з PWA', async ({ browser }) => {
  // Створюємо context з вимкненим Service Worker
  const context = await browser.newContext({
    serviceWorkers: 'block',
  });
  const page = await context.newPage();

  // Тепер page.route() точно спрацює — Service Worker не перехоплює
  await page.route('**/api/products', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ items: [{ id: 1, name: 'Trench Coat' }] }),
    });
  });

  await page.goto('/products');
  await expect(page.locator('.product-name')).toHaveText('Trench Coat');
  await context.close();
});

// Якщо треба ТЕСТУВАТИ саму PWA функціональність — не вимикаємо, а взаємодіємо
test('Service Worker реєструється успішно', async ({ page }) => {
  const workers: any[] = [];

  // Підписуємось до goto — щоб не пропустити реєстрацію при завантаженні
  page.on('worker', worker => {
    workers.push(worker);
    console.log('Worker зареєстровано:', worker.url());
  });

  await page.goto('/');

  // Чекаємо поки Service Worker зареєструється
  await page.waitForFunction(() =>
    navigator.serviceWorker.ready.then(() => true)
  );

  // Перевіряємо що worker зареєстрований
  expect(workers.length).toBeGreaterThan(0);
  expect(workers[0].url()).toContain('service-worker.js');
});

test('сторінка працює офлайн (PWA кеш)', async ({ page, context }) => {
  // Спочатку завантажуємо онлайн — Service Worker кешує ресурси
  await page.goto('/');
  await page.waitForFunction(() =>
    navigator.serviceWorker.ready.then(() => true)
  );

  // Вмикаємо офлайн режим через context
  await context.setOffline(true);

  // Перезавантажуємо — має відповісти Service Worker з кешу
  await page.reload();

  // Сторінка має завантажитись навіть без мережі
  await expect(page.locator('h1')).toBeVisible();
  await expect(page.locator('.offline-banner')).toBeVisible();
});

test('сторінка показує кешований контент офлайн', async ({ page, context }) => {
  // 1. Завантажуємо сторінку онлайн — Service Worker кешує ресурси
  await page.goto('/products');
  await page.waitForLoadState('networkidle');

  // 2. Вимикаємо мережу
  await context.setOffline(true);

  // 3. Перезавантажуємо — має показати кешований контент
  await page.reload();
  await expect(page.locator('.product-grid')).toBeVisible();
  await expect(page.locator('.offline-banner')).toBeVisible();
});

test('PWA manifest налаштований коректно', async ({ page }) => {
  await page.goto('/');

  // Перевіряємо що manifest підключений
  const manifestLink = page.locator('link[rel="manifest"]');
  await expect(manifestLink).toHaveAttribute('href', /manifest\.json/);

  // Завантажуємо і перевіряємо вміст manifest
  const manifestUrl = await manifestLink.getAttribute('href');
  const response = await page.request.get(manifestUrl!);
  const manifest = await response.json();

  expect(manifest.name).toBeTruthy();
  expect(manifest.icons).toHaveLength(expect.any(Number));
  expect(manifest.start_url).toBeTruthy();
});

route.request()           // інформація про запит — екземпляр класу Request
route.request().url()      // URL запиту
route.request().method()   // GET, POST, PUT...
route.request().headers()  // headers запиту
route.request().postData() // тіло POST запиту

route.fulfill()   // відповісти своєю відповіддю
route.continue()  // пропустити запит далі на сервер
route.fetch()     // виконати запит і отримати відповідь в Node.js
route.abort()     // заблокувати запит повністю

// Замінити відповідь API
await page.route('**/api/products', async (route) => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([
      { id: 1, name: 'Test Product', price: 99.99 }
    ]),
  });
});

// Модифікувати реальну відповідь
await page.route('**/api/user', async (route) => {
  const response = await route.fetch();
  const json = await response.json();
  json.isPremium = true;  // додаємо поле
  await route.fulfill({ json });
});

// Блокувати запити (аналітика, ads)
await page.route('**/*.{png,jpg,css}', route => route.abort());

// Шпигувати за запитами (без перехоплення)
page.on('request', req => {
  if (req.url().includes('/api/')) console.log(req.method(), req.url());
});

// Реальний сервер не викликається — відповідь повністю вигадана
await page.route('**/api/products', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({
      items: [
        { id: 'SKU-001', name: 'Trench Coat', price: 1990 },
        { id: 'SKU-002', name: 'Scarf', price: 290 },
      ]
    }),
  });
});

await page.goto('/products');
// Сторінка отримала наш мок — завжди одні й ті самі дані, стабільно

// Запит іде на реальний сервер, але з нашими зміненими headers
await page.route('**/api/**', async route => {
  // Беремо оригінальні headers і додаємо свої
  const headers = {
    ...route.request().headers(), // всі оригінальні headers
    'Authorization': 'Bearer test-token-123', // додаємо токен
    'X-Test-Mode': 'true',               // додаємо кастомний header
  };

  // Відправляємо з нашими headers — відповідь іде напряму в браузер
  await route.continue({ headers });
});

// Можна також змінити тіло POST запиту:
await page.route('**/api/cart/add', async route => {
  const originalBody = JSON.parse(route.request().postData() || '{}');

  // Підміняємо SKU на тестовий товар
  const modifiedBody = { ...originalBody, sku: 'TEST-SKU-999' };

  await route.continue({
    postData: JSON.stringify(modifiedBody),
    headers: {
      ...route.request().headers(),
      'Content-Type': 'application/json',
    },
  });
});

// "Людина посередині": запит пішов на сервер, відповідь прийшла до нас,
// ми її змінили і віддали браузеру
await page.route('**/api/products', async route => {
  // 1. Виконуємо реальний запит — отримуємо справжню відповідь
  const response = await route.fetch();
  const body = await response.json();

  // 2. Модифікуємо відповідь — додаємо тестовий товар у список
  body.items.push({ id: 'TEST-001', name: 'Test Product', price: 0 });

  // 3. Повертаємо модифіковану відповідь браузеру
  await route.fulfill({
    status: response.status(),          // оригінальний статус
    headers: response.headers(),        // оригінальні headers
    body: JSON.stringify(body),          // модифіковане тіло
  });
});

// Блокуємо всі запити до аналітики — тести не залежать від сторонніх сервісів
await page.route('**/{analytics,tracking,ads}/**', route => route.abort());

// Блокуємо зображення — тести швидші якщо нам не важлива візуальна частина
await page.route('**/*.{png,jpg,jpeg,gif,webp,svg}', route => route.abort());

// Перевіряємо що запит до видаленого ресурсу повертає 404:
await page.route('**/api/deleted-product', route =>
  route.fulfill({ status: 404, body: 'Not Found' })
);

// Різні правила для різних URL — призначаємо кілька route одночасно
test('checkout з моком API і реальним сервером авторизації', async ({ page }) => {
  // Мокаємо продукти — стабільні тестові дані
  await page.route('**/api/products/**', route =>
    route.fulfill({ status: 200, body: JSON.stringify({ price: 1990 }) })
  );

  // Блокуємо аналітику — не хочемо зовнішніх запитів
  await page.route('**/gtm.js', route => route.abort());

  // Auth запити — додаємо тестовий токен але відправляємо реально
  await page.route('**/api/auth/**', async route => {
    await route.continue({
      headers: { ...route.request().headers(), 'X-Test-Token': 'abc123' }
    });
  });

  await page.goto('/checkout');
});