Noveo

Наш блог Поавтоматизируем? Свой первый UI-тест за 20 минут

Поавтоматизируем? Свой первый UI-тест за 20 минут

С алгоритмом от Test Engineer Noveo Павла каждый, даже абсолютный новичок в программировании и тестировании, сможет написать свой собственный UI-тест! Попробуем? ;)

Your first UI test with Noveo

Уровень: beginner +

 

Всем привет! Сегодня многие задачи решаются онлайн и в большинстве случаев используя браузер. Мне кажется, что многие слышали про автоматизацию и все эти модные штучки, а задумывались ли вы о том, чтобы за счет этой «штучки» облегчить свою рутину? А может, вам просто интересно пробовать что-то новое и развиваться, но некоторые вещи кажутся сложноватыми и откладываются на потом? Или вы просто хотели бы попробовать поавтоматизировать? Если да, то прошу любить и жаловать — ваш (или не ваш) первый (или нет) UI-тест!

 

Небольшой спойлер. Нам не пригодятся никакие знания, ведь будет дана пошаговая инструкция, чтобы не отвлекать нас от самого главного. Поэтому не пугайтесь никаких незнакомых слов! Да и не заморачивайтесь, что вы чего-то не понимаете и не знаете. Мы просто попробуем, а дальше вы решите сами — интересно ли это вам или нет. Также мы не будем обсуждать преимущества и недостатки языков программирования, фреймворков, подходов и всего такого. Мы просто создадим наш первый тест и попробуем его на вкус. А после взглянем на основные моменты. Для этого нам нужен лишь компьютер и браузер (и интернет, конечно) — пример будет приведен для Windows и Google Chrome (надеюсь, что Chrome установлен почти у каждого), но вы сможете попробовать и другие браузеры/системы в дальнейшем, если захотите. А сейчас пара возможных незнакомых слов (не боимся) — мы будем использовать Python и Selenium. И да, мы не будем сильно засорять нашу систему, не переживайте.

 

Давайте попросим браузер делать то, что мы хотим, без нашей помощи, пока мы завариваем чаек? Всё, довольно слов, начнем!

 

1. Скачиваем Python с официального сайта https://www.python.org/downloads/.

Your first UI test with Noveo

2. Запускаем скачанный файл. На главном экране установки отмечаем галочку «Add python to PATH» (для удобства) и устанавливаем с помощью кнопки «Install now». Никаких дополнительных действий не понадобится (только закрыть окно после завершения установки).

Your first UI test with Noveo

3. Далее создадим отдельную папку стандартными средствами Windows (можно и не создавать, но для удобства). Например, можно создать папку «Test» на диске «C:». Получится полный путь к папке «C:\Test» (путь нам пригодиться чуть позже).

Your first UI test with Noveo

 

4. Теперь нам нужно узнать версию нашего браузера. Для этого перейдите в вашем браузере на страницу «О браузере Chrome». Это можно сделать последовательностью действий:

 

I. Кликнуть троеточие в правом углу браузера;

II. Выбрать строчку «Справка» (или «Help»);

III. Кликнуть «О браузере Google Chrome» («About Google Chrome»).

 

На этой странице мы сможем увидеть версию нашего браузера: «Версия %номер%». Нам нужны только первые цифры (до первой точки).

 

P.S. хорошая возможность обновить Chrome, если вы давно не обновлялись ;) Рекомендуется обновить для облегчения следующего шага.

Your first UI test with Noveo

 

5. Скачать соответствующую версию chromedriver’a с официального сайта https://chromedriver.chromium.org/.

 

Если у вас последняя версия Chrome, то нужно скачать «Latest stable release»:

 

I. Кликаем по ссылке в строке «Latest stable release»;

Your first UI test with Noveo

II. В открывшейся вкладке выбираем файл для Windows.

Your first UI test with NoveoЕсли ваша версия Chrome отличается от последней и вы не хотите пока её обновлять, то вам необходимо перейти по ссылке https://chromedriver.chromium.org/downloads, найти необходимую вам версию и скачать её аналогично предыдущим шагам.

Your first UI test with Noveo

6. Скачали? Теперь нужно распаковать содержимое файла и переместить скачанный файл chromedriver в созданную ранее папку «Test» (нам нужен файл, который будет в распакованной папке).

Your first UI test with Noveo

7. Создадим обычный текстовый файл и назовем его тоже «Test» (можно назвать и иначе, но учтите это при запуске команд ниже). Получится полное имя файла «Test.txt» (тоже пригодится).

Your first UI test with Noveo

8. Вставим в наш файл следующий код:

 

from time import sleep
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

# Немного настроим наш браузер
driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(3)

# Откроем страницу блога
driver.get("https://blog.noveogroup.ru/")

# Попытаемся найти... кого?
sleep(1)
driver.find_element_by_css_selector("[type=search]").send_keys("настоящих ниндзя")  # P.s. здесь могла бы быть ваша реклама
sleep(1)
driver.find_element_by_css_selector("[type=search]").send_keys(Keys.ENTER)

# И посмотрим, как же стать настоящим ниндзя?
sleep(1)
driver.find_element_by_tag_name("article").click()

# А мы точно открыли ту статью?
sleep(1)
title = driver.find_element_by_css_selector("article>header>h2").text
assert title == "Тестовые площадки для тренировок настоящих ниндзя", "Упс, а мы хотели стать ниндзя :("
print("Yeah! That's it!")

# А теперь можно ознакомиться со статьей
# Чтобы ознакомиться со статьёй получше - удалите строчки ниже
sleep(5)
driver.close()

Your first UI test with Noveo

9. Сохраним наш файл с помощью «Сохранить как», т.к. нам может понадобиться изменить кодировку на «UTF-8», и перезапишем наш файл (подтвердим предложенную замену файла). Если уже установлена кодировка «UTF-8», то ничего изменять не нужно, но файл можно перезаписать.

Your first UI test with Noveo

10. Откроем командную строку (все дальнейшие действия будут выполняться в ней). Например, можно нажать сочетание клавиш Win+R, ввести «cmd» в появившемся окне, нажать «Ok» (можно открыть и другими известными вам способами).

Your first UI test with Noveo

11. Перейдем в созданную нами ранее папку в командной строке («C:\Test» — путь, который должен был нам пригодиться). Необходимо ввести команду cd C:\Test, если вы создали папку в том же месте, что и выше.

Your first UI test with Noveo

Но если вы создали папку в другом месте, то вам нужно будет ввести команду cd %путь_к_вашей_папке%, где вместо %путь_к_вашей_папке% нужно указать соответствующий путь.

 

P.S. Путь можно получить обычным копированием из строки проводника Windows.

Your first UI test with Noveo

12. Создадим виртуальное окружение, чтобы всё было хорошо, с помощью команды python -m venv . (не забудьте точку в конце и дождитесь появления строки ввода).

Your first UI test with Noveo

13. И активируем его командой Scripts\activate.bat (у вас в скобочках появится название папки перед новой строкой ввода).

Your first UI test with Noveo

14. Далее установим необходимые компоненты — Selenium. Вводим команду pip install selenium и ожидаем окончания установки (появление строки ввода).

Your first UI test with Noveo

15. И, наконец, запустим наш тест! Запускаем команду python Test.txt.

Если вы назвали файл по-другому, то нужно будет запускать тест с помощью команды python %полное_имя_файла%, где вместо %полное_имя_файла% нужно указать соответствующее название файла с расширением файла (!).

 

Вот и всё! Магия, да и только! Через несколько секунд браузер закроется, успешно завершив все поставленные перед ним задачи: открыть страницу блога, найти статью по ключевым словам и открыть эту статью. А еще наш код проверяет, что была открыта именно эта статья по её заголовку. Если это так, то в командной строке вы увидите, что всё прошло успешно.

Your first UI test with Noveo

Но если вас заинтриговала открытая тестом статья, то можете насладиться её чтением, удалив последние две строчки в вашем файле и запустив тест повторно (python Test.txt):

sleep(5) 
driver.close()

Не забудьте сохранить файл ;)

 

Осталось совсем чуть-чуть :) Итак, с помощью созданного файла вы сможете сконструировать свои собственные сценарии, изменяя  то, что уже есть.

 

К примеру, строка  driver.get ( «https://blog.noveogroup.ru/» ) говорит браузеру открыть ту или иную страницу. Можно изменить часть строки «https://blog.noveogroup.ru/» , например, на «https://noveogroup.ru/about/» и открыть совершенно другую страницу. Ту, которую вы захотите! Или строка driver.find_element_by_tag_name("article").click() просто кликает по элементу, а строка driver.find_element_by_css_selector("[type=search]").send_keys("настоящих ниндзя") печатает заданный вами текст в строку поиска. А эти действия составляют основу многих сценариев! Ведь мы всегда так и делаем: ищем элемент, кликаем по нему; или ищем другой элемент, что-то печатаем, опять кликаем и так далее. Вы можете изменить текст «настоящих ниндзя» на что-нибудь своё и найти другую статью. Но тут тест упадет, т.к. в нем ожидается именно статья про ниндзя «киаааа». Конечно, в командной строке вам сообщат, что что-то пошло не так, и браузер не закроется сам — придется закрывать его самим. Но можно удалить строку assert title ==..., чтобы получить не тест, а обычный сценарий (чего, возможно, вы и хотите), и тогда всё будет хорошо. Да, для полноценного изменения созданного сценария необходимо научиться искать элементы, с которыми мы хотим взаимодействовать, для клика на них и других действий. Но это уже совсем другая история!

 

Напоследок хочется сказать, что здесь не приводится исчерпывающее руководство и нюансы написания кода, но оно и не нужно — я очень надеюсь, что представленный материал поможет вам познакомиться с чем-то новым, воодушевить на эксперименты или просто понять, что и это вам под силу!

 

И чуть не забыл — завершив работу, просто закройте командную строку, и всё. А если вы захотите почистить систему, то удалите созданную ранее папку стандартными средствами Windows, и удалите Python через «Приложения и возможности».

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: