E2E-тести простими словами: робот тестує сайт замість тебе

Що таке E2E-тест простими словами

Уяви, що ти зібрав шафу з IKEA. Стоїть, дверцята на місці, краса. Але перш ніж завантажити туди улюблений сервіз - ти ж посмикаєш кожну полицю й перевіриш, чи не випадає шухляда? Звісно. Інакше на третій день полиця з посудом гримне просто на кота.

Із сайтом усе так само. Ти (точніше, твій агент) зібрав лендинг чи застосунок. Воно ніби працює. Але «ніби» - це не перевірка, а надія. Хтось має відкрити сайт як живий відвідувач, понатискати кнопки, заповнити форми й переконатися, що нічого не відвалилося.

Цим «кимось» може бути терпляча людина, яка клікає те саме сто разів і тихенько ненавидить свою роботу. А може бути E2E-тест E2E (end-to-end, «від краю до краю») - тест, що перевіряє весь шлях користувача цілком: від заходу на сайт до отримання результату, ніби за компʼютером сидить жива людина. - маленький робот, якому ти один раз пояснив, що робити, і він повторює це бездоганно, безкоштовно й без вигорання хоч тисячу разів поспіль.

Навіщо E2E-тести потрібні вайбкодеру

Ти вайбкодер. Тести руками ти не пишеш. Але якщо ти розумієш, навіщо вони потрібні і як попросити агента їх зробити, то отримуєш одразу чотири речі:

• ловиш поломки до того, як їх побачить клієнт - а не з гнівного повідомлення о другій ночі;
• спокійно правиш сайт далі: робот тут-таки скаже, що саме ти щойно зламав;
• заощаджуєш години на ручній переперевірці в дусі «а чи все ще працює»;
• маєш вигляд профі. Фраза «у мене є тести» звучить солідно навіть для замовника.

Без тестів кожна нова фіча - лотерея. Полагодив одне, потайки зламав інше, дізнався про це випадково. З E2E-тестами в тебе є сторож, який обходить весь сайт за секунди.

Як Claude пише E2E-тести: робот у справжньому браузері

Головний інструмент тут - Playwright Playwright - безкоштовний інструмент від Microsoft, що запускає справжній браузер (Chrome, Firefox, Safari) і керує ним із коду: відкриває сторінки, клікає, друкує, перевіряє результат. . Це руки й очі робота. Він відкриває справжній браузер, заходить на твій сайт і поводиться як живий користувач. Не симуляція, не емуляція - реальний Chrome, яким керує код.

Тест - це сценарій користувача, а не код

Хороший E2E-тест читається майже як інструкція бабусі: «зайди на сторінку, введи слово в пошук, перевір, що зʼявилися результати». Ти описуєш шлях людини, а не нутрощі коду. Оце і є весь секрет.

Ось як виглядає такий тест. Писати руками не треба - це зробить агент, але корисно вміти його впізнати:

test('пошук знаходить товари', async ({ page }) => {
  await page.goto('/items')          // відкрили сторінку
  await searchInput.fill('тест')      // надрукували в пошук
  expect(count).toBeGreaterThan(0)    // перевірили: щось знайшлося
})

Прочитав уголос - і зрозуміло, що відбувається. Так і має бути.

Чіпляйся за data-testid, а не за текст і колір

Робот має якось знаходити кнопку на сторінці. Можна чіплятися за текст («кнопка з написом Купити») - але це крихко. Поміняв текст на «Замовити», і тест упав на рівному місці, хоч сайт працює ідеально.

Тому профі вішають на елементи невидиму мітку - data-testid data-testid - спеціальний невидимий ярличок на елементі сторінки (наприклад data-testid='купити'). Користувач його не бачить, але тест за ним безпомилково знаходить потрібну кнопку, навіть якщо змінився текст чи колір. . Це як бирка на валізі. Саму валізу можна перефарбувати хоч у рожевий, а бирка з номером залишається - і робот завжди знайде потрібне.

Чекай подію, а не «просто зачекай»

Сайт вантажиться не миттєво. Робот часто прибігає до кнопки раніше, ніж вона зʼявилася, - і спотикається носом об порожнє місце. Новачковий рефлекс тут один: «хай зачекає 5 секунд». Це найгірше з можливих рішень. На швидкому інтернеті ти подарував тесту 5 секунд простою на рівному місці. А на повільному цих 5 секунд не вистачило, і тест усе одно впав.

Як правильно? Чекати конкретну подію: «дочекайся, поки завантажаться дані», «дочекайся, поки кнопка стане видимою». Робот чекає рівно стільки, скільки треба, і ні секундою більше.

Хороший E2E-тест проти поганого: у чому різниця

Приклад із життя: як анімація зламала замовлення

Ти зробив інтернет-магазинчик. Усе працює. За тиждень агент на твоє прохання додав гарну анімацію на кнопку «Купити». Ти порадів, задеплоїв, пішов спати зі спокійною душею.

Зранку - повідомлення: «у мене не оформлюється замовлення». Виявилося, анімація наїхала поверх кнопки, і натиснути її стало фізично неможливо. Ти про це не дізнався. Чому? Бо сам не переперевіряв оформлення замовлення - навіщо, ти ж чіпав тільки анімацію.

А тепер уяви те саме з E2E-тестами. Після правки робот сам пройшов би шлях «обрав товар, натиснув Купити, заповнив форму, побачив Дякуємо за замовлення», спіткнувся б на невидимій кнопці, зробив скриншот і заволав «ЗЛАМАНО» ще до деплою. Без зіпсованого ранку й без втраченого клієнта.

Щоб отримати такого робота, самому писати нічого не треба. Достатньо правильно попросити агента:

Напиши E2E-тести на Playwright для мого сайту. Покрий головні сценарії живого користувача:

Захід на головну й перевірка, що сторінка відкрилася.
Оформлення замовлення цілком: обрати товар, натиснути Купити, заповнити форму, побачити підтвердження.
Пошук по сайту: ввести слово й перевірити, що зʼявилися результати.
Важливі правила:

Чіпляйся за data-testid, а не за текст чи колір. Де їх немає - додай.
Не використовуй фіксовані паузи. Чекай конкретні події: завантаження даних, появу елемента.
У разі падіння роби скриншот, щоб було видно, що зламалося.
Поясни простими словами, як мені запускати ці тести однією командою.

Де без E2E-тестів не можна, а де можна розслабитися

Є місця, де поломка коштує не нервів, а реальних грошей. Там тести - не розкіш, а обовʼязок. А є зони, де можна видихнути й не запарюватися. Ось межа:

Запускай тести автоматично перед кожним деплоєм

Один раз написати тести - замало. Про них зрадницьки легко забути. Тому профі роблять так, щоб тести запускалися самі з кожним оновленням сайту. Зветься це CI/CD - конвеєр автозапуску. Робот перевіряє все перед публікацією, і якщо хоч щось горить червоним - сайт просто не викочується, поки не полагодиш.

Налаштовувати це руками не треба. Попроси агента: «налаштуй автозапуск E2E-тестів перед кожним деплоєм». І все. Так тести перетворюються з «колись перевірю» на постійну страховку, яка не спить.

Часті помилки новачка в E2E-тестах

• Не писати тести взагалі. «Я ж перевірив» працює рівно до першої правки, яка потайки все зламала.
• Тестувати код, а не користувача. Тест має проходити шлях живої людини, а не колупатися в нутрощах.
• Чіплятися за текст і колір. Поміняв напис - упав тест. Використовуй data-testid.
• Пхати паузи «зачекай 5 секунд». Це прямий шлях до flaky-тестів, яким ніхто не вірить.
• Ігнорувати тест, що впав. Червоний тест - це сигнал, а не завада. Лагодити, а не вимикати «щоб не заважав».
• Ганяти грошові тести на бойовому сайті. Тести з оплатою - тільки на тестовій копії.