Знакомство с no-code автоматизацией: запись и воспроизведение действий пользователя с помощью Selenium IDE

Зачем это нужно?

Представьте, что каждый раз перед выпуском новой версии приложения вам нужно вручную проверять одно и то же: открыть сайт, нажать кнопку «Войти», ввести логин и пароль, убедиться, что страница загрузилась правильно. Сегодня проверили. Через неделю — снова. Через месяц — снова. Это скучно, отнимает время и, главное, человек устаёт и начинает допускать ошибки.

А что если бы компьютер мог запомнить все ваши действия — как нажать, куда кликнуть, что напечатать — и потом повторять их самостоятельно, без вашего участия?

Именно это и делает no-code автоматизация (автоматизация без написания кода). Инструменты такого рода позволяют записать действия пользователя и воспроизвести их снова в любое нужное время. Один из самых популярных и доступных таких инструментов — Selenium IDE.

В этом уроке вы:

разберётесь, что такое Selenium IDE и как он работает;
узнаете, что такое «запись» и «воспроизведение» теста;
увидите конкретный пример записанного теста;
самостоятельно попробуете создать свой первый автоматизированный тест.

Ключевое слово урока: no-code автоматизация — это автоматизация, при которой не нужно вручную писать программный код. Инструмент сам генерирует код за вас, пока вы просто работаете в браузере.

Теория

Часть 1. Что такое Selenium и причём здесь IDE?

Прежде чем говорить об инструменте, давайте разберём само слово Selenium (произносится: «Сэленьем»).

Selenium — это набор инструментов с открытым исходным кодом (то есть бесплатных и доступных всем) для автоматизации действий в веб-браузере. Проще говоря, Selenium умеет «управлять» браузером как будто за его «штурвалом» сидит робот: открывать сайты, кликать по кнопкам, заполнять поля, проверять тексты на экране.

Selenium — это целое семейство инструментов. Нас сейчас интересует один из них:

Selenium IDE (IDE расшифровывается как Integrated Development Environment — «интегрированная среда разработки», но в данном случае это просто удобный визуальный редактор).

Аналогия: Представьте диктофон. Вы нажимаете «Запись» и говорите текст. Потом нажимаете «Воспроизведение» — и диктофон повторяет ваши слова. Selenium IDE работает точно так же, только вместо голоса он записывает клики, вводы текста и переходы в браузере.

Selenium IDE — это расширение для браузера (небольшая программа, которая добавляется прямо в браузер Chrome или Firefox). Оно бесплатное, не требует установки сложного программного обеспечения и идеально подходит для начинающих.

Часть 2. Основные понятия: что нужно знать перед началом

Давайте разберём несколько слов, которые будут встречаться в этом уроке постоянно.

Тест-кейс (Test Case)

Тест-кейс — это пошаговое описание того, что нужно проверить. Например:

Открыть сайт.
Нажать кнопку «Войти».
Ввести логин «[email protected]».
Ввести пароль «12345».
Нажать «Подтвердить».
Убедиться, что появилось сообщение «Добро пожаловать!».

В Selenium IDE каждый такой тест-кейс можно записать (создать автоматически, просто выполняя действия в браузере) или написать вручную в визуальном редакторе.

Команда (Command)

Каждый отдельный шаг теста в Selenium IDE называется командой. Например:

open — открыть страницу,
click — нажать на элемент,
type — напечатать текст,
assert text — проверить, что на странице есть определённый текст.

Таргет (Target) и Значение (Value)

Каждая команда работает с таргетом (объектом, к которому применяется действие) и значением (что именно делать с этим объектом).

Например, команда type говорит: «напечатай» (type) в поле для ввода логина (target = поле логина) текст «[email protected]» (value = «[email protected]»).

Локатор (Locator)

Когда Selenium IDE записывает ваши клики, ему нужно как-то запомнить, на какой именно элемент страницы вы нажали. Для этого используются локаторы — уникальные «адреса» элементов на веб-странице.

Аналогия: Представьте, что вся веб-страница — это большое здание, а кнопки, поля и ссылки — это комнаты. Локатор — это адрес конкретной комнаты: «третий этаж, крыло Б, комната 312». Благодаря локатору Selenium точно знает, куда «постучать».

Самые распространённые виды локаторов:

id — уникальный идентификатор элемента (самый надёжный),
name — имя элемента,
xpath — «путь» к элементу через структуру страницы (сложнее, но очень мощный),
css selector — описание элемента через стили оформления страницы.

