Как часто Вы, при написании тестов на веб, тратили лишнее время на создание проекта с нуля? Случалось ли Вам долго разбираться, почему элемент не найден на странице, хотя оказывалось, что Вы просто не поставили одинарную кавычку в локаторе в коде? Бывает ли такое, что Вам сильно не хватает простейших подсказок, как описать путь к элементу на странице? 

Специально для Вас(и не только) мы разработали плагин для Intellij IDEA , который, как мы надеемся, станет Вашим другом и помощником в написании тестов. 

 

Установка.

Для того, чтобы установить себе наш плагин, необходимо проделать следуощие действия:

1)Заходите в настройки IDE и выбираете раздел Plugins

2)Нажимаете кнопку Browse Repositories

 

3)в открывшемся меню ищите Selenium Plugin и нажимаете кнопку Install Plugin.

Теперь Ваш IDE действительно готов к началу разработки тестов.

Обновление.

Для обновления плагина требубуется проделать те же действия, что и выше(пройти в меню Plugins --> Browse repositories), только вмето Install будет кнопка Update Plugin.

Создание проекта.

Если Вы только что сели за разработку своих веб тестов - Вы наверняка делаете одно из следующих действий:

  • Берете наработки из старых проектов и переносите их в новый, только что созданный
  • Создали голый проект и думаете, как же Вам оптимальнее выстроить архитектуру тестов

Мы делали и то и другое не один десяток раз. Но нам, если честно, надоела лишняя трата времени от раза к разу. Так что представляем первую фичу нашего плагина - быстрое создание готового для использования в написании тестов проекта. Теперь, для того, чтобы создать полностью готовый проект потребуется нажатие 3-х кнопок! И всё!

Итак. Для создания простейшего проекта для написания тестов с использованием selenium нужно выполнить следующие действия:

1)В верхнем меню выбрать File -> New Project...

затем

 

2)В открывшемся меню, слева выбрать Java

И нажать Next в левом нижнем углу

 

3)Поставить галку Create project from template и выбрать Simple Selenium App

И нажать Next в левом нижнем углу

4)Ввести название проекта и диреторию

И нажать Finish

После этого мы получаем полностью готовый к работе проект!

Разумеется, мы не можем со 100% уверенностью утверждать, что в качестве примера мы создали идеальный для каждого проект. Но мы постарались сделать его как можно более удобным и простым для использования. Если у Вас есть любые вопросы и предложения, как можно было бы улучшить данный проект - пожалуйста, напишите нам. Вместе мы сможем сделать идеальный во всех смыслах проект, который мог бы стать эталоном в качестве базы для разработки веб тестов. 

Описание самого проекта можно найти здесь.

Тут же хотелось бы отметить, что с недавних пор в нашем плагине добавилась поддержка очень крутого продукта - Selenide !

Selenide.

Итак, что же мы умеем делать с Selenide.

Во-первых - теперь Вы можете создать преднастроенный проект для Selenide! В нем уже есть подключенные зависимости и примеры тестов! Для создания такого проекта нужно сделать следующие действия: New Project->Java->Selenide Tests App. И всё! Всего за 5-10 секунд мы получили полностью готовый для работы проект, в котором можно смело продолжать писать свои тесты. Круто, не правда ли?

Так же, как и для базового Selenium, для Selenide мы добавили code complete и проверку ошибок в локаторах, а так же проверку существования элементов(об этих фичах вы можете прочитать в этой статье более подробно)

Теперь, давайте перейдем к описанию остальных фич нашего плагина.

Генерация полей и аннотаций.

Сейчас всё чаще при написании тестов на веб с использованием selenium используется паттерн PageObject.

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

После установки плагина Вам станут доступны следующие способы создать поле для элемента:

1)Используя комбинацию горячих клавиш ctrl+W. После этого вы увидите в коде следующее:

То есть не нужно тратить время на написание 2-х строчек, а то, что требуется теперь - это только вставить нужный локатор и, если нужно, переименовать переменную.

2)Используя всплывающее меню по нажатию правой кнопкой в редакторе кода. Как это сделать:

Нажимаем правую кнопку в редакторе и выбираем во всплывшем меню пункт Generate

 

Затем выберите пункт Web Element(s)

 

После чего Вы увидите меню создания элемента 

 

Здесь можно выбрать либо генерацию одного объекта(как это было при использовании горячих клавиш), так и списка(List) объектов.

Здесь же можно указать имя поля и тип локатора.

В итоге (для списка объектов) , после заполнения всех полей, в коде мы увидим следующее:

3)Существует возможность к уже имеющемуся полю сгенерить аннотацию FindBy по нажатию сочетания горячих клавиш ctrl+S. В результате сверху поля добавится аннотация с пустым css локатором.

4)Генерация объектов By по нажатию комбинации клавиш ctrl+B. 

