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-тестам, которым никто не верит.
• Игнорировать упавший тест. Красный тест - это сигнал, а не помеха. Чинить, а не отключать «чтобы не мешал».
• Гонять денежные тесты на боевом сайте. Тесты с оплатой - только на тестовой копии.