Мини-проект: запускаем готовый автоматизированный тест в Selenium IDE и анализируем результат

Почему это важно?

Представьте, что вы работаете контролёром качества на заводе. Каждый день нужно проверять сотни деталей — одни и те же шаги, снова и снова. Можно делать это вручную, но быстро устаёшь и начинаешь ошибаться. А можно настроить станок-автомат, который будет проверять детали за вас — точно, быстро, без усталости.

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

На этом уроке вы сделаете именно это: запустите готовый автоматизированный тест с помощью инструмента Selenium IDE, посмотрите, как он работает, и научитесь читать его результаты. Это будет ваш первый настоящий опыт автоматизации — и первый шаг к профессиональному портфолио.

Теория

Шаг 1. Что такое Selenium IDE и зачем он нужен?

Selenium IDE — это бесплатное расширение (небольшая программа, встраиваемая в браузер) для браузеров Google Chrome и Mozilla Firefox. Оно умеет:

• записывать ваши действия на сайте (вы кликаете, а Selenium IDE запоминает каждый шаг);
• воспроизводить эти действия автоматически, без вашего участия;
• проверять ожидаемые результаты и сообщать, совпали они с реальными или нет.

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

Важно понимать: Selenium IDE не требует знания программирования. Это идеальный старт для человека, который только знакомится с автоматизацией.

Шаг 2. Ключевые понятия: команды, шаги и проверки

Каждый автоматизированный тест в Selenium IDE состоит из команд (от английского command — приказ). Каждая команда — это одно конкретное действие или проверка.

Вот три типа команд, которые вы встретите чаще всего:

Что такое assert? Слово «assert» переводится как «утверждать». Когда тест встречает команду assert, он как будто говорит: «Я утверждаю, что здесь должен быть текст X. Если его нет — всё, тест провален».

Шаг 3. Из чего состоит результат теста?

После запуска теста Selenium IDE показывает отчёт — итог проверки. Каждый шаг теста получает один из статусов:

• ✅ Passed (прошёл) — команда выполнена успешно, всё совпало с ожидаемым.
• ❌ Failed (провалился) — команда не выполнена или результат не совпал с ожидаемым.
• ⚠️ Error (ошибка) — что-то пошло не так технически (например, элемент не найден на странице).

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

Шаг 4. Что такое учебное веб-приложение?

Для практики QA-специалисты используют специальные учебные веб-приложения — сайты, которые созданы намеренно с ошибками или специально для тренировок. Один из самых популярных — The Internet (http://the-internet.herokuapp.com). Это простой сайт с набором типичных элементов: форм, кнопок, таблиц.

Мы будем работать именно с ним.

Шаг 5. Как читать тест в Selenium IDE?

Открыв сохранённый тест в Selenium IDE, вы увидите таблицу с тремя столбцами:

• Command — название команды (например, open, click, assertText).
• Target — на что направлена команда (например, адрес страницы или кнопка на сайте).
• Value — значение, если оно нужно (например, текст, который нужно ввести или проверить).

Пример того, как выглядит простой тест в таблице:

Читается это так: «Открой страницу входа → введи имя пользователя → введи пароль → нажми кнопку входа → проверь, что появилось сообщение об успешном входе».

Шаг 6. Что значит «локатор» элемента?

В столбце Target часто видны странные записи вроде id=username или css=button. Это локаторы — адреса конкретных элементов на веб-странице.

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

Вот три основных типа локаторов, которые вы встретите:

• id=... — находит элемент по его уникальному идентификатору. Самый надёжный способ.
• css=... — находит элемент по стилю или структуре страницы. Гибкий, но чуть сложнее.
• xpath=... — находит элемент по его «пути» в структуре страницы. Мощный, но для начинающих сложноватый.

На этом уроке вам не нужно писать локаторы самостоятельно — вы будете работать с уже готовым тестом.

Установка Selenium IDE (если ещё не установлен)

Прежде чем перейти к примеру, убедитесь, что у вас установлен Selenium IDE.

Для Google Chrome:

1. Откройте браузер Chrome.
2. Перейдите в Chrome Web Store: https://chrome.google.com/webstore/
3. В строке поиска введите Selenium IDE.
4. Нажмите Добавить в Chrome → Добавить расширение.
5. После установки в правом верхнем углу браузера появится иконка Selenium IDE (красный кружок с буквой S).

Для Mozilla Firefox:

1. Откройте Firefox.
2. Перейдите на https://addons.mozilla.org/
3. Найдите Selenium IDE и нажмите Добавить в Firefox.

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

Практический пример: запускаем готовый тест

Шаг 1. Создаём новый проект и открываем Selenium IDE

1. Кликните на иконку Selenium IDE в браузере.
2. В появившемся окне выберите Create a new project («Создать новый проект»).
3. Дайте проекту название, например: Мой первый тест.
4. Нажмите OK.

Вы увидите интерфейс Selenium IDE: слева — список тестов, в центре — таблица команд, справа — редактор.

Шаг 2. Создаём тест вручную (по готовым командам)

В левой панели нажмите на + рядом с надписью «Tests» (Тесты). Назовите тест Проверка входа на сайт.

Теперь в центральной таблице добавьте команды по очереди. Для каждой команды нажмите на пустую строку и заполните поля Command, Target, Value:

Команда 1:
  Command: open
  Target:  http://the-internet.herokuapp.com/login
  Value:   (оставьте пустым)

Команда 2:
  Command: type
  Target:  id=username
  Value:   tomsmith

Команда 3:
  Command: type
  Target:  id=password
  Value:   SuperSecretPassword!

Команда 4:
  Command: click
  Target:  css=button[type='submit']
  Value:   (оставьте пустым)

Команда 5:
  Command: assertText
  Target:  css=.flash.success
  Value:   You logged into a secure area!

Подсказка: Чтобы добавить новую строку, кликните правой кнопкой мыши в таблице и выберите «Insert command» («Вставить команду»).

Шаг 3. Запускаем тест

Найдите в верхней части интерфейса кнопку ▶️ (треугольник «Воспроизвести»). Нажмите её.

Вы увидите, как Selenium IDE автоматически:

1. Открывает браузер и загружает страницу http://the-internet.herokuapp.com/login.
2. Вводит имя пользователя tomsmith.
3. Вводит пароль SuperSecretPassword!.
4. Нажимает кнопку «Login».
5. Проверяет, что на странице появился текст об успешном входе.

Весь процесс занимает 3–5 секунд.

Шаг 4. Читаем результат

После завершения теста посмотрите на цвета строк в таблице команд:

• Зелёный — команда выполнена успешно ✅
• Красный — команда провалилась ❌

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

[info] Executing: | open | http://the-internet.herokuapp.com/login | |
[info] Executing: | type | id=username | tomsmith |
[info] Executing: | type | id=password | SuperSecretPassword! |
[info] Executing: | click | css=button[type='submit'] | |
[info] Executing: | assertText | css=.flash.success | You logged into a secure area! |
[info] Test: Проверка входа на сайт completed successfully

Если бы тест провалился (например, мы ввели неверный пароль), лог выглядел бы так:

[info] Executing: | open | http://the-internet.herokuapp.com/login | |
[info] Executing: | type | id=username | tomsmith |
[info] Executing: | type | id=password | wrongpassword |
[info] Executing: | click | css=button[type='submit'] | |
[error] assertText on css=.flash.success failed:
        Expected text: "You logged into a secure area!"
        Actual text:   "Your username is invalid!"
[info] Test: Проверка входа на сайт FAILED

Разбор провала: Видите, что произошло? Тест ожидал («Expected text») текст «You logged into a secure area!», но на самом деле («Actual text») на странице появился текст «Your username is invalid!». Это означает: либо введены неверные данные, либо в приложении есть баг с авторизацией.

Шаг 5. Намеренно ломаем тест — учимся видеть баг

Теперь попробуем ввести неправильный пароль, чтобы увидеть, как выглядит провальный тест.

Измените команду 3 (пароль):

Команда 3 (изменённая):
  Command: type
  Target:  id=password
  Value:   неверный_пароль

Запустите тест снова. На этот раз:

• Строка с assertText станет красной.
• В логе появится сообщение об ошибке.
• Внизу экрана вы увидите итоговую строку: 1 test(s) failed.

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

После эксперимента верните правильный пароль SuperSecretPassword! обратно.

Шаг 6. Сохраняем проект

Нажмите Ctrl + S (или Cmd + S на Mac). Selenium IDE сохранит проект в файл с расширением .side. Этот файл вы можете:

• открыть позже и снова запустить тест;
• показать наставнику или работодателю как пример вашей работы;
• добавить в своё портфолио.

Как анализировать результат теста: чек-лист

После каждого запуска автоматизированного теста задайте себе эти вопросы:

1. Все ли шаги зелёные?

   • Да → тест пройден, функция работает корректно.
   • Нет → переходите к пункту 2.

2. На каком шаге появилась ошибка?

   • Прочитайте лог: он указывает точное место сбоя.

3. Что ожидал тест и что получил на самом деле?

   • «Expected» (ожидаемое) vs «Actual» (фактическое) — ключевая пара слов в любом тестировании.

4. Это баг приложения или ошибка в тесте?

   • Если приложение изменилось (например, текст кнопки переименовали), тест может падать из-за устаревших данных — это не баг приложения.
   • Если же поведение приложения явно неправильное — это баг.

5. Если это баг — опишите его по структуре баг-репорта (заголовок, шаги воспроизведения, ожидаемый результат, фактический результат).

Практика

Упражнение 1. Запустите готовый тест и сделайте скриншот результата

Задание:

1. Установите Selenium IDE, если ещё не сделали этого.
2. Создайте тест Проверка входа на сайт по инструкции из раздела «Пример» выше.
3. Запустите тест.
4. Сделайте скриншот экрана с результатом (все строки зелёные).
5. Сохраните скриншот — это будет доказательство вашего первого успешного автоматизированного теста.

Как сделать скриншот: на Windows нажмите клавишу PrtScn или используйте сочетание Win + Shift + S. На Mac — Cmd + Shift + 4.

Упражнение 2. Намеренно сломайте тест и опишите результат

Задание:

1. В команде assertText измените значение в поле Value с You logged into a secure area! на любой другой текст, например Добро пожаловать!.
2. Запустите тест.
3. Запишите в блокнот или текстовый файл:
   • Какая строка стала красной?
   • Что написано в логе в поле «Expected»?
   • Что написано в поле «Actual»?
   • Почему тест провалился — это баг приложения или ошибка в тесте?
4. Верните правильное значение и убедитесь, что тест снова проходит.

Упражнение 3. Добавьте шаг выхода из аккаунта

Задание:
После успешного входа на сайте появляется кнопка «Logout» («Выйти»). Расширьте тест новыми командами:

Команда 6:
  Command: click
  Target:  css=.button.secondary.radius
  Value:   (оставьте пустым)

Команда 7:
  Command: assertText
  Target:  css=.flash.success
  Value:   You logged out of the secure area!

Запустите обновлённый тест. Если все 7 шагов зелёные — вы успешно автоматизировали полный сценарий: вход и выход из системы. Сохраните проект.

Для любознательных: Попробуйте самостоятельно с помощью инструментов разработчика браузера (нажмите F12 на любой странице) найти id или другие атрибуты элементов. Правой кнопкой кликните на любой элемент страницы → «Просмотреть код» — и увидите HTML-структуру страницы. Это поможет вам в будущем писать собственные тесты с нуля.

Упражнение 4. Свяжите автоматизированный тест с тест-кейсом

Задание:
Вспомните тест-кейсы, которые вы писали на предыдущих уроках. Возьмите тест-кейс на проверку входа в систему и заполните его итог:

Заполните поля «Фактический результат» и «Статус» по итогам запуска теста. Это именно то, как работают QA-инженеры в реальных командах.

Итоги урока

• 🔧 Selenium IDE — бесплатный инструмент для записи и воспроизведения тестов в браузере, не требующий знания программирования.
• 📋 Каждый тест состоит из команд: действий (открыть, нажать, ввести) и проверок (assert, verify).
• ✅❌ Результат теста — набор статусов Passed и Failed для каждой команды, плюс подробный лог.
• 🔍 При анализе результата всегда сравнивайте ожидаемое («Expected») с фактическим («Actual») — именно там прячется описание проблемы.
• 🐛 Провальный тест — не катастрофа: это сигнал о возможном баге, который нужно описать в баг-репорте.
• 💼 Сохранённый файл .side с вашим тестом — это уже элемент вашего портфолио: реальный артефакт, который можно показать работодателю.
• 🔁 Связывайте автоматизированные тесты с тест-кейсами — это профессиональная привычка, которая покажет вашу зрелость как QA-специалиста.

Поздравляем! Вы запустили свой первый автоматизированный тест и научились читать его результаты. Это маленький шаг для курса — но большой шаг для вашей карьеры в QA. Именно с таких практических упражнений начинался путь многих профессиональных инженеров по качеству.