Вы наверняка заметили, что рядом с полем появился небольшой значок - логотип selenium. Это тоже одно из приятных нововведений нашего плагина - все поля, аннотированные FindBy будут помечены такой картинкой.

Проверка правильности локатора. 

Вы могли увидеть на картинках выше, что значение локаторов подчеркнуты красной линией. Это не случайно. Одна из главных фич нашего уникального плагина - проверка правильности локаторов. Мы потратили не один день на то, чтобы продумать логику определения, правильный локатор или нет. И, надеемся, у нас это получилось. Однако обо всем по порядку.

Включение проверки.

По умолчанию - проверка правильности локаторов отключена. Чтобы включить ее - необходимо сделать следующие простейшие действия:

1)Нажать иконку-логотип селениума в тулбаре сверху

(Если тулбар не отображается - зайдите в меню View и нажмите на Toolbar)

2)Перед Вами откроется меню настройки проверки локаторов:

 

Для того, чтобы активировать проверку - нужно поставить галочку Enable Selector Check и затем выбрать один или несколько методов. Мы специально сделали возможность включать или выключать отдельные методы для поиска элементов, чтобы Вы могли конфигурировать работу нашего плагина как Вам захочется. После выбора - нажимаем OK - и проверки начинают своё грязное дело.

Что проверяется?

Давайте разберем процесс проверки на нескольких примере.

Предположим, что у нас, на какой-то странице есть элемент со следующим css селектором: div[class='some good classes']

Давайте создадим элемент(почему бы не воспользоваться горячими клавишами ctrl+W) и допустим небольшую ошибку в локаторе - "забудем" последнюю одинарную кавычку.

В итоге в коде у нас будет следующий фрагмент:

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

Если навести мышкой на красную линию - Вы увидите тултип с подсказкой, что за ошибка возникла. В нашем случае, будет следующая:

 

По которому достаточно просто понять, в чем же собственно ошибка. Тут мы видим следующее - "После значения атрибута должна быть одинарная кавычка, если атрибут не name". И действительно - должна быть.

Так же подсказку можно увидеть, нажав на красную линию. В этом случае она отобразится внизу экрана, в "футере" IDE:

Удобно, не правда ли? Сразу понятно, что же мы сделали не так.

Так же хочется отметить, что та же самая функциональность помощи доступна, когда мы пишем свои локаторы через использование функции findElement(s) объекта WebDriver.

Выглядеть в данном случае это будет примерно так:

 

К сожалению, мы не поддерживаем динамические локаторы. Это тот случай, когда вместо значения имени класса, например, Вы используете какую-либо переменную. В данном случае Вы увидите сообщение: Check of dynamic locator's not supported. Это сделано из за порой невозможности определить значение переменной в текущий момент времени. Если у Вас есть идея, каким образом можно решить подобную проблему - напишите нам об этом и мы с радостью обсудим с Вами Ваши идеи!

Тут сразу же напрашивается рассказ о следующей большой фиче нашего плагина - помощь в исправлении ошибок.

Исправление ошибок.

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

Наш плагин и тут приходит к Вам на помощь.

Для исправления мы предоставили Вам 2 способа. Один мы опишем в этом разделе, второй - в следующем, так как он же является еще одной большой и очень приятной фичей нашего крутого плагина.

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

При нажатии на нее появляется попап с вариантами исправления сложившейся ошибки. Выглядит он вот так:

Видите варианты Check element existence and fix и Open fix popup? Давайте начнем со второго. После нажатия на него откроется следующее меню:

Тут еще раз дублируется ошибка, а так же можно увидеть подсказку, что нужно сделать для её исправления. В данном случае она гласит следующее:"Добавьте одинарную кавычку после значения атрибута(если атрибут не name)". Последуем совету нашего умного плагина и в поле с локатором добавим ту самую одинарную кавычку после слова classes.

Как только ошибка исправлена - мы увидим радостное зеленое сообщение:

Которое свидетельствует о том, что наш локатор верен. После нажатия кнопки OK произойдет еще одно небольшое и приятное событие - локатор в коде так же исправится на корректное значение, которое мы ввели в меню.

Помните, мы говорили, что существует 2 способа исправить ошибку? Теперь о втором. 

Проверка существования элемента.

Данная функциональность доступна как вариант исправления ошибки, так и как самостоятельная отдельная фича.

Так как в предыдущем разделе мы говорили об ошибках - давайте рассмотрим проверку существования элементов сквозь призму как раз исправления возникших ошибок.

Помните, при нажатии на красную лампу, мы увидели несколько вариантов для исправления?

Теперь нас интересует вариант Check element existence and fix. При выборе его открывается следующее меню:

Это меню предназначено для небольшой и простой проверки существования элемента с указанным локатором на странице.

