» » » Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса

 

Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса

Автор: admin от 14-01-2018, 20:30, посмотрело: 401

Hermione — опенсорс-инструмент для автоматизации интеграционного тестирования. На конференции FrontTalks разработчик службы поисковых интерфейсов Николай Ильченко tavriaforever объяснил, почему наши интерфейсы всё ещё иногда ломаются, в чём плюсы Гермионы, и показал, как начать ей пользоваться.





— Я приехал с докладом про Гермиону. Но это не про Гарри Поттера, и это совсем не сказки.качаете и начинаете пользоваться.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Что под «плащом»? Чтобы не называть Гермиону неправильными словами, это инструмент, представляющий обертку над такими известными штуками, mocha. Если вы тесты писали, вы писали с помощью mocha. Describe it, не надо ничего нового выдумывать и изучать.



Удобный клиент к Selenium, чтобы писать «открой браузер, нажми, перелистни». И сам Selenium, чтобы эти тесты запускать во всех на свете браузерах. Когда я прогонялся, мне говорили, чего ты умничаешь со своим Selenium? Думаешь, каждый человек уже сталкивался? Объясни, что это. Думаю, все знают, но что это такое? Это проект, который включает в себя ряд инструментов, заточенных на то, чтобы эти тесты автоматически запускать в MacOS, Windows XP, запускать там разные браузеры. Это все происходит автоматически, и это назвали Selenium.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


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



Я создал папку, назвал ft. Откроем ее в редакторе. Я пользуюсь Visual Studio Code, они мне не заплатили за это, но я просто люблю быстрые штуки. Тут есть немного файлов. Есть package.json, написано, что есть три зависимости, сама Гермиона. Мне нужен HTTP сервер, потому что нет никакой беты. У вас, наверное, будет своя бета, вам это не нужно. И я поставил локальный Selenium standalone, потому что деньги не хочу платить. Но если надо, дальше расскажу, как платить деньги. У меня две команды. Вторая будет запускать тесты. Первая будет запускать два модуля, HTTP-сервер и Selenium standalone. Давайте создадим index.html. Легким движением руки я создал полпроекта. Покажу, как мы пишем код в Яндексе. Раз. Полсобеседования уже прошел.



CSS напишем. Все, уже красиво и дизайнеры не нужны, все готово. Еще и JS есть, никакой React и jquery не надо. Есть div, внутри кнопка и div c текстом. Предполагаю, чтобы нажимать на эту кнопку, текст будет скрываться и открываться. Дальше есть немного стилей, но это неинтересно, главное, чтобы красиво выглядело. Чуть-чуть JS. Мы тут слушаем клик на кнопки, срабатывает callback, если случается клик, где мы используем classList API, чтобы тогглить класс на дом ноде. Есть спецкласс, который добавляет display block.



Классно мы пишем код в Яндексе, да? Приходите.



Вот наш суперсайт уже. Все работает, кнопка открывается, раскрывается. Проект уже можно сдавать. Все супер.



Теперь я хочу написать тест. Я все depends поставил, не буду показывать, как писать.



Покажу, что проект open source. Пишу hermione test. Разработчики говорят, что надо поставить пакет, добавить конфигурационный файл, тут пример теста на github, все по-настоящему. И очень большая документация, если будет скучно — почитаете.



Воспользуемся quick start. Они говорят, что нужно создать конфигурационный файл. Я в корне создаю файл. Очередной лайфхак. Я конфиг написал. Это минимальный набор, чтобы запустить тесты. Вы указываете gridUrl. Я рассказывал, что такое Selenium. Я его локально подниму, он будет запускать Google Chrome. Мне ребята из инфраструктуры подсказали, что есть несколько проектов, вот SauceLab, например. Заходишь туда, выбираешь Selenium, указываешь, какой девайс я хочу — PC, Win 10 и браузер какой-нибудь, Firefox. И он вам на разных языках покажет, как это куда вставить. На node.js говорит, что надо заполнить три поля. Указать браузер Firefox, платформа такая-то, версия такая. У меня это не нужно, я указал только одно поле Chrome. Вы просто копируете оттуда сюда, вставляете адрес. Все, Selenium настроили, тесты разгоняются везде. Не очень сложно.



Дальше есть поле sets, здесь вы можете точечно указать, например, в папке «Телефоны» лежат тесты для телефонов, в папке для десктопов — для десктопов и так до бесконечности можете распределять по папкам, по платформам. Я для примера написал platformName, сказал, что ищи мне тесты в папке tests. Надо такую папку создать. Создаю файлик, его можно назвать как угодно, главное, чтобы было расширение hermione.js.



Очередной лайфхак. Супер. Mocha всем известная. Написали, что это за блок, чтобы потом понять, что с тестами происходит. Пишу супер-код. return this.browser. С этого момента можно использовать API, которое предоставляет webdriver.io. Захожу на сайт, покажу, что не придумываю это. В левом меню все эти команды: клик, дабл клик, все то, что реально может сделать пользователь на сайте, с помощью webdriver.io вы можете воспроизвести. Это очень просто, методы понятные, даже не читая документацию.



Я выучил уже три команды наизусть. Пишу URL. Открыли браузер. Нужно открыть какой-то адрес. Я буду локально поднимать index.html. Пишу localhost:8080. Надо кликнуть на кнопку и проверить, что текст показался. Поэтому я использую метод click и указываю селектор кнопки, ft_button. Когда кликнули, надо проверить, что это появилось на странице. Поэтому в webdriver есть пачка хелперов, которые могут вам как ассертеры сразу проверять какое-то условие.



