5) Локаторы

Что такое локаторы?

Локатор — это команда, которая сообщает Selenium IDE, над какими элементами GUI (скажем, «Текстовое поле», «Кнопки», «Флажки» и т. Д.) Необходимо работать. Определение правильных элементов графического интерфейса является необходимым условием для создания сценария автоматизации. Но точная идентификация элементов GUI сложнее, чем кажется. Иногда вы в конечном итоге работаете с неправильными элементами графического интерфейса или вообще без элементов! Следовательно, Selenium предоставляет несколько локаторов для точного определения местоположения элемента GUI.

Различные типы локаторов в Selenium IDE

Что вы узнаете: [ скрыть ]

Есть команды, которым не нужен локатор (например, команда «открыть»). Однако большинству из них нужны локаторы.

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

Расположение по ID

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

Целевой формат: id = id элемента

В этом примере мы будем использовать Facebook в качестве нашего тестового приложения, потому что Mercury Tours не используют атрибуты ID.

Шаг 1. С тех пор, как этот учебник был создан, Facebook изменил свой дизайн страницы входа. Используйте эту демонстрационную страницу http://demo.guru99.com/test/facebook.html для тестирования. Проверьте текстовое поле «Электронная почта или телефон» с помощью Firebug и запишите его идентификатор. В этом случае идентификатором является «электронная почта».

Шаг 2. Запустите Selenium IDE и введите «id = email» в поле «Цель». Нажмите кнопку «Найти» и обратите внимание, что текстовое поле «Электронная почта или телефон» выделяется желтым цветом и окаймляется зеленым, что означает, что Selenium IDE смогла правильно найти этот элемент.

Расположение по имени

Поиск элементов по имени очень похож на поиск по идентификатору, за исключением того, что вместо этого мы используем префикс «name =» .

Целевой формат: имя = название элемента

В следующей демонстрации мы теперь будем использовать Mercury Tours, потому что все значимые элементы имеют имена.

Шаг 1. Перейдите на http://demo.guru99.com/test/newtours/ и используйте Firebug для проверки текстового поля «Имя пользователя». Обратите внимание на его имя атрибута.

Здесь мы видим, что имя элемента — «userName».

Шаг 2. В Selenium IDE введите «name = userName» в поле «Цель» и нажмите кнопку «Найти». Selenium IDE должен иметь возможность найти текстовое поле «Имя пользователя», выделив его.

Поиск по имени с использованием фильтров

Фильтры могут использоваться, когда несколько элементов имеют одинаковые имена. Фильтры — это дополнительные атрибуты, используемые для различения элементов с одинаковыми именами.

Целевой формат : name = name_of_the_element filter = value_of_filter

Давайте посмотрим на пример —

Шаг 1 . Войдите в Mercury Tours, используя «учебник» в качестве имени пользователя и пароля. Он должен перейти на страницу поиска полетов, показанную ниже.

Шаг 2. Используя Firebug, обратите внимание, что переключатели Round Trip и One Way имеют одно и то же имя «tripType». Однако они имеют разные атрибуты VALUE, поэтому мы можем использовать каждый из них в качестве нашего фильтра.

Шаг 3.

Сначала мы собираемся получить доступ к переключателю One Way. Нажмите на первую строку в редакторе.
В поле Command Selenium IDE введите команду «щелкнуть».
В поле «Цель» введите «name = tripType value = oneway». Часть «value = oneway» — это наш фильтр.

Шаг 4 . Нажмите кнопку «Найти» и обратите внимание, что Selenium IDE может выделить переключатель «В одну сторону» зеленым цветом, что означает, что мы можем успешно получить доступ к элементу, используя его атрибут VALUE.

Шаг 5. Нажмите клавишу «X» на клавиатуре, чтобы выполнить эту команду щелчка. Обратите внимание, что переключатель One Way стал выбранным.

Вы можете сделать то же самое с переключателем Round Trip, на этот раз, используя «name = tripType value = roundtrip» в качестве цели.

Расположение по тексту ссылки

Этот тип локатора применяется только к текстам гиперссылок. Мы получаем доступ к ссылке, ставя перед нашей целью префикс «link =», а затем следуя тексту гиперссылки.

Целевой формат : link = link_text

В этом примере мы получим доступ к ссылке «РЕГИСТРАЦИЯ» на домашней странице Mercury Tours.

Шаг 1.

Сначала убедитесь, что вы вышли из Mercury Tours.
Перейти на главную страницу Mercury Tours.

Шаг 2 .

Используя Firebug, проверьте ссылку «РЕГИСТРАЦИЯ». Текст ссылки находится между тегами.
В этом случае текст нашей ссылки «РЕГИСТРАЦИЯ». Скопируйте текст ссылки.

Шаг 3 . Скопируйте текст ссылки в Firebug и вставьте его в поле назначения Selenium IDE. Префикс это с «link =».

Шаг 4. Нажмите кнопку «Найти» и обратите внимание, что Selenium IDE удалось правильно выделить ссылку «РЕГИСТРАЦИЯ».

Шаг 5. Для дальнейшей проверки введите «clickAndWait» в поле «Команда» и выполните его. Selenium IDE должна быть в состоянии успешно нажать на эту ссылку REGISTER и перейти на страницу регистрации, показанную ниже.

Локализация с помощью CSS Selector

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

CSS-селекторы имеют много форматов, но мы остановимся только на самых распространенных.

Тег и идентификатор
Тег и класс
Тег и атрибут
Тег, класс и атрибут
Внутренний текст

При использовании этой стратегии мы всегда ставим перед полем Target префикс «css =», как будет показано в следующих примерах.

Поиск по селектору CSS — тег и идентификатор

Опять же, мы будем использовать текстовое поле Email в этом примере. Как вы помните, он имеет идентификатор «email», и мы уже обращались к нему в разделе «Поиск по идентификатору». На этот раз мы будем использовать селектор CSS с идентификатором для доступа к тому же элементу.

Синтаксис	Описание
css = tag # id	tag = HTML-тег элемента, к которому осуществляется доступ # = знак хеша. Это всегда должно присутствовать при использовании селектора CSS с идентификатором id = идентификатор элемента, к которому осуществляется доступ

