Node.js — це середовище де може виконуватись JavaScript поза браузером.

Спочатку JavaScript існував тільки в браузері — міг маніпулювати DOM, реагувати на кліки, відправляти запити. Але не міг читати файли з диску, запускати сервер, чи взаємодіяти з операційною системою. Node.js змінив це у 2009 — взяв JavaScript рушій з Chrome (V8) і запустив його окремо як самостійну програму на комп’ютері.

Тепер JavaScript може робити все що раніше робили тільки серверні мови: читати і писати файли, запускати HTTP сервер, підключатись до бази даних, запускати тести.

Браузер — середовище де є window, document, DOM, localStorage
Node.js — середовище де є файлова система, мережа, процеси ОС, npm пакети
Один і той самий JavaScript — два різних середовища виконання

WebSocket — це постійне двостороннє з’єднання між двома програмами.

Звичайний HTTP запит: клієнт питає → сервер відповідає → з’єднання закривається. Як SMS — відправив, отримав відповідь, все. WebSocket інакший: з’єднання відкривається один раз і лишається відкритим. Обидві сторони можуть надсилати повідомлення одна одній в будь-який момент. Як телефонна розмова — лінія відкрита, говорять обидва.

Як це пов’язано з Playwright: коли ти запускаєш тест — він виконується в Node.js. Playwright відкриває WebSocket з’єднання з браузером один раз на початку і тримає його відкритим весь тест. Через цей канал Node.js надсилає команди браузеру (“клікни тут”, “заповни це поле”, “виконай цю функцію”) і отримує результати назад. Саме тому змінні з Node.js недоступні в браузері — це фізично різні процеси, між ними тільки WebSocket канал.

Схема: Node.js і браузер — два окремих світи

// ══════════════════════════════════════════════════════════════════
// 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 передає команди

🔧 TypeScript / JS патерни в цьому прикладіasync function — функція яка може “чекати” (await) інші асинхронні операції; async/await — синтаксичний цукор над Promise, робить асинхронний код схожим на синхронний; { page } — деструктуризація об’єкта (object destructuring): витягуємо конкретне поле з об’єкта; стрілочна функція () => {} — скорочений синтаксис функції.

🗣 Як читати вголосNode.js — це середовище де JavaScript може виконуватись поза браузером: читати файли, запускати сервери, підключатись до баз даних. Саме в Node.js виконується твій Playwright тест — там живуть всі змінні, об’єкт page, функції expect. Браузер — це окремий процес де живе JavaScript сторінки: window, document, React, dataLayer. Це два різних середовища які не бачать одне одного напряму. Playwright з’єднує їх через WebSocket — це постійне двостороннє з’єднання яке відкривається один раз на початку тесту і тримається відкритим до кінця. Через цей канал Node.js надсилає браузеру команди і отримує результати назад. Коли ти передаєш функцію в page.waitForFunction() або page.evaluate() — Playwright бере текст цієї функції, відправляє через WebSocket в браузер, і браузер виконує її у себе. Але змінні з Node.js туди не переїжджають — це як скопіювати текст функції на інший комп’ютер, змінні з першого комп’ютера там не з’являться. Тому closure не працює через цю межу, і змінні треба явно передавати як аргументи — тоді Playwright серіалізує їх в JSON і відправить разом з функцією.