Я использую waitForVisible. Мы указываем ей селектор какого-то блока, в данном случае ft_text. Если блок становится display block, visible, opacity = 1, то мы считаем, что это условие true, тогда тест выполнится.



Все, осталось запустить сервер в package.json, запустить саму Гермиону. Супер, все запустилось, Selenium запустился на 4444. Запустился наш сервер, все работает. Мы отправим сюда Гермиону тестить нашу фичу. В другой вкладке пишем npm test.



Все, посмотрите на Google Chrome. Как видим, тест прошел. Видно, какой тест, в каком браузере запустился. Если много браузеров — в каждом браузере покажет всю необходимую статистику.



Представим, что ваш коллега решил зарефачить все как обычно. Говоришь ему — девушку заведи, а он говорит — зарефачить надо. Он все попеределал, решил, что этот код мертвый. Удалил, все. При клике на кнопку текст не появляется. Мы хотим, чтобы наш друг не мог такое закоммитить и сломать нам. Поэтому у него скорее всего настроен какой-нибудь continuous integration или локально их запускает, и все должно упасть. Все, упал тест. Видно, что такой-то элемент не показался после 1000 мс. Эти 1000 мс можно настраивать, к примеру, у вас Ajax долгий, можно указать хоть 20 секунд. Таким образом за считанные минуты мы написали тест. Это сложно? Думаю, нет.



Вернемся к презентации.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Как обычно, open source очень развит, на каждый чих-пых есть еще 20 подобных. Когда другие ребята, кто разрабатывали Гермиону, много рассказывали вначале про нее, постоянно задавали вопрос: есть же Nightwatch, wdio, куча плагинов, ставишь, настраиваешь… Есть Testcafe новый модный, есть Magellan с такой документацией, что документация Гермионы просто азбука для детей. Зачем?



Когда два года назад они начали делать, половины этих сервисов не существовало. Был Nightwatch. Когда отправили туда pull request, пытались с Nightwatch общаться, мейнтейнер не очень быстро отвечал. И мы решили написать свой проект. У нас серьезный сервис, Яндекс.Поиск, Картинки, Видео, Новости, миллионы людей. Мы не можем пользоваться инструментами, которые никто не мейнтейнит.



Сейчас, скорее всего, ситуация изменилась, все проекты реально подтянулись. Сейчас очень много пользователей, у Nightwatch много звездочек на github.



Но почему на Гермиону стоит обратить внимание?



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса
Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Я люблю, чтобы все устанавливалось из коробки, ничего сложно настраивать не надо было, особенно если ты хочешь быстро начать. Так умеют не все. Так умеет Testcafe и Nightwatch. Просто устанавливаешь npm install и погнал писать тесты, как и Гермиона. Конкуренция уже сократилась.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Для любого проекта, будь то проект на Joomla, WordPress, React, на чем угодно, если вы хотите писать интеграционные и функциональные тесты — а я считаю, что это одно и то же, но это долгий спор, — то любой фреймворк вам поможет, скачиваете любой из этого и начинаете пользоваться, очень круто.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Параллельное выполнение тестов. Оказывается, так тоже умеют не все. Умеет Nightwatch и Magellan. Но есть особенность. В отличие от этих двух проектов, у нас настроен очень умный retry. Представьте, у вас 500 тестов. В Яндексе десктопные браузеры гоняются в десяти браузерах, это 5000 тестов. Во время того, как эти тесты гонялись, где-то между серверами провис провод, интернет не долетел, и все тесты попадали.



Retry в современном мире это нормально. Nightwatch и Magellan открывают браузер, запускают в нем один тест, этот тест закончился, они открывают снова браузер… В Гермионе реализовано по-другому, параллельное выполнение тестов. Если у вас в греге Selenium будет 50 Chrome, он запустить все 50 Chrome и выполнит в них одновременно 50 тестов. Это большое различие и серьезное ускорение. Возможно, на первом этапе это не так серьезно, но со временем ваш проект будет расти, это очень важно.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Поддержка сетов и платформ. Я показал, что можно в разные папки класть разные тесты, так умеют все. Selenium очень популярный, это круто, все должно везде работать. Вы знаете про холодильники на Android? Или про Tesla, когда мужик не мог выехать из этой зоны бедствия, для Tesla выпустили патч, который продлил работу батареи еще на какое-то время. Круто.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Удобная разработка. В Гермионе разработан удобный интерфейс command line, можете запускать тесты очень точечно — например, в таком-то браузере, чтобы в названии теста было супер-ключевое слово. В момент разработки такие вещи очень удобны. Так умеет Testcafe, все остальные надо дорабатывать или ставить плагины, это всегда сложно. Гермиона уже становится как минимум конкурентоспособной.



Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса


Гермионе два года. Эта статистика реальная, я снял ее в пятницу. 550 тестов было на Java, мы переписали 493. Это говорит о том, что проект классный, мы пользуемся им, развиваем, все грабли, что можно было пройти, мы уже прошли. Как мне сказали разработчики Гермионы, они готовы отвечать людям, закрывать issues, принимать pull requests, развивать. Ребята готовы участвовать в open source в полную силу, это реальный проект production ready, можно качать и использовать в вашем проекте, не бояться, что завтра что-то закроется.



Надеюсь, что вы будете писать Гермиона-тесты. Их писать очень просто, это не требует супер-изучений, а пользы приносит кучу. Я рассказывал, сколько есть спасенных жизней. А сколько можно сократить времени на тестировании? 500 тестов, нужно руками прогонять. А можно этого не делать, прогнать за две минуты. Это круто, ваш проект будет надежный.



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

Источник: Хабрахабр

Категория: Программирование » Веб-разработка

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

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *