Асинхронність у Cypress та Playwright реалізована абсолютно по-різному, і це одна з головних концептуальних відмінностей між цими фреймворками.

1. Cypress: Ланцюжки команд та власна черга (Cypress Queue)

Код у Cypress виглядає синхронним, але насправді він використовує ланцюжки команд (Command Chaining) та внутрішню чергу виконання.

• Без async/await: Cypress категорично не підтримує використання async/await всередині тестів.
• Як це працює: Коли запускається файл тесту, Cypress спочатку швидко проходить по всіх рядках коду і «записує» команди у внутрішню чергу (execution queue). Тільки після цього він починає послідовно виконувати ці команди одна за одною.
• Передача даних: Оскільки команди не повертають стандартний JavaScript Promise, ви не можете просто зберегти результат у змінну const button = cy.get('button'). Щоб працювати з результатами виконання команд, використовуються колбеки через .then():

JavaScript

// Cypress
it('test', () => {
  cy.get('button').click(); // Додається в чергу
  cy.get('.status').then(($el) => { // Виконується тільки коли дійде черга
    const text = $el.text();
    expect(text).to.equal('Success');
  });
});

2. Playwright: Нативний асинхронний JavaScript (async/await)

Playwright повністю побудований на нативних Promises та стандартному асинхронному JavaScript / TypeScript.

• Використання async/await: Кожен виклик API (клік, пошук елемента, перехід за URL) повертає чесний Promise.
• Як це працює: Код виконується саме в тому порядку, у якому він написаний, згідно зі стандартом JS event loop. Браузер реагує на асинхронні події напряму через Node.js.
• Передача даних: Ви можете вільно зберігати результати асинхронних операцій у звичайні змінні:

TypeScript

// Playwright
test('test', async ({ page }) => {
  await page.click('button');
  const text = await page.locator('.status').textContent(); // Нативний Promise
  expect(text).toBe('Success');
});

Порівняння пліч-о-пліч

Критерій	Cypress	Playwright
Механізм	Власна черга команд (Cypress Command Queue)	Нативний async/await (Promises)
Використання async/await	❌ Заборонено (призведе до непередбачуваного порядку виконання)	✅ Обов’язково (стандартний синтаксис JS/TS)
Налагодження (Debugging)	Складніше через «магічну» чергу, використовується console.log всередині .then() або cy.debug()	Просте та звичне (стандартні точки зупинки breakpoint у VS Code / DevTools)
Робота зі змінними	Через колбеки .then(($el) => ...) або псевдоніми (aliases)	Через звичайні змінні const val = await ...
Паралельне виконання	Команди всередині одного тесту суворо послідовні	Можна використовувати Promise.all() (наприклад, для паралельного очікування відповіді мережі та кліку)