Полное руководство по локаторам селена в транспортире (примеры)

При тестировании функциональности вашего веб-сайта, особенно таких веб-элементов, как переключатели, текстовые поля, раскрывающийся список и т. Д., Необходимо убедиться, что вы можете получить доступ к этим элементам. Локаторы Selenium служат именно этой цели: с помощью этой команды мы можем идентифицировать эти веб-элементы, DOM (Document Object Model), для автоматизации тестирования Selenium с помощью наших сценариев.

Эти локаторы Selenium жизненно важны для сценариев, так как если они ошибочны, ваши сценарии автоматизации не будут работать. Таким образом, ваши усилия по автоматизации тестирования Selenium полагаются на эти локаторы Selenium в любой среде тестирования. Protractor, структура Angular JS, имеет множество локаторов Selenium, которые можно идентифицировать, используя определенный метод By во время выполнения.

В этом учебнике по тестированию транспортиров мы подробно обсудим локаторы Selenium в Protractor и то, как мы можем использовать локаторы для взаимодействия с приложением и извлечения текущего рабочего состояния. Итак, начнем.

Автоматизируйте кросс-браузерное тестирование с Protractor & Selenium

Какова важность селена локаторов в транспортире?

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

1. Хорошая читаемость:
Локаторы Selenium в транспортире легко читаемы и доступны. Локаторы обеспечивают достаточную гибкость для тестового кода, делая его доступным для пользователя.

2. Меньше технического обслуживания:

• Локаторы Selenium в транспортирах разработаны оптимизированным способом и, следовательно, требуют меньших затрат на обслуживание.
• Структура локатора спроектирована таким образом, что нет необходимости обновлять локатор даже при изменении местоположения элемента. Это требует модификации, только если есть какие-либо изменения в функциональности веб-приложения.

3. Улучшенная скорость:
Это одно из самых важных свойств локаторов Selenium, так как эта функция определяет производительность веб-приложения. Локаторы Selenium в транспортире имеют уникальный идентификатор, который делает их относительно быстрее, чем другие локаторы Selenium. Иногда скорость определения местоположения элемента также зависит от внутренней скорости обработки в браузерах.

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

В продолжение нашего учебника по тестированию транспортиров, мы обсудим важность локаторов Selenium. Важный момент, который следует помнить для написания хороших сквозных тестов в Protractor, — это поиск соответствующих элементов Document Object Model (DOM) для веб-страниц. Он имеет тенденцию глобально экспортировать фабрики локаторов через инстанцированные объекты. Поскольку транспортир построен на интерфейсах Selenium, локаторы Selenium в транспортире вполне сопоставимы и похожи на локаторы, связанные с Selenium WebDriver . Поэтому интересно знать, что фреймворк поддерживает локаторы Selenium в транспортирах, а также свой собственный.

Работа селеновых локаторов в транспортире

Далее в этом уроке по тестированию транспортира мы обсудим, как локаторы Selenium работают в транспортире. Функция локатора в Protractor заключается в экспорте глобальной функции, то есть «элемента», которая вводит локатор и предоставляет нам ElementFinder в ответ.

ElementFinder, с другой стороны, предлагает фундаментальный способ связи с элементом и получения подробной информации об этом с помощью различных методов действия, таких как getText (), click () и sendKeys (). Эти методы довольно популярны и часто используются при выполнении автоматизации тестирования Selenium.

Основное назначение функции element — найти отдельный элемент. Чтобы найти несколько элементов, используется функция element.all.

Есть несколько других способов, с помощью которых мы можем найти элементы в Protractor и используя стратегии определения местоположения элементов в среде Angular JavaScript, такие как by.model (), by.repeater (), by.binding () и т. Д.

Список локаторов селена в транспортире

Теперь, в этом разделе учебника по тестированию транспортиров, давайте познакомимся с глобальными переменными, которые в основном используются при поиске элементов DOM, с примерами для лучшего понимания этих локаторов Selenium в транспортире. Это группа стратегий поиска элементов, связанных с ключевым словом «by», например by.className, by.css, by.model и т. Д. Некоторые из наиболее часто используемых:

• by.className
• by.id
• by.CSS
• by.linkText
• по имени
• by.partialLinkText
• by.tagName
• by.xpath

1. by.className
Локатор className является одним из наиболее широко используемых локаторов Selenium в Protractor. Цель состоит в том, чтобы проверить элементы на странице с атрибутом класса, а затем дополнительно классифицировать элементы, соответствующие их имени класса.