Имейте в виду, что перед идентификатором всегда стоит знак хеша (#).

Шаг 1. Перейдите на www.facebook.com . Используя Firebug, изучите текстовое поле «Электронная почта или телефон».

На этом этапе обратите внимание, что тег HTML — это «вход», а его идентификатор — «электронная почта». Таким образом, наш синтаксис будет «css = input # email».

Шаг 2. Введите «css = input # email» в поле «Цель» Selenium IDE и нажмите кнопку «Найти». Selenium IDE должна быть в состоянии выделить этот элемент.

Поиск по CSS-селектору — тег и класс

Поиск с помощью CSS-селектора с использованием тега HTML и имени класса аналогичен использованию тега и идентификатора, но в этом случае вместо знака хеша используется точка (.).

Синтаксис	Описание
css = тег . учебный класс	tag = HTML-тег элемента, к которому осуществляется доступ , = точка. Это всегда должно присутствовать при использовании CSS Selector с классом class = класс элемента, к которому осуществляется доступ

Шаг 1. Перейдите на демонстрационную страницу http://demo.guru99.com/test/facebook.html и используйте Firebug для проверки текстового поля «Электронная почта или телефон». Обратите внимание, что его HTML-тег является «input», а его класс — «inputtext».

Шаг 2. В Selenium IDE введите «css = input.inputtext» в поле «Цель» и нажмите «Найти». Selenium IDE должна распознавать текстовое поле «Электронная почта» или «Телефон».

Обратите внимание, что если несколько элементов имеют одинаковый тег и имя HTML, распознается только первый элемент в исходном коде . Используя Firebug, проверьте текстовое поле «Пароль» в Facebook и обратите внимание, что оно имеет то же имя, что и текстовое поле «Электронная почта» или «Телефон».

Причина, по которой на предыдущем рисунке было выделено только текстовое поле «Электронная почта» или «Телефон», заключается в том, что оно стоит первым в источнике страницы Facebook.

Поиск по селектору CSS — тег и атрибут

Эта стратегия использует тег HTML и определенный атрибут элемента, к которому осуществляется доступ.

Синтаксис	Описание
css = tag [ attribute = value ]	tag = HTML-тег элемента, к которому осуществляется доступ [и] = квадратные скобки, в которые будет помещен конкретный атрибут и соответствующее ему значение атрибут = атрибут, который будет использоваться. Рекомендуется использовать атрибут, уникальный для элемента, такой как имя или идентификатор. значение = соответствующее значение выбранного атрибута.

Шаг 1. Перейдите на страницу регистрации Mercury Tours ( http://demo.guru99.com/test/newtours/register.php ) и проверьте текстовое поле «Фамилия». Обратите внимание на его HTML-тег (в данном случае «input») и его имя («lastName»).

Шаг 2. В Selenium IDE введите «css = input [name = lastName]» в поле «Цель» и нажмите «Найти». Selenium IDE должен иметь возможность успешного доступа к полю Фамилия.

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

Поиск с помощью CSS-селектора — тег, класс и атрибут

Синтаксис	Описание
css = tag.class [ attribute = value ]	tag = HTML-тег элемента, к которому осуществляется доступ , = точка. Это всегда должно присутствовать при использовании CSS Selector с классом class = класс элемента, к которому осуществляется доступ [и] = квадратные скобки, в которые будет помещен конкретный атрибут и соответствующее ему значение атрибут = атрибут, который будет использоваться. Рекомендуется использовать атрибут, уникальный для элемента, такой как имя или идентификатор. значение = соответствующее значение выбранного атрибута.

Шаг 1. Перейдите на демонстрационную страницу http://demo.guru99.com/test/facebook.html и используйте Firebug для проверки полей ввода «Электронная почта или телефон» и «Пароль». Обратите внимание на их HTML-тег, класс и атрибуты. Для этого примера мы выберем их атрибуты tabindex.

Шаг 2. Сначала мы получим доступ к текстовому полю «Электронная почта или телефон». Таким образом, мы будем использовать значение tabindex, равное 1. Введите «css = input.inputtext [tabindex = 1]» в поле «Цель» в Selenium IDE и нажмите «Найти». Поле ввода «Электронная почта или телефон» должно быть выделено.

Шаг 3. Чтобы открыть окно ввода пароля, просто замените значение атрибута tabindex. Введите «css = input.inputtext [tabindex = 2]» в поле «Цель» и нажмите кнопку «Найти». Selenium IDE должен успешно идентифицировать текстовое поле «Пароль».

Локализация с помощью CSS Selector — внутренний текст

Как вы могли заметить, HTML-меткам редко присваиваются атрибуты id, name или class. Итак, как нам получить к ним доступ? Ответ заключается в использовании их внутренних текстов. Внутренние тексты — это фактические строковые шаблоны, которые метка HTML показывает на странице.

Синтаксис	Описание
css = tag : содержит (« внутренний текст »)	tag = HTML-тег элемента, к которому осуществляется доступ внутренний текст = внутренний текст элемента

Шаг 1. Перейдите на домашнюю страницу Mercury Tours ( http://demo.guru99.com/test/newtours/ ) и используйте Firebug, чтобы найти ярлык «Пароль». Обратите внимание на его HTML-тег (в данном случае это «шрифт») и обратите внимание, что у него нет атрибутов class, id или name.

Шаг 2. Введите css = font: Содержит («Пароль:») в поле «Цель » в Selenium IDE и нажмите «Найти». Selenium IDE должен иметь доступ к метке пароля, как показано на рисунке ниже.

Шаг 3. На этот раз замените внутренний текст на «Бостон», чтобы ваша цель теперь стала «css = font: Содержит (« Бостон »)». Нажмите Найти. Вы должны заметить, что метка «Бостон в Сан-Франциско» становится выделенной. Это показывает, что Selenium IDE может получить доступ к длинной метке, даже если вы только что указали первое слово ее внутреннего текста.

Поиск по DOM (объектная модель документа)

Простая модель Document Object Model (DOM) — это способ структурирования элементов HTML. Selenium IDE может использовать DOM для доступа к элементам страницы. Если мы используем этот метод, наше поле назначения всегда будет начинаться с «dom = document …»; однако префикс «dom =» обычно удаляется, потому что Selenium IDE в любом случае может автоматически интерпретировать все, что начинается с ключевого слова «документ», как путь в DOM.

Есть четыре основных способа найти элемент через DOM:

getElementById
getElementsByName
dom: name (применяется только к элементам в именованной форме)
дом: индекс

Поиск по DOM — getElementById

Давайте сосредоточимся на первом методе — используя метод getElementById. Синтаксис будет:

Синтаксис	Описание
document.getElementById (» идентификатор элемента «)	id элемента = это значение атрибута ID элемента, к которому осуществляется доступ. Это значение всегда должно быть заключено в пару круглых скобок («»).

Шаг 1. Используйте эту демонстрационную страницу http://demo.guru99.com/test/facebook.html Перейдите к ней и используйте Firebug для проверки флажка «Оставить меня в системе». Запишите его идентификатор.

Мы можем видеть, что идентификатор, который мы должны использовать, это «persist_box».

Шаг 2. Откройте Selenium IDE и в поле «Цель» введите «document.getElementById (« persist_box »)» и нажмите «Найти». В Selenium IDE должна быть возможность установить флажок «Запомнить меня». Хотя он не может выделить внутреннюю часть флажка, Selenium IDE все еще может окружать элемент ярко-зеленой рамкой, как показано ниже.

Поиск по DOM — getElementsByName

Метод getElementById может одновременно обращаться только к одному элементу, и это элемент с указанным идентификатором. Метод getElementsByName отличается. Он собирает массив элементов с именем, которое вы указали. Вы получаете доступ к отдельным элементам, используя индекс, который начинается с 0.

getElementById

Он получит только один элемент для вас.
Этот элемент имеет идентификатор, который вы указали в скобках getElementById ().

getElementsByName

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

Синтаксис	Описание
document.getElementsByName (» name «) [ index ]	name = имя элемента, как определено его атрибутом ‘name’ index = целое число, которое указывает, какой элемент в массиве getElementsByName будет использоваться.

Шаг 1. Перейдите на домашнюю страницу Mercury Tours и войдите, используя «tutorial» в качестве имени пользователя и пароля. Firefox должен привести вас к экрану Flight Finder.

Шаг 2. Используя Firebug, осмотрите три переключателя в нижней части страницы (переключатели эконом-класса, бизнес-класса и первого класса). Обратите внимание, что все они имеют одно и то же имя, которое является «servClass».

Шаг 3. Сначала давайте перейдем к переключателю «Эконом-класс». Из всех этих трех переключателей этот элемент стоит первым, поэтому его индекс равен 0. В IDE Selenium введите «document.getElementsByName (« servClass ») [0]» и нажмите кнопку «Найти». Selenium IDE должна быть в состоянии правильно определить радио-кнопку Эконом класса.

Шаг 4. Измените порядковый номер на 1, чтобы ваша цель теперь стала document.getElementsByName («servClass») [1]. Нажмите кнопку «Найти», и Selenium IDE сможет выделить переключатель «Бизнес-класс», как показано ниже.

Расположение по DOM — DOM: имя

Как упоминалось ранее, этот метод будет применяться, только если элемент, к которому вы обращаетесь, содержится в именованной форме.

Синтаксис	Описание
document.forms [» имя формы «] .elements [» имя элемента «]	имя формы = значение атрибута имени тега формы, содержащего элемент, к которому вы хотите получить доступ имя элемента = значение атрибута имени элемента, к которому вы хотите получить доступ

Шаг 1. Перейдите на домашнюю страницу Mercury Tours ( http://demo.guru99.com/test/newtours/ ) и используйте Firebug для проверки текстового поля «Имя пользователя». Обратите внимание, что он содержится в форме под названием «дом».

Шаг 2. В Selenium IDE введите «document.forms [» home «]. Elements [» userName «]» и нажмите кнопку «Найти». Selenium IDE должен иметь возможность успешного доступа к элементу.

Поиск по DOM — dom: index

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

Синтаксис	Описание
document.forms [ указатель формы ] .elements [ указатель элемента ]	индекс формы = номер индекса (начиная с 0) формы по всей странице индекс элемента = номер индекса (начиная с 0) элемента относительно всей формы, в которой он находится

Мы получим доступ к текстовому полю «Телефон» на странице регистрации Mercury Tours. Форма на этой странице не имеет имени и атрибута ID, поэтому это хороший пример.

Шаг 1. Перейдите на страницу регистрации Mercury Tours и проверьте текстовое поле Телефон. Обратите внимание, что форма, содержащая ее, не имеет атрибутов ID и имени.

Шаг 2. Введите «document.forms [0] .elements [3]» в поле «Цель» в Selenium IDE и нажмите кнопку «Найти». Selenium IDE должен иметь возможность правильно обращаться к текстовому полю телефона.

Шаг 3. В качестве альтернативы, вы можете использовать имя элемента вместо его индекса и получить тот же результат. Введите «document.forms [0] .elements [» phone «]» в поле Цель Selenium IDE. Текстовое поле Телефон все равно должно стать выделенным.

Поиск по XPath

XPath — это язык, используемый при поиске узлов XML (Extensible Markup Language). Поскольку HTML можно рассматривать как реализацию XML, мы также можем использовать XPath для определения местоположения элементов HTML.

Преимущество: он может получить доступ практически к любому элементу, даже к элементам без атрибутов class, name или id.

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

К счастью, Firebug может автоматически генерировать локаторы XPath. В следующем примере мы получим доступ к изображению, к которому невозможно получить доступ с помощью методов, которые мы обсуждали ранее.

Шаг 1. Перейдите на домашнюю страницу Mercury Tours и используйте Firebug, чтобы осмотреть оранжевый прямоугольник справа от желтого поля «Ссылки». Обратитесь к изображению ниже.

Шаг 2 . Щелкните правой кнопкой мыши HTML-код элемента и выберите «Копировать XPath».

Шаг 3. В Selenium IDE введите одну косую черту «/» в поле «Цель», затем вставьте XPath, который мы скопировали на предыдущем шаге. Запись в поле «Цель» должна начинаться с двух косых черт «//».

Шаг 4 . Нажмите на кнопку Найти. Selenium IDE должна выделять оранжевую рамку, как показано ниже.

Резюме

Синтаксис для использования локатора

метод	Целевой синтаксис	пример
По идентификатору	id = id_of_the_element	ID = электронная почта
По имени	name = name_of_the_element	имя = имя_пользователя
По имени, используя фильтры	name = name_of_the_element filter = value_of_filter	name = tripType value = oneway
По тексту ссылки	link = link_text	ссылка = ЗАРЕГИСТРИРОВАТЬСЯ
Тег и идентификатор	css = tag # id	CSS = вход # электронная почта
Тег и класс	css = тег . учебный класс	CSS = input.inputtext
Тег и атрибут	css = tag [ attribute = value ]	CSS = вход [имя = LastName]
Тег, класс и атрибут	css = тег . класс [ атрибут = значение ]	CSS = input.inputtext [TabIndex = 1]