Для того, чтобы проверить, существует ли элемент, необходимо в поле Address URL ввести адрес страницы, на которой производится проверка. После написания адреса - кнопка CHECK становится активной. При нажатии на неё будет произведена проверка, результатом которой могут стать следующие сообщения в строке Status:

  • Not Found - елси не было найдено ни одного элемента
  • Found 'n' element(s) - если было найдено n элементов с соответствующим локатором.
  • PhantomJS not configured. Please insert path to phantomJs to the specified field - в случае, елси не был указан путь к исполняемому файлу phantomJS
  • какой-либо exception. Никто не застрахован от ошибок. Если вы увидели какой-либо exception в поле status - сразу же сообщите нам

Хотелось бы отдельно поговорить о поле Path to phantomJs. Так как плагин не может определить, где на компьютере располагается исполняемый файл драйвера, то  для корректной работы проверки наличия элемента нужно указать в этом поле этот самый путь. Разумеется, его нужно будет указать лишь раз, далее он сохраняется в проекте и будет проставляться автоматически. Если у Вас возникли проблемы с настройкой phantomJs - можете воспользоваться официальным сайтом продукта или написать нам. Мы всегда рады прийти Вам на помощь

Так как наш локатор содержит ошибку - мы будем получать первое сообщение, говорящее нам, что элемент не найден. Как только мы исправим ошибку - после проверки мы увидим зеленое сообщение, что элемент найден. Так же, после исправления, станет активна кнопка Save new locator value, после нажатия на которую, локатор из поля Element Locator будет сохранен в коде. Это как раз полезно, когда данное меню используется для исправления ошибок.

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

Чтобы вызвать данное меню для любого из элементов - можно навести мышкой на значение локатора , нажать правую кнопку и выбрать пункт Check Element Existence:

После чего будет открыто то же самое меню проверки существования элемента.

Так же хочется отметить, что функциональность проверки существования элемента(как и нахождения ошибок) так же возможна при использовании функций findElement и findElements объекта WebDriver. Для этого необходимо навести мышку на значение локатора в параметре функции и так же выбрать Check Element Existance во всплывшем по нажатию правой кнопке попапе.

Помощь в написании локаторов.

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

Чтобы процесс создания локаторов стал удобнее, приятнее и проще - мы представляем еще одну большую фичу нашего плагина, а именно - Code Complete для локаторов. 

Вы, наверняка, достаточно часто сталкивались с code complete при написании программ - Вы вводите точку после названия переменной, нажимаете комбинацию клавиш alt+space(или другое, настроенное сочетание) и IDE предлагает Вам варианты, что можно написать дальше. Это сокращает время и уменьшает вероятность сделать ошибку.

Перед началом разработки нашего плагина, мы подумали - а почему такой функциональности по предложению вариантов нету для локаторов? Это было бы очень удобно - начинаешь набирать текст, нажимаешь alt+space и тебе предлагаются варианты, как дальше писать локатор. Это могло бы сократить время на вбивание текста, а так же с большой долей вероятности помогло бы избежать ошибок, которые мы описывали в начале этой статьи(помните забытую одинарную кавычку?). Так же данная функциональность была бы полезна для новичков - тех, кто только начинает разбираться, как правильно составлять локаторы.

Все наши размышления привели к тому, что теперь данная фича стала Вам доступна! Хотелось бы продемонстрировать ее на примере.

Создадим поле для WebElement'а(а давайте опять применим горячие клавиши ctrl+W).

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

Поставим курсор между кавычками и нажмем alt+space. При этом, как и при написании обычного кода, мы увидим меню code complete, которое в данном случае предложит нам различные варианты начала нашего локатора. Выглядит это примерно вот так(для css):

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

Далее, как только Вы начнете вводить какое-либо значение - кол-во вариантов будет сокращаться.

Из предложенных вариантов мы выбрали тэг div, после нажатия клавиш alt+space мы увидим уже более узкий круг предложений:

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

Выберем первый вариант("div[") и снова нажмем alt+space:

Нам был предложен целый ряд возможных вариантов продолжения, включающий в себя имя атрибута и возможные варианты равенства значения.

Выбрав один из вариантов - он будет тут же вставлен в значение параметра аннотации. Составив локатор таким способом мы вряд ли забудем одинарную кавычку, не правда ли?

Отметим, что функция code complete доступна для всех вариантов методов написания локаторов(xpath, id и тд) , а так же она работает для значений функций findElement и  findElements объекта WebDriver.

 

На этом наш рассказ о созданном нами плагине подошел к концу.

Если у Вас возникнут какие-либо вопросы или предложения, что и как можно улучшить или добавить - обязательно напишите нам.

Если Вы обнаружили ошибку - сразу же  напишите нам о ней. 

Мы всегда рады общению и готовы выслушивать и воплощать любые идеи. Вместе мы сделаем наш плагин еще удобнее и проще в использовании, а значит еще более упростим процесс написания тестов.