На этом этапе вам не нужно понимать все детали — Selenium IDE выбирает локатор за вас автоматически при записи.

Проверка (Assertion)

Assertion (произносится: «ассёшн», переводится как «утверждение» или «проверка») — это шаг теста, который проверяет, что что-то на странице соответствует ожиданию. Если проверка не прошла — тест «упадёт» (завершится с ошибкой), и вы поймёте, что что-то работает не так.

Например: «Убедись, что на странице есть текст "Добро пожаловать!"» — это assertion.

Без проверок тест будет просто «кликать» по кнопкам, но не сообщит вам, правильно ли работает приложение. Проверки — это сердце любого теста.

Часть 3. Как работает режим записи?

Режим записи в Selenium IDE работает так:

Вы нажимаете кнопку «Запись» (красный кружок) в интерфейсе Selenium IDE.
Открывается новое окно браузера.
Всё, что вы делаете в этом окне (клики, ввод текста, переходы по страницам), автоматически преобразуется в команды и появляется в списке шагов теста.
Когда вы закончили, нажимаете «Стоп».
Тест сохранён. Теперь вы можете нажать «Запустить» (кнопка воспроизведения), и Selenium IDE самостоятельно повторит все ваши действия.

Это и есть принцип Record & Playback (запись и воспроизведение) — основа no-code автоматизации.

Часть 4. Как установить Selenium IDE?

Selenium IDE устанавливается как расширение браузера. Вот как это сделать:

Для Google Chrome:

Откройте браузер Chrome.
Перейдите в Chrome Web Store (магазин расширений): введите в адресной строке https://chrome.google.com/webstore/ или просто найдите «Selenium IDE» в поиске.
Найдите расширение «Selenium IDE» от SeleniumHQ.
Нажмите кнопку «Добавить в Chrome».
Подтвердите установку.

После установки иконка Selenium IDE появится в правом верхнем углу браузера (рядом с адресной строкой).

