При тестировании функциональности вашего веб-сайта, особенно таких веб-элементов, как переключатели, текстовые поля, раскрывающийся список и т. Д., Необходимо убедиться, что вы можете получить доступ к этим элементам. Локаторы Selenium служат именно этой цели: с помощью этой команды мы можем идентифицировать эти веб-элементы, DOM (Document Object Model), для автоматизации тестирования Selenium с помощью наших сценариев.
Эти локаторы Selenium жизненно важны для сценариев, так как если они ошибочны, ваши сценарии автоматизации не будут работать. Таким образом, ваши усилия по автоматизации тестирования Selenium полагаются на эти локаторы Selenium в любой среде тестирования. Protractor, структура Angular JS, имеет множество локаторов Selenium, которые можно идентифицировать, используя определенный метод By во время выполнения.
В этом руководстве по тестированию транспортиров мы подробно обсудим локаторы Selenium в Protractor и то, как мы можем использовать локаторы для взаимодействия с приложением и извлечения текущего рабочего состояния. Итак, начнем.
Что такое транспортир?
Protractor — это платформа автоматизации тестирования Selenium, разработанная командой Google и используемая в основном для приложений с такими технологиями внешнего интерфейса, как AngularJS. Эта сквозная среда тестирования имитирует доступ к веб-приложению так же, как реальный пользователь выполняет любые действия в браузере и автоматически выполняет наши тестовые случаи. Он предлагает интерфейс разработки драйвера поведения и, следовательно, удобно выполнять наши тесты.
Кроме того, функция непрерывной синхронизации выполняет следующую задачу на веб-странице вскоре после завершения предыдущих ожидающих действий.
Наконец, он поддерживает специфичные для Angular стратегии, так что мы можем легко тестировать элементы, предоставляемые Angular, и мы подробнее рассмотрим это в этом посте.
Какова важность селена локаторов в транспортире?
Давайте начнем наше руководство по тестированию транспортировщиков с обсуждения различных функций, которые следует учитывать при выборе локатора, касающегося его производительности. Локаторы Selenium в Protractor оказались хорошими и надежными в большинстве сценариев. Некоторые из функций, которые он предоставляет:
Хорошая читаемость
-
Локаторы Selenium в транспортире легко читаемы и доступны. Локаторы обеспечивают достаточную гибкость для тестового кода, делая его доступным для пользователя.
Меньше обслуживания
-
В Селене локаторы в транспортире разрабатываются оптимальным образом и , следовательно, они требуют меньше затрат на обслуживание.
-
Структура локатора спроектирована таким образом, что нет необходимости обновлять локатор даже при изменении местоположения элемента. Это требует модификации, только если есть какие-либо изменения в функциональности веб-приложения.
Улучшенная скорость
-
Это одно из самых важных свойств локаторов Selenium, так как эта функция определяет производительность веб-приложения. Локаторы Selenium в транспортире имеют уникальный идентификатор, который делает их относительно быстрее, чем другие локаторы Selenium. Иногда скорость определения местоположения элемента также зависит от внутренней скорости обработки в браузерах.
Цель селена локаторов в транспортире
В продолжение нашего учебника по тестированию транспортиров, мы обсудим важность локаторов Selenium. Важно помнить, что для написания хороших сквозных тестов в Protractor необходимо найти подходящие элементы объектной модели документа (DOM) для веб-страниц.
Он имеет тенденцию глобально экспортировать фабрики локаторов через созданные объекты. Поскольку транспортир построен на интерфейсах Selenium, локаторы Selenium в транспортире вполне сопоставимы и похожи на локаторы, связанные с Selenium WebDriver. Поэтому интересно знать, что фреймворк поддерживает локаторы Selenium в Protractor, а также свой собственный.
Работа селеновых локаторов в транспортире
Далее в этом уроке по тестированию транспортира мы обсудим, как работают локаторы Selenium в Protractor. Функция локатора в 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
Имя класса локатор является одним из наиболее широко используемого Селена локаторов в транспортире. Цель состоит в том, чтобы проверить элементы на странице с атрибутом класса, а затем дополнительно классифицировать элементы, соответствующие их имени класса.
Например:
Образец XML-документа:
XML
xxxxxxxxxx
1
/* The list contains a class for positive or negative */
2
3
<ul class="digits">
4
<li class="positive">5</li>
5
<li class="negative">-6</li>
6
</ul>
7
Используемый локатор:
xxxxxxxxxx
1
/* The locator that returns the expected element for the specified class */
2
3
var even = browser.findElement(by.className(positive));
4
expect(even.getText()).toBe('5');
5
// making use of our locator in our test script //
6
expect(browser.findElement(by.className('even'))).toBe('-6');
7
By.id
Локатор Id используется , чтобы обнаружить элемент в веб - страницы на основе атрибута идентификатора , определенного в структуре XML документа.
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The list contains class for positive or negative */
2
3
<ul class="digits">
4
<li class="negative">-6</li>
5
<li class="positive" id="positiveNumber">5</li>
6
</ul>
7
Используемый локатор:
xxxxxxxxxx
1
/* The locator that returns the expected element for the specified id */
2
3
// making use of our locator in our test script //
4
var positive = browser.findElement(by.id('positiveNumber'));
5
expect(positive.getText()).toBe('5');
6
By.css
В CSS локатора помогает в определении элементов и классифицировать их на основе селектора CSS , т.е. значение идентификатора используется для различения элемента существующего на веб - странице. Эти локаторы Selenium также являются одним из наиболее предпочтительных заменителей в Protractor, когда у нас нет выбора для выбора на основе имени класса или идентификатора.
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The list contains class for two color i.e blue or red */
2
3
<ul class="color">
4
<li class="first">blue</li>
5
<li class="second" id="secondColor">red</li>
6
</ul>
7
Используемый локатор:
xxxxxxxxxx
1
/* The locator that returns the expected element for the specified CSS */
2
3
var first = browser.findElement(by.css('.first'));
4
expect(first.getText()).toBe('blue');
5
// making use of our locator in our test script //
6
expect(browser.findElement(by.css('#secondColor'))).toBe('red');
7
By.linkText
Задача локатора linkText - определить соответствующий текст строки, соответствующий элементу привязки, т. Е. Тегу <a> в DOM. Он работает только с гиперссылкой, и по умолчанию первый текст ссылки выбирается, если на веб-странице присутствует несколько элементов для текста ссылки.
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The anchor tag which contains the website name and its URL */
2
3
<a href="http://www.lambdatest.com">LambdaTest</a>
4
5
<a href="http://www.lambdatest.com">LambdaTest</a>
6
Используемый локатор:
xxxxxxxxxx
1
/* The locator that returns the expected element for the link i.e. Lambda Test*/
2
3
// making use of our locator in our test script //
4
var myLink = element(by.linkText(‘LambdaTest'));
5
6
expect(myLink.getTagName()).toBe('a');
7
По имени
Имя локатор используется , чтобы обнаружить элемент , имеющий значение удельной в имени атрибута.
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The list contains a class for two names i.e John and Mark */
2
3
<ul>
4
5
<li name="developer">John</li>
6
7
<li name="tester">Mark</li>
8
9
</ul>
10
Используемый локатор:
xxxxxxxxxx
1
/* The locator that returns the expected element for the specified name */
2
3
// making use of our locator in our test script //
4
var developer = browser.findElement(by.name('developer'));
5
6
// making use of our locator in our test script //
7
var tester = browser.findElement(by.name('tester'));
8
9
expect(developer.getText()).toBe('John');
10
11
expect(tester.getText()).toBe('Mark');
12
By.partialLinkText
Локатор partialLinkText используется в сценариях , где существует необходимость найти элементы , которые содержат строку или часть строки в тексте ссылки элемента.
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The list contains anchor tag which has the required text */
2
3
<ul>
4
<li><a href="http://www.lambdatest.com"> Selenium test automation Cloud</a></li>
5
<li>Online Selenium Grid for Automated Testing</li>
6
</ul>
7
Используемый локатор:
xxxxxxxxxx
1
// /* The locator that returns the expected element i.e. gives us the 'a' element value ‘Selenium test automation Cloud’ and navigates to the same link */
2
3
// making use of our locator in our test script //
4
var myLink = browser.findElement(by.partialLinkText('Cloud'));
5
6
myLink.click();
7
By.tagName
Тэгу локатор используется для поиска элементов , имеющих имя конкретного тега. Он ищет элементы на веб-странице, имеющие любое имя тега, например <a>, <div>, <p> и т. Д. Он функционирует аналогично функции getElementsByTagName, используемой в структуре документа XML.
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The list contains anchor tag which has the required text */
2
3
<a href="http://www.lambdatest.com">LambdaTest</a>
4
Используемый локатор:
xxxxxxxxxx
1
// /* The locator that returns the expected element i.e. gives us the 'a' tag value and that matches with the text given */ //
2
3
// making use of our locator in our test script //
4
expect(element(by.tagName('a')).getText()).toEqual('LambdaTest');
5
By.xpath
Локатор Xpath используется , чтобы найти соответствующий элемент для XML Xpath Selector при условии. При работе с локаторами XPath Selenium важно отметить, что для поиска и элементизации всей модели документа XML мы должны начать наш локатор XPath с «//».
Пример:
XPath = //*[@value='Inbox'] - matches with Inbox
xpath=//button[@name="Gma"] - matches with Gmail
Например:
Образец XML-документа:
xxxxxxxxxx
1
/* The list contains anchor tag which has the required text */
2
3
<ul>
4
<li><a href="http://www.lambdatest.com">Selenium test automation Cloud </a> </li>
5
<li> Online Selenium Grid for Automated Testing </li>
6
</ul>
7
Используемый локатор:
xxxxxxxxxx
1
// /* The locator that returns the expected element i.e. gives us the 'a' tag value with the help of XPath and that matches with the text given */
2
3
// making use of our locator in our test script //
4
var xpathEle = browser.findElement(by.xpath('//ul/li/a'));
5
6
expect(xpathEle.getText()).toBe(‘Selenium test automation Cloud’);
7
Угловые специфические локаторы селена
Теперь, в этом уроке по тестированию транспортиров, давайте взглянем на некоторые локаторы Selenium, которые используются в Angular, но также доступны для платформы Protractor.
By.model
Локатор модели идентифицирует элемент, имеющий точный текст, связанный с атрибутом ng-model.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the model attribute */ //
2
3
<input type="text" ng-model="developer.name">
4
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the model attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
element(by.model('developer.name')).click();
5
By.buttonText
Локатор buttonText находит совпадение с элементом, имеющим тот же текст тега кнопки или внутри подэлемента тега.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML contains the button with the required value */ //
2
3
<button> Selenium test automation Cloud </button>
4
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the button tag and returns the value */ //
2
3
// making use of our locator in our test script //
4
element(by.buttonText('Selenium test automation Cloud'));
5
By.partialButtonText
PartalButtonTextlocator находит совпадение с элементом, который содержит часть текста, т.е. частичное совпадение, в теге кнопки или внутри подэлемента тега.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML contains the button with the required value */ //
2
3
<button> Selenium test automation Cloud </button>
4
5
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the button tag and returns the value */ //
2
3
// making use of our locator in our test script //
4
element(by.partialButtonText('Cloud'));
5
By.exactBinding
Локатор correctBinding используется для определения местоположения атрибута ng-bind с указанием точного значения строки / текста. Он не будет проверять наличие частичных совпадений в тексте.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the bind attribute */ //
2
3
<p ng-bind="developer.name"></p>
4
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the bind attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
expect(element(by.exactBinding('developer.name')).isPresent()).toBe(true);
5
By.binding
Этот локатор привязки используется для поиска атрибута ng-bind с заданным текстовым значением. Это также помогает в поиске текста, который является частичным совпадением, т.е. если есть атрибут, который имеет некоторое совпадение с данным локатором, тогда этот элемент будет найден нашим локатором, поэтому будут возвращены соответствующие совпадающие элементы.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the bind attribute */ //
2
3
<p ng-bind="developer.name">John</p>
4
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the bind attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
var eleName = element(by.binding(developer));
5
expect(eleName.getText()).toBe('John');
6
By.exactRepeater
Локатор verifyRepeater идентифицирует элемент, имеющий точный текст, связанный с атрибутом ng-repeat. Он не будет проверять наличие частичных совпадений в тексте.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the bind attribute */ //
2
3
<li ng-repeat="dev in developer_names"></li>
4
5
<li ng-repeat="test in tester_names"></li>
6
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the bind attribute and returns the exact value */ //
2
3
// making use of our locator in our test script //
4
5
expect(element(by.exactRepeater('dev in developer_names')).isPresent()).toBe(true);
6
By.repeater
Локатор повторителя используется для поиска элемента с атрибутом ng-repeat. Это также помогает в поиске текста, который является частичным совпадением, т.е. если есть атрибут, который имеет некоторое совпадение с данным локатором, тогда этот элемент будет найден нашим локатором, поэтому будут возвращены соответствующие совпадающие элементы.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the repeater attribute */ //
2
3
<tr ng-repeat="developer_info">
4
<td>{{dev.id}}</td>
5
<td>{{dev..name}}</td>
6
<td>{{dev.salary}}</td>
7
</tr>
8
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the repeater attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
5
var devID = element(by.repeater('developer_info').row(0));
6
expect(devID.getText()).toBe('2');
7
8
var devName = element(by.repeater('developer_info').row(1));
9
expect(devName.getText()).toBe('Mark');
10
By.cssContainingText
Локатор cssContainedText находит элемент с помощью CSS, имеющего определенную текстовую строку, т.е. он объединяет функцию локатора CSS и локатора текстового элемента для идентификации элемента.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the css text */ //
2
3
<ul>
4
<li class="color">Blue</li>
5
<li class="color">Red</li>
6
</ul>
7
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element and returns the value for the Blue color but not the Red color */ //
2
3
// making use of our locator in our test script //
4
5
var blue = element(by.cssContainingText('.color', 'Blue'));
6
By.options
Локатор параметров идентифицирует элемент, связанный с атрибутом ng-option.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text with the option attribute */ //
2
3
<select ng-options="Colors options in the custom collection">
4
<option value="0">Blue Color</option>
5
<option value="1">Red Color</option>
6
<option value="2">Green Color</option>
7
</select>
8
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the options attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
5
var colorOptions = element.all(by.options('Colors options in the custom collection'));
6
expect(colorOptions.count()).toEqual(Green);
7
By.deepCss
Локатор deepCss в транспортире используется для обнаружения теневых элементов DOM, которые по умолчанию не легко обнаружить с помощью стандартных локаторов элементов Selenium.
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text and returns the fetched value */ //
2
3
<div>
4
<span id="outerspan"> //outerspan
5
<"shadow tree"> //shadow tree
6
<span id="span1"></span>
7
<"shadow tree">
8
<span id="span2"></span>
9
</>
10
</>
11
</div>
12
Используемый локатор:
xxxxxxxxxx
1
// /* The locator finds the element with the options attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
5
var mySpan = element.all(by.deepCss('span')); //myspan
6
expect(mySpan.count()).toEqual(7);
7
// making use of our locator in our test script //
8
9
var checkSpans = element.all(by.css('span'); //verify span
10
expect(checkSpans.count()).toEqual(5);
11
В следующем разделе учебника по тестированию транспортиров мы обсудим, как вы можете интегрировать транспортир с другими мощными инструментами. До этого, если вы хотите настроить транспортир для запуска ваших сценариев автоматизации Selenium, вы можете обратиться к нашей технической поддержке .
By.addLocator
AddLocator в транспортире используется для создания пользовательских локаторов и загрузки их позже в конфигурации
Например:
Образец XML-документа:
xxxxxxxxxx
1
// /* The XML input type contains the text and returns the fetched value */ //
2
<button ng-click="viewResults()">View</button>
Используемый локатор:
Джава
xxxxxxxxxx
1
// /* The locator finds the element with the options attribute and returns the value */ //
2
3
// making use of our locator in our test script //
4
5
by.addLocator('Selenium Grid',function(buttonText, opt_parentElement, opt_rootSelector) {
6
var using = opt_parentElement || document,
7
buttons = using.querySelectorAll(‘Automate testing’);
8
return Array.prototype.filter.call(buttons, function(button) {
9
return button.textContent === buttonText;
10
});
11
});
12
Заключение
Как мы видели в этом учебнике по тестированию транспортиров, так как транспортир построен на Selenium и в основном используется для сайтов Angular, он наследует свойства от них. По этой причине мы используем локаторы Selenium в транспортирах, и это придает каркасу больше шарма и делает его более надежным при использовании в полной мере.
С другой стороны, транспортир - это не только локаторы Selenium. Существует множество других аспектов и возможностей тестирования протекторов, доступных для использования на рынке, который добавляет еще больше, которые мы в конечном итоге рассмотрим в наших руководствах по тестированию транспортировщиков.