Например:-
Образец XML-документа: —

 / * Список содержит класс для положительного или отрицательного * /
 
 <ul class = "цифры">
   <li class = "positive"> 5 </ li>
   <li class = "негатив"> - 6 </ li>
 </ UL>

Используемый локатор: —

 / * Локатор, который возвращает ожидаемый элемент для указанного класса * /
 
 var even = browser.findElement (by.className (положительный));
 ожидать (even.getText ()) Тобе ( '5').
 // используя наш локатор в нашем тестовом скрипте //
 ожидать (browser.findElement (by.className ( 'даже'))) Тоба ( '- 6').

2. by.id

Локатор Id используется для обнаружения элемента на веб-странице на основе атрибута id, определенного в структуре документа XML.

Например :-
Образец XML-документа: —

 / * Список содержит класс для положительного или отрицательного * /
 
 <ul class = "цифры">
   <li class = "негатив"> - 6 </ li>
   <li class = "positive" id = "positiveNumber"> 5 </ li>
 </ UL>

Используемый локатор: —

 / * Локатор, который возвращает ожидаемый элемент для указанного идентификатора * /
 
 // используя наш локатор в нашем тестовом скрипте //
 var positive = browser.findElement (by.id ('positiveNumber'));
 ожидать (positive.getText ()) Тобе ( '5').

3. by.css

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

Например :-
Образец XML-документа: —

 / * Список содержит класс для двух цветов, т.е. синий или красный * /
 
 <ul class = "color">
   <li class = "first"> синий </ li>
   <li class = "second" id = "secondColor"> красный </ li>
 </ UL>

Используемый локатор: —

 / * Локатор, который возвращает ожидаемый элемент для указанного CSS * /
 
 var first = browser.findElement (by.css ('. first'));
 ожидать (first.getText ()) Тобе ( 'синий').
 // используя наш локатор в нашем тестовом скрипте //
 ожидать (browser.findElement (by.css ( '# secondColor'))) Тобе ( 'красный').

4. by.linkText

Цель локатора linkText — идентифицировать соответствующий текст строки, соответствующий элементу привязки, т. Е. Тегу <a> в DOM. Он работает только с гиперссылкой, и по умолчанию первый текст ссылки выбирается, если на веб-странице присутствует несколько элементов для текста ссылки.

Например :-
Образец XML-документа: —

 / * Якорный тег, который содержит имя веб-сайта и его URL * /
 
 <a href="http://www.lambdatest.com"> LambdaTest </a>
 
 <a href="http://www.lambdatest.com"> LambdaTest </a>

Используемый локатор: —

 / * Локатор, который возвращает ожидаемый элемент для ссылки, т.е. лямбда-тест * /
 
 // используя наш локатор в нашем тестовом скрипте //
 var myLink = element (by.linkText ('LambdaTest'));
 
 ожидать (myLink.getTagName ()) Тобе ( 'а').

5. by.name

Имя локатора используется для обнаружения элемента, имеющего определенное значение в атрибуте имени.
Например :-

Образец XML-документа: —

 / * Список содержит класс для двух имен, то есть Джона и Марка * /
 
 <UL>
 
   <li name = "developer"> Джон </ li>
 
   <li name = "tester"> Марк </ li>
 
 </ UL>

Используемый локатор: —

 / * Локатор, который возвращает ожидаемый элемент для указанного имени * /
 
 // используя наш локатор в нашем тестовом скрипте //
 var developer = browser.findElement (by.name ('developer'));
 
 // используя наш локатор в нашем тестовом скрипте //
 var tester = browser.findElement (by.name ('tester'));
 
 ожидать (developer.getText ()) Тобе ( 'Джон').
 
 ожидать (tester.getText ()) Тоба ( 'Марк').

6. by.partialLinkText

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

Например :-

Образец XML-документа: —

 / * Список содержит тег привязки, который имеет необходимый текст * /
 
 <UL>
   <li> <a href="http://www.lambdatest.com"> Облако автоматизации тестирования Selenium </a> </ li>
   <li> Сетевая сетка Selenium для автоматизированного тестирования </ li>
 </ UL>

Используемый локатор: —

 // / * Локатор, который возвращает ожидаемый элемент, т.е. дает нам значение элемента «a» Selenium test автоматизации Cloud и переходит по той же ссылке * /
 
 // используя наш локатор в нашем тестовом скрипте //
 var myLink = browser.findElement (by.partialLinkText ('Cloud'));
 
 myLink.click ();

7. by.tagName

Локатор tagName используется для поиска элементов, имеющих определенное имя тега. Он ищет элементы на веб-странице, имеющие любое имя тега, например <a>, <div>, <p> и т. Д. Он функционирует аналогично функции getElementsByTagName, используемой в структуре документа XML.

Например:-

Образец XML-документа: —

 / * Список содержит тег привязки, который имеет необходимый текст * /
 
 <a href="http://www.lambdatest.com"> LambdaTest </a>

Используемый локатор: —

 // / * Локатор, который возвращает ожидаемый элемент, т.е. дает нам значение тега 'a' и совпадает с заданным текстом * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 ожидать (элемент (by.tagName ( 'а')) GetText ().) toEqual ( 'LambdaTest').

8. by.xpath

Локатор Xpath используется для поиска соответствующего элемента для предоставленного XML Xpath Selector. При работе с локаторами XPath Selenium важно отметить, что для поиска и элемента всей модели документа XML мы должны начать наш локатор XPath с «//».

Пример:

Например :-

Образец XML-документа: —

 / * Список содержит тег привязки, который имеет необходимый текст * /
 
 <UL>
   <li> <a href="http://www.lambdatest.com"> Облако автоматизации тестирования Selenium </a> </ li>
   <li> Сетевая сетка Selenium для автоматизированного тестирования </ li>
 </ UL>

Используемый локатор: —

 // / * Локатор, который возвращает ожидаемый элемент, т.е. дает нам значение тега 'a' с помощью XPath и совпадает с заданным текстом * /
 
 // используя наш локатор в нашем тестовом скрипте //
 var xpathEle = browser.findElement (by.xpath ('// ul / li / a'));
 
 Ожидаем (xpathEle.getText ()). toBe («Облако автоматизации тестирования Selenium»);

Угловые специфические локаторы селена

Теперь, в этом уроке по тестированию транспортиров, давайте взглянем на некоторые локаторы Selenium, которые используются в Angular, но также доступны для платформы Protractor.

• by.model
• by.buttonText
• by.partialButtonText
• by.exactBinding
• by.binding
• by.exactRepeater
• by.repeater
• by.cssContainingText
• by.options
• by.deepCss
• by.addLocator

1. by.model

Локатор модели идентифицирует элемент, имеющий точный текст, связанный с атрибутом ng-model.

Например :-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с атрибутом модели * / //
 
 <input type = "text" ng-model = "developer.name">

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом модели и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 элемент (by.model ( 'developer.name')) нажмите кнопку ().

2. by.buttonText

Локатор buttonText находит совпадение с элементом, имеющим тот же текст тега кнопки или внутри подэлемента тега.

Например :-

Образец XML-документа: —

 // / * XML содержит кнопку с требуемым значением * / //
 
 <button> Облако автоматизации тестирования Selenium </ button>

Используемый локатор: —

 // / * Локатор находит элемент с тегом кнопки и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 элемент (by.buttonText («Облако автоматизации тестирования Selenium»));

3. by.partialButtonText

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

Например :-

Образец XML-документа: —

 // / * XML содержит кнопку с требуемым значением * / //
 
 <button> Облако автоматизации тестирования Selenium </ button>

Используемый локатор: —

 // / * Локатор находит элемент с тегом кнопки и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 элемент (by.partialButtonText ( 'Облако'));

4. by.exactBinding

Локатор correctBinding используется для определения местоположения атрибута ng-bind с указанием точного значения строки / текста. Он не будет проверять наличие частичных совпадений в тексте.

Например:-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с атрибутом bind * / //
 
 <p ng-bind = "developer.name"> </ p>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом bind и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 ожидать (элемент (by.exactBinding ( 'developer.name')) isPresent ().) Тоба (истина).

5. переплет

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

Например:-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с атрибутом bind * / //
 
 <p ng-bind = "developer.name"> Джон </ p>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом bind и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 var eleName = element (by.binding (разработчик));
 ожидать (eleName.getText ()) Тобе ( 'Джон').

6. by.exactRepeater

Локатор verifyRepeater идентифицирует элемент, имеющий точный текст, связанный с атрибутом ng-repeat. Он не будет проверять наличие частичных совпадений в тексте.

Например:-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с атрибутом bind * / //
 
 <li ng-repeat = "dev in developer_names"> </ li>
 
 <li ng-repeat = "test in tester_names"> </ li>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом bind и возвращает точное значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 
 Ожидается (элемент (by.exactRepeater ('dev in developer_names')). isPresent ()). toBe (true);

7. by.repeater

Локатор повторителя используется для поиска элемента с атрибутом ng-repeat. Это также помогает в поиске текста, который является частичным совпадением, то есть, если есть атрибут, который имеет некоторое совпадение с данным локатором, этот элемент будет найден нашим локатором, поэтому соответствующие соответствующие элементы будут возвращены.

Например:-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с атрибутом ретранслятора * / //
 
 <tr ng-repeat = "developer_info">
     <TD> {{dev.id}} </ TD>
     <TD> {{dev..name}} </ TD>
     <TD> {{dev.salary}} </ TD>
 </ TR>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом repeater и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 
 var devID = element (by.repeater ('developer_info'). row (0));
 ожидать (devID.getText ()) Тобе ( '2').
 
 var devName = element (by.repeater ('developer_info'). row (1));
 ожидать (devName.getText ()) Тоба ( 'Марк').

8. by.cssContainedText

Локатор cssContainedText находит элемент с помощью CSS, имеющего определенную текстовую строку, т.е. он объединяет функцию локатора CSS и локатора текстового элемента для идентификации элемента.

Например:-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с текстом css * / //
 
 <UL>
   <li class = "color"> Синий </ li>
   <li class = "color"> Красный </ li>
 </ UL>

Используемый локатор: —

 // / * Локатор находит элемент и возвращает значение для синего цвета, но не для красного цвета * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 
 var blue = element (by.cssContainedText ('. color', 'Blue'));

9. by.options

Локатор параметров идентифицирует элемент, связанный с атрибутом ng-option.

Например :-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст с атрибутом option * / //
 
 <select ng-options = "Параметры цветов в пользовательской коллекции">
   <option value = "0"> Синий цвет </ option>
   <option value = "1"> Красный цвет </ option>
   <option value = "2"> Зеленый цвет </ option>
 </ Выберите>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом options и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 
 var colorOptions = element.all (by.options ('Параметры цветов в пользовательской коллекции'));
 ожидать (colorOptions.count ()) toEqual (зеленый).

10. by.deepCss

Локатор deepCss в транспортире используется для обнаружения теневых элементов DOM, которые по умолчанию не легко обнаружить с помощью стандартных локаторов элементов Selenium.

Например:-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст и возвращает извлеченное значение * / //
 
 <DIV>
   <span id = "outerspan"> // outerspan
   <"shadow tree"> // теневое дерево
     <span id = "span1"> </ span>
     <"теневое дерево">
       <span id = "span2"> </ span>
     </>
   </>
 </ DIV>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом options и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 
 var mySpan = element.all (by.deepCss ('span'));  // myspan
 ожидать (mySpan.count ()) toEqual (7).
 // используя наш локатор в нашем тестовом скрипте //
 
 var checkSpans = element.all (by.css ('span'); // проверить диапазон
 ожидать (checkSpans.count ()) toEqual (5).

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

11. by.addLocator

AddLocator в транспортире используется для создания пользовательских локаторов и загрузки их позже в конфигурации.

Например :-

Образец XML-документа: —

 // / * Тип ввода XML содержит текст и возвращает извлеченное значение * / //
 
 <button ng-click = "viewResults ()"> Вид </ button>

Используемый локатор: —

 // / * Локатор находит элемент с атрибутом options и возвращает значение * / //
 
 // используя наш локатор в нашем тестовом скрипте //
 
 by.addLocator ('Selenium Grid', функция (buttonText, opt_parentElement, opt_rootSelector) {
 var using = opt_parentElement ||  документ,
 button = using.querySelectorAll ('Автоматизировать тестирование');
 return Array.prototype.filter.call (кнопки, функция (кнопка) {
 return button.textContent === buttonText;
 });
 });

Вывод

Как мы видели в этом учебнике по тестированию транспортиров, так как транспортир построен на Selenium и в основном используется для сайтов Angular, он наследует свойства от них. По этой причине мы используем локаторы Selenium в транспортире, и это придает каркасу больше шарма и делает его более надежным при использовании в полной мере. С другой стороны, транспортир — это не только локаторы Selenium. Существует множество других аспектов и возможностей тестирования протекторов, доступных для использования на рынке, который добавляет еще больше, которые мы в конечном итоге рассмотрим в наших руководствах по тестированию транспортировщиков.