Cypress

Дванадцять маршрутів магазину в Cypress на одному екрані — нативно чи в обхід

Питання, з яким команда приходить на цю сторінку, — чи пасує Cypress її продукту, і чесно відповісти на нього можна лише маршрут за маршрутом. Нижче — дванадцять маршрутів зі сторінки «Наскрізне тестування», той самий інтернет-магазин, — так, як магазин написав би їх на Cypress. Третя колонка каже, що потрібно Cypress для кожного; четверта дає вердикт. «Нативно» означає, що це робить звичайний APIAPIApplication Programming Interface — контракт між програмамиПравила, за якими одна програма звертається до іншої: які запити можна надіслати, у якому вигляді й що прийде у відповідь. Для того, хто звертається, це контракт — усе, що за ним, лишається чорною скринькою, і саме тому другий бік можна переписати, не зламавши вас.Докладніше в статті →Усі терміни. «В обхід» означає, що це можна зробити — налаштуванням, окремим блоком чи експериментальним прапорцем — і з ціною, яку рядок називає. Наступні розділи посилаються на маршрути за номерами.

Команда може оминути iframeiframeсторінка всередині сторінкиHTML-елемент, що вбудовує інший документ у сторінку, — платіжну форму, відео, вікно входу. Коли він з іншого домену, браузер відгороджує його від сторінки навколо, і тому інструмент тестування може як змогти, так і не змогти щось у нього ввести.Усі терміни, оплачуючи через API провайдера тестовим токеном замість введення картки. Тоді маршрут іде всюди — і перестає доводити шов, заради якого існує, — рядок 4 сторінки «Наскрізне тестування»: сума на екрані — це сума, яку просять списати провайдера. Така форма більшості рішень щодо Cypress. Інструмент пропонує шлях в обхід кожного краю, і кожен такий шлях трохи віддаляє тест від того, що робить клієнт.

Тест живе у вкладці — і чотири компроміси, які Cypress називає постійними

Більшість автоматизації браузера — дистанційне керування: тест — це програма деінде, що надсилає браузеру інструкції й читає відповіді. Cypress це перевертає. Ваш застосунок завантажується в iframe, тест завантажується поруч у тій самій вкладці, і обидва працюють на одному event loopevent loopодин потік, що виконує все по черзіЦикл в одному потоці, що бере з черги готову роботу — відповідь, яка прийшла, таймер, що спрацював, — і виконує її колбек, по одному за раз. Він дає одному потоку тримати тисячі очікувань одночасно й зупиняється для всіх, поки виконується будь-який один колбек.Докладніше в статті →Усі терміни JavaScript. Між тестом і сторінкою немає дроту, тож тест дістає до застосунку так, як міг би скрипт на самій сторінці. Усе поза браузером — файл, база даних, тестова скринька — іде через другий процес, Node.js, з яким тест говорить через cy.task().

Від Cypress 16, що вийшов 1 вересня 2026 року, одна частина цієї картини змінилася. У Chrome, Chromium та Edge Cypress тепер перехоплює трафік тестів у власній мережі браузера, а не пропускає його через свій проксі, тож застосунок тестують по HTTPHTTPHyperText Transfer Protocol — протокол вебуПротокол, яким спілкуються браузер і сервер: клієнт надсилає метод і адресу, сервер відповідає кодом стану й тілом. Між запитами він нічого не памʼятає — кожен запит стоїть сам по собі, тому все, що треба памʼятати, передається явно.Усі терміни/2 і HTTP/3 з його справжнім сертифікатом. Firefox, WebKit і Electron досі йдуть старим шляхом крізь проксі. Тож той самий cy.intercept() працює двома різними мережевими шляхами залежно від браузера, і кілька його поведінок між ними різняться.

Власна документація Cypress перелічує ціну життя у вкладці під заголовком «Trade-offs» і чотири з цих компромісів називає постійними. Їх варто прочитати її словами, бо це не проблеми конфігурації, які прибере наступна версія.

Та сама сторінка називає три «тимчасові», які Cypress сподівається розвʼязати: немає cy.hover(), немає підтримки нативних чи мобільних подій, а підтримка iframe «дещо обмежена» — фрейми з того самого домену можна запитувати, з іншого — ні. Останній із цих пунктів і вирішив чотири вердикти магазину.

Команди стають у чергу, а не виконуються — чому `await`, `try/catch` і `if` поводяться дивно

Наслідок, з яким стикаються першим: команди Cypress — не те, чим здаються. Документація каже прямо: команди нічого не роблять у момент виклику, а ставлять себе в чергу, щоб виконатися пізніше. Рядок, що просить елемент, не дістає його й не повертає. Він додає команду в чергу, яка починає виконуватися лише після того, як уся функція тесту завершилася. Тож значення не можна присвоїти з команди у змінну й використати наступним рядком: коли читається наступний рядок, ще нічого не виконалося.

Черга пояснює й налагодження, заради якого Cypress обирають. Оскільки раннер сам виконує кожну команду всередині сторінки, він тримає знімок сторінки для кожної команди, і Command Log дає навести на крок і побачити сторінку такою, якою вона була тієї миті. Команди йдуть одна за одною, ніколи паралельно, і документація називає це свідомим рішенням, а не технічним обмеженням: мета — тест, що поводиться однаково від запуску до запуску.

Повторність від Cypress 12: ланцюжок запитів повторюється з початку

Cypress не чекає на сторінку фіксований час. Він ділить команди на види й повторює ті, що лише читають. Запити — cy.get(), .find(), .contains(), .eq() тощо — звʼязуються з перевірками після них, і якщо перевірка падає, Cypress знову проганяє весь ланцюжок запитів із початку, типово до чотирьох секунд. Дії на кшталт .click() і .type() — не запити: вони чекають, доки елемент стане придатним для дії, повторюючи запити перед собою, поки чекають, і потім діють один раз.

Поради, написані до грудня 2022 року, і чимало тих, що досі їх копіюють, кажуть протилежне: що повторюється лише останній запит перед перевіркою, тож список, який перерендерюється, лишає тест із відʼєднаним елементом. Так було в Cypress до версії 11. Cypress 12 це змінив, і правило, що прийшло на заміну, має одну межу, яку варто засвоїти. Перевірка посередині ланцюжка, щойно пройде, фіксує субʼєкт; запити після неї повторюються від цього зафіксованого субʼєкта, а не з початку. Якщо сторінка перерендериться між двома перевірками, зафіксованого елемента вже немає — і тест падає.

Ізоляція, сесії й бік Node

Від Cypress 12 ізоляція тестів увімкнена за замовчуванням. Перед кожним тестом Cypress відкриває about:blank і очищає cookiecookieдані, які браузер надсилає назадНевеликий фрагмент даних, який сайт просить браузер зберегти й надсилати назад із кожним запитом до цього сайту, — так сервер пам’ятає, що ви увійшли. Оскільки браузер додає його автоматично, навіть до запиту, який спровокував інший сайт, cookie сесії потребує правильних прапорців і перевірки проти підробки запитів на сервері.Усі терміни, localStorage і sessionStorage на всіх доменах, тож маршрут не успадковує стан іншого. Різницю з Playwright варто знати точно. Playwright дає кожному тесту новий контекст браузера — цілий новий профіль. Cypress прибирає той самий браузер між тестами, і його документація каже, що лишається: IndexedDB та інші механізми сховища браузера не очищаються. Магазин, що тримав би гостьовий кошик в IndexedDB, мусив би сам очищати його перед маршрутом 11.

Доступ усередину застосунку заслуговує окремого застереження. Оскільки тест ділить сторінку, він може викликати функції застосунку, читати його стор чи стежити за методом. Це чудово для підготовки стану, до якого інакше вести шість кліків, і погано для перевірки поведінки: перевірка, написана по нутрощах, привʼязана до того, як збудовано фічу, тож рефакторинг, що нічого не змінює для клієнта, ламає набір. Готуйте зсередини; перевіряйте через те, що бачить людина.

Паралельно за файлами специфікацій, під керуванням Cypress Cloud

Cypress запускає один браузер за раз на машині, тож швидший набір означає більше машин. Його паралелізація — за файлами: машинам роздають цілі файли специфікацій, ніколи окремі тести. Роздає їх Cypress Cloud. Кожна машина запускає cypress run --record --parallel, Cloud оцінює тривалість кожної специфікації за попередніми запусками й дає кожній машині по одній, доки не скінчаться. Без Cloud команда все одно може розділити специфікації між машинами вручну, але такий поділ статичний і не вчиться.