Для Firefox:
Аналогично через магазин расширений Firefox Add-ons (https://addons.mozilla.org/).

Важно: Selenium IDE работает только в браузере. Это не отдельная программа — это расширение, которое живёт внутри браузера.

Часть 5. Интерфейс Selenium IDE: что где находится?

После запуска Selenium IDE вы увидите окно с несколькими ключевыми областями. Давайте разберём их:

+---------------------------------------------------------------+
|  [▶ Запустить тест]  [⏺ Запись]  [⏹ Стоп]   [Сохранить]     |
+---------------------------+-----------------------------------+
|  Список тест-кейсов       |  Список команд (шагов теста)      |
|  ─────────────────────    |  ─────────────────────────────── |
|  > Мой первый тест        |  1. open | / | -                  |
|    Тест входа             |  2. click | id=login-btn | -      |
|                           |  3. type | id=username | admin    |
|                           |  4. assert text | //h1 | Привет   |
+---------------------------+-----------------------------------+
|  Command: [type        ]  Target: [id=username]  Value: [admin]|
+---------------------------------------------------------------+
|  Лог выполнения (что происходит при запуске теста)            |
+---------------------------------------------------------------+

Список тест-кейсов (слева) — все тесты, которые вы создали в этом проекте.
Список команд (справа, основная область) — шаги выбранного теста.
Панель редактирования (внизу) — детали выбранной команды: что делать, с каким элементом, с каким значением.
Лог выполнения (внизу) — отчёт о том, что происходило при последнем запуске теста.

Часть 6. Зелёный, жёлтый, красный — что означают цвета?

При запуске теста каждый шаг подсвечивается:

🟢 Зелёный — шаг выполнен успешно.
🟡 Жёлтый — шаг выполняется прямо сейчас.
🔴 Красный — шаг завершился ошибкой (тест «упал»).

Если тест завершился полностью зелёным — всё работает как ожидалось. Если появился красный шаг — нашлась проблема, и нужно разбираться.

Пример: запись теста для поиска на сайте Wikipedia

Давайте разберём конкретный пример. Мы запишем тест, который:

Открывает сайт Wikipedia (ru.wikipedia.org).
Вводит в поле поиска слово «Автоматизация».
Нажимает кнопку поиска.
Проверяет, что на открывшейся странице есть заголовок «Автоматизация».

Шаг 1. Запись теста

После того как вы открываете Selenium IDE и нажимаете «Создать новый проект», появляется пустой список тест-кейсов. Нажимаем «+» (добавить тест), называем его, например, «Поиск на Wikipedia».

Нажимаем кнопку «⏺ Запись», вводим базовый URL сайта: https://ru.wikipedia.org.

Открывается новое окно браузера. Мы:

Видим главную страницу Wikipedia.
Кликаем на поле поиска.
Вводим текст «Автоматизация».
Нажимаем кнопку «Найти».
Ждём, пока загрузится страница с результатами.

Нажимаем «⏹ Стоп» в Selenium IDE.

Шаг 2. Что записалось автоматически?

После записи в списке команд появится примерно следующее:

№	Команда	Таргет (Target)	Значение (Value)
1	`open`	`https://ru.wikipedia.org/wiki/Заглавная_страница`	—
2	`click`	`id=searchInput`	—
3	`type`	`id=searchInput`	`Автоматизация`
4	`click`	`id=searchButton`	—

Шаг 3. Добавляем проверку вручную

Запись не добавила проверку автоматически — проверки нужно добавлять самостоятельно. Кликаем на последнюю строку списка, нажимаем «+» для добавления нового шага и указываем:

Команда	Таргет	Значение
`assert title`	—	`Автоматизация — Википедия`

Команда assert title проверяет, что заголовок (title) страницы в браузере совпадает с нашим ожидаемым значением.

Шаг 4. Полный тест в формате Selenium IDE

Ниже показан тест в формате .side (это внутренний формат Selenium IDE, основанный на JSON — текстовом способе хранения данных). Вам не нужно создавать этот файл вручную — Selenium IDE сохраняет его сам. Но полезно понимать, как выглядит записанный тест «под капотом»:

{
  "id": "abc123",
  "name": "Поиск на Wikipedia",
  "commands": [
    {
      "command": "open",
      "target": "https://ru.wikipedia.org/wiki/Заглавная_страница",
      "value": ""
    },
    {
      "command": "click",
      "target": "id=searchInput",
      "value": ""
    },
    {
      "command": "type",
      "target": "id=searchInput",
      "value": "Автоматизация"
    },
    {
      "command": "click",
      "target": "id=searchButton",
      "value": ""
    },
    {
      "command": "assertTitle",
      "target": "Автоматизация — Википедия",
      "value": ""
    }
  ]
}

Пояснение для начинающих: Не пугайтесь фигурных скобок и кавычек. Это просто способ, которым компьютер хранит список шагов: «что делать» (command), «с чем» (target) и «с каким значением» (value). Читается почти как обычный текст.

Шаг 5. Запуск теста

Нажимаем кнопку «▶ Запустить тест». Происходит следующее:

Открывается новое окно браузера.
Браузер автоматически переходит на страницу Wikipedia.
В поле поиска автоматически появляется текст «Автоматизация».
Автоматически нажимается кнопка «Найти».
Загружается страница статьи.
Selenium IDE проверяет заголовок — он совпадает. Шаг становится зелёным.
Весь тест завершён успешно! 🎉

Часть 7. Преимущества и ограничения Selenium IDE

Прежде чем приступать к практике, важно честно понять, что Selenium IDE умеет хорошо, а что — не очень.

✅ Преимущества

Не нужно знать программирование — всё делается визуально.
Быстрый старт — от установки до первого теста буквально 10 минут.
Наглядность — видно каждый шаг и его результат.
Бесплатно — никаких платежей.
Хорошая точка входа — понимая Selenium IDE, вам будет легче в будущем перейти к коду на Python или Java.

⚠️ Ограничения

Хрупкие тесты — если разработчик изменит кнопку на сайте (например, переименует её ID), записанный тест «сломается» и его придётся переписывать.
Ограниченная логика — нельзя сделать сложные условия («если произошло X — сделай Y, иначе — Z»). Для этого нужен настоящий код.
Только браузер — Selenium IDE работает исключительно в веб-браузере. Мобильные приложения или десктопные программы им не потестируешь.
Не подходит для больших проектов — при сотнях тестов управлять ими в Selenium IDE становится неудобно.

Вывод: Selenium IDE — это отличный инструмент для обучения, прототипирования (быстрой проверки идей) и простых регрессионных тестов (проверки, что старые функции не сломались после новых изменений). Для серьёзной автоматизации на больших проектах используют код, но понимание принципов из этого урока останется с вами навсегда.

Практика

Ниже — четыре упражнения. Выполняйте их по порядку: каждое следующее немного сложнее предыдущего.

Упражнение 1. Установка и первый запуск

Цель: Убедиться, что Selenium IDE установлен и работает.

Шаги:

Установите расширение Selenium IDE в Chrome или Firefox (инструкция выше в разделе «Как установить»).
Нажмите на иконку Selenium IDE в панели браузера.
Выберите «Create a new project» («Создать новый проект»), введите любое название, например, «Мои первые тесты».
Изучите интерфейс: найдите кнопку «Запись», кнопку «Запустить», список тест-кейсов и панель команд.
Сделайте скриншот (снимок экрана) окна Selenium IDE — он пригодится для самопроверки.

Ожидаемый результат: Вы видите интерфейс Selenium IDE с пустым проектом и понимаете, где находятся основные элементы управления.

Упражнение 2. Запись первого теста

Цель: Записать простой тест для любого сайта.

Шаги:

В вашем проекте нажмите кнопку «+» рядом со списком тест-кейсов и назовите тест «Мой первый тест».
Нажмите кнопку «⏺ Запись».
В появившемся диалоге введите URL любого простого сайта. Рекомендуем: https://www.google.com или https://ru.wikipedia.org.
Выполните несколько простых действий: кликните на поле поиска, напечатайте любое слово, нажмите Enter.
Нажмите «⏹ Стоп» в Selenium IDE.
Посмотрите на список записанных команд. Попробуйте «прочитать» каждую команду вслух — что она делает?

Ожидаемый результат: В списке команд появились строки с шагами вашего теста. Вы примерно понимаете, что делает каждая строка.

Упражнение 3. Воспроизведение и добавление проверки

Цель: Запустить записанный тест и добавить к нему проверку.

Шаги:

Возьмите тест из Упражнения 2.
Нажмите кнопку «▶ Запустить тест» и понаблюдайте, как браузер автоматически воспроизводит ваши действия.
Проверьте лог — все шаги должны стать зелёными.
Теперь добавьте проверку. Для этого:
- Кликните в конце списка команд на кнопку «+».
- В поле «Command» введите assert title.
- В поле «Target» введите заголовок страницы, которая должна открыться (например, для Google это Google, для Wikipedia это будет содержать слово «Википедия»).
Запустите тест снова. Проверьте, прошёл ли шаг с проверкой.

Подсказка: Чтобы узнать точный заголовок страницы, откройте эту страницу в браузере и посмотрите на текст на вкладке (tab) браузера — это и есть title страницы.

Ожидаемый результат: Тест запускается, все шаги зелёные, включая новый шаг с проверкой заголовка.

Упражнение 4. Намеренно «сломайте» тест

Цель: Увидеть, как выглядит упавший тест, и понять, что это значит.

Шаги:

Возьмите тест из Упражнения 3 с проверкой assert title.
Измените значение в поле Target команды assert title на неправильный заголовок, например, «Совершенно неправильный заголовок 12345».
Запустите тест.
Посмотрите, что произошло: какой шаг стал красным? Что написано в логе?
Верните правильное значение заголовка и снова запустите тест — убедитесь, что теперь всё зелёное.

Ожидаемый результат: Вы видите, как выглядит «упавший» тест (красный шаг, сообщение об ошибке в логе). Вы понимаете: красный цвет — это сигнал, что проверка не прошла. Именно так автоматические тесты «находят баги».

Осмыслите это: Когда тест «упал» из-за неправильного заголовка, это было не случайно — мы сами так сделали. Но в реальной работе такой «упавший» тест означает: что-то на сайте изменилось или сломалось. Именно это и нужно QA-специалисту.

Итоги урока

🔧 Selenium IDE — это бесплатное расширение для браузера, которое позволяет записывать и воспроизводить действия пользователя без написания кода.
🎙️ Record & Playback (запись и воспроизведение) — основной принцип no-code автоматизации: вы один раз делаете действия вручную, а потом инструмент повторяет их за вас.
📋 Тест состоит из команд (шагов): open, click, type, assert title и других.
🔍 Локатор — это «адрес» элемента на странице, по которому Selenium находит кнопки, поля и ссылки.
✅ Assertion (проверка) — обязательная часть теста, которая говорит «убедись, что результат именно такой». Без проверок тест не имеет смысла.
🟢🔴 Зелёный означает успех, красный — тест нашёл проблему (или сам сломан).
⚖️ Selenium IDE отлично подходит для обучения и простых задач, но имеет ограничения при работе с большими и сложными проектами.
🚀 Понимание принципов Selenium IDE — это ваш первый шаг к более глубокой автоматизации с использованием кода в будущих уроках.