Писать тесты против реального продакшн-сайта выглядит очевидным способом практиковаться. Но стоит появиться CAPTCHA, или CSS-класс переименуется в деплое о котором ты не знал, и ты не потратишь два часа на отладку сломанного селектора вместо изучения техники. Практические сайты созданные для автоматизации имеют стабильные data-testid атрибуты, предсказуемое состояние и сценарии специально охватывающие то о чём реально спрашивают на собеседованиях. Статья описывает что есть в lab.becomeqa.com, как сценарии соответствуют конкретным техникам автоматизации, и какие другие практические сайты покрывают то чего нет в лабе.

Почему нельзя просто практиковаться на случайных сайтах

Очевидный подход: открыть какой-нибудь сайт и писать тесты против него. Работает до поры.

Реальные сайты меняются без предупреждения. Форма логина получает новую CAPTCHA. ID элементов меняются. CSS-класс на который ты опирался переименовывается в деплое о котором ты никогда не узнал. Тест-сьют ломается в случайный момент, а отладка занимает больше времени чем написание тестов.

Практические сайты для тестирования устроены иначе. Стабильные селекторы, предсказуемое состояние, фичи специально разработанные под сценарии автоматизации. Можно сбрасывать данные, создавать пользователей, ломать что угодно и экспериментировать без последствий.

Что делает практический сайт хорошим

Полезное практическое окружение имеет:

  • Аутентификация: потоки логина/логаута, защищённые маршруты, обработка неверных учётных данных
  • Таблицы с данными: сортировка, фильтрация, пагинация, выбор строк
  • Формы: ошибки валидации, обязательные поля, выпадающие списки, выборщики дат
  • Модальные окна: открытие/закрытие, диалоги подтверждения, отправка формы внутри модала
  • Загрузка файлов: drag and drop, валидация типа файла, индикатор загрузки
  • API: тот же бэкенд доступный напрямую для API-тестирования параллельно с UI-тестами
  • Стабильные селекторы: атрибуты data-testid или надёжные ID которые не изменятся

Покрытие сценариев важнее визуальной красоты. Сайт для практики будет иметь всё это; случайный продакшн-сайт: от силы два пункта.

Практическая среда lab.becomeqa.com

Мы создали специальную практическую лабу для упражнений этого курса. Она живёт на lab.becomeqa.com и бесплатна.

Что там есть:

Логин / Аутентификация

  • Корректный поток логина (email + пароль)
  • Неверные учётные данные → сообщение об ошибке
  • Защищённые маршруты которые редиректят на логин если не аутентифицирован
  • Логаут

Таблица Travel Items (основная рабочая область)

  • Добавление, редактирование, удаление элементов
  • Колонка статуса: Planned, In Progress, Completed
  • Фильтрация по статусу
  • Сортировка по колонкам
  • Пагинация

Модальные окна

  • Добавление элемента открывает модал с формой
  • Редактирование элемента: тот же модал, предзаполненный
  • Модал подтверждения удаления
  • Закрытие кликом на X, кликом вне модала, нажатием Escape

Раздел загрузки файлов

Загрузка файлов кликом или drag-and-drop, валидация типа и размера файла, индикатор прогресса загрузки.

Платёжная форма (для практики валидации форм)

Номер карты, срок действия, CVV; ошибки валидации при неверном вводе; симулированный платёжный поток.

API (тот же бэкенд)

REST-эндпоинты для всех операций с данными, аутентификация через Bearer-токен (те же учётные данные что и для UI-логина), OpenAPI-документация доступна по /api-docs.

Учётные данные по умолчанию

URL:      https://lab.becomeqa.com
Email:    admin@becomeqa.com
Password: admin123

Это общие учётные данные для практики. Не храни реальные данные. Лаб периодически сбрасывается.

Простой тест для проверки настройки

Перед продолжением проверь что твоё окружение подключается к лабу корректно:

import { test, expect } from '@playwright/test';

test('lab is reachable and login works', async ({ page }) => {
    await page.goto('https://lab.becomeqa.com');
    await page.getByLabel('Email').fill('admin@becomeqa.com');
    await page.getByLabel('Password').fill('admin123');
    await page.getByRole('button', { name: 'Sign in' }).click();
    
    await expect(page.getByText('Travel Items')).toBeVisible();
});

Если тест прошёл, можно двигаться дальше.

Другие практические сайты которые стоит знать

Лаб покрывает основные сценарии курса. Для разнообразия стоит знать ещё несколько:

The Internet (the-internet.herokuapp.com)

Классика. Покрывает: выпадающие списки, чекбоксы, JavaScript-алерты, iframe, drag and drop, загрузку файлов, бесконечную прокрутку. Хорош для практики конкретных техник, но не имеет реалистичной структуры приложения.

SauceDemo (saucedemo.com)

Фейковый e-commerce сайт от Sauce Labs. Логин, список продуктов, корзина, оформление заказа. Полезен для практики полного потока покупки. Есть сломанные версии приложения для практики отладки (locked_out_user, error_user).

Reqres.in

Публичный REST API возвращающий фейковые данные пользователей. Без UI, только API. Полезен для практики API-тестирования без настройки собственного бэкенда.

DemoQA (demoqa.com)

Покрывает формы, виджеты, взаимодействия, алерты. Больше сфокусирован на UI-компонентах чем на рабочих потоках. Хорош для практики с конкретными типами элементов.

Что практиковать и в каком порядке

Следуй порядку курса. Каждый модуль вводит новую технику; упражнения в лабе применяют её на реальной фиче.

Прогрессия:

1. Написать тест логина (базовая навигация, заполнение формы, ассерт)

2. Добавить ассерты на строки таблицы (поиск элементов в списке)

3. Открыть и заполнить форму в модале

4. Протестировать валидацию формы (сообщения об ошибках при неверном вводе)

5. Загрузка файлов

6. Перехват API-запросов (проверка сетевых вызовов от UI-действий)

7. Полный сценарий (логин → добавить элемент → проверить в таблице)

К концу пятого модуля (enterprise POM) будет готов полный тест-сьют покрывающий весь лаб. Этот сьют подходит для портфолио. Он демонстрирует ту же структуру которая используется в продакшн-проектах автоматизации.

→ See also: API-тестирование в Playwright: выходим за рамки UI | SQL для QA: запросы, которые вам действительно нужны