У Cloud також налагоджують падіння в CI. Test Replay, що зʼявився в Cypress 13 у серпні 2023 року, записує DOM, мережеві запити й консоль кожного тесту в CI і дає розробнику пройти запуск у браузері пізніше; документація каже, що він доступний на всіх планах Cloud без доплати, у межах лімітів використання. Запис відео з того самого релізу вимкнено за замовчуванням. Обидва факти вказують в один бік: частини досвіду Cypress, що найбільше важать у CI, — балансування й відтворення — це хостований сервіс, і це вибір, який варто робити з розплющеними очима, а не деталь, яку виявляють згодом.

Чотири зміни під робочими наборами

Кожна з цих змін — датована, і опублікував її сам Cypress. Жодна не є дефектом. Кожна зрушила щось, на що набір встиг покластися, а третя колонка — те, що зробило цей зсув справою пообіддя, а не тижня.

Де він не допомагає і як порівнюється

Життя всередині вкладки — справжнє архітектурне зобовʼязання, і кожне обмеження нижче випливає з нього. Жодне не є скандалом; кожне варто знати до вибору, бо наступна версія його не прибере.

• Iframe з іншого домену — платіжну форму, вбудований вхід — не автоматизувати без вимкнення вебзахисту, а це працює лише в браузерах родини Chrome.
• Один браузер за раз, тож двох користувачів, що діють разом, — живий чат, агента, що бачить екран клієнта, — з одного боку підмінюють, а не тестують.
• WebKit експериментальний і приходить через збірку WebKit від Playwright; це теж не Safari.
• Паралельність — за файлами специфікацій між машинами, а добре її балансувати — це сервіс Cloud.
• Нативні діалоги, вибір файлів і все на рівні операційної системи лежать поза сторінкою, а отже, поза досяжністю.
• cy.prompt(), у бета-версії, пише кроки зі звичайної англійської й позначає крок, що відновився, як «Self-healed». Вилікуваний крок — це змінений тест, і він заслуговує на рев’ю, як будь-яка інша зміна.

Антипатерни, які варто назвати

• Чекати фіксовану кількість мілісекунд — саме цю звичку модель повторів і має зробити непотрібною.
• Логінитися через інтерфейс на початку кожного тесту — пʼять секунд на кейс, щоб довести те, що cy.session() довів один раз.
• Умовна логіка тесту за тим, що є на сторінці: виходить тест, який не може впасти, бо підлаштовується під усе.
• Підміняти кожен запит, аж поки набір не перестане тестувати будь-яку інтеграцію, і звітувати про це як про наскрізне покриття.
• Один файл специфікації на фічу, тож найдовша фіча задає нижню межу кожного запуску.
• chromeWebSecurity: false, увімкнений для всього набору заради одного iframe, — і кожен маршрут тихо перестає йти у Firefox і WebKit.

Коли це застосовувати

Пов’язані сторінки

• QAPlaywrightPlaywright — відкрита бібліотека автоматизації браузера й раннер тестів від Microsoft, що керує Chromium, Firefox і WebKit ззовні браузера. Сторінка починається з дванадцяти маршрутів зі сторінки «Наскрізне тестування», написаних на Playwright, — механізму, на який спирається кожен, і конфігурації, що проганяє їх приблизно за чотири хвилини, — далі одне зʼєднання, з якого випливає все, браузери, які він насправді запускає, автоочікування, контексти й воркери, чого тест може дістати, крім сторінки, траси й повтори, чотири зміни під робочими наборами і де він не допомагає.
• QASeleniumSelenium — відкритий набір інструментів автоматизації браузера на основі W3C WebDriver, стандарту, який вендори браузерів реалізують у власних драйверах. Сторінка починається з дванадцяти маршрутів зі сторінки «Наскрізне тестування», написаних на Selenium, — хто що забезпечує в кожному, — і з того одного запуску, який до набору магазину може додати лише Selenium: браузери, які клієнти справді встановлюють, включно з Safari на iPhone. Далі протокол і його драйвери, очікування, сесії й доріжка, яку задає один Mac, WebDriver BiDi, grid і його відчинені двері, пʼять змін під робочими наборами і де він не допомагає.
• QAНаскрізне тестування (E2E)Наскрізне тестування проводить бізнес-процес через зібрану систему від початку до кінця, як це зробив би клієнт, в умовах, близьких до продакшну. Сторінка починається з повного набору одного магазину — дванадцять маршрутів, шов, який доводить лише кожен із них, і що в ньому справжнє, а що підмінене, — далі що не доведе жоден нижчий рівень, яких форм набуває набір тестів, чого коштує червоний маршрут, як обирати маршрути й тримати їх надійними, і три збої, де тест зупинився за крок до кінця.