Локаторы в Selenium

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

Locator — это команда, которая сообщает Selenium IDE, какие элементы графического интерфейса (скажем, Text Box, Кнопки, Проверка Boxes и т. д.), над которыми нужно работать. Определение правильных элементов графического интерфейса является обязательным условием для создания сценария автоматизации. Но точная идентификация элементов графического интерфейса сложнее, чем кажется. Иногда вам приходится работать с неправильными элементами графического интерфейса или вообще не иметь элементов! Следовательно, Selenium предоставляет несколько локаторов для точного обнаружения элемента графического интерфейса.

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

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

Поиск по идентификатору

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

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

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

Шаг 1) С момента создания этого руководства Facebook изменил дизайн страницы входа в систему. Используйте эту демонстрационную страницу http://demo.guru99.com/test/facebook.html для тестирования. Осмотрите букву «Е».mail или Телефон» текст box используя Firebug и запишите его идентификатор. В данном случае идентификатор — «email".

Поиск по идентификатору

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

Поиск по идентификатору

Поиск по имени

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

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

В следующемwing Для демонстрации мы теперь будем использовать Mercury Tours, поскольку все важные элементы имеют имена.

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

Поиск по имени

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

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

Поиск по имени

Как найти элемент по имени с помощью фильтров

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

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

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

Шаг 1) Войдите в Mercury Tours.

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

Найдите элемент по имени, используя фильтры

Шаг 2) При использовании firebug используйте атрибуты VALUE.

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

Найдите элемент по имени, используя фильтры

Шаг 3) Нажмите на первую строку.

  • Сначала мы собираемся получить доступ к переключателю One Way. Щелкните первую строку в редакторе.
  • В команде box Selenium IDE введите команду «click».
  • В цели box, введите «name=tripType value=oneway». Часть «value=oneway» — это наш фильтр.

Найдите элемент по имени, используя фильтры

Шаг 4) Щелкните кнопку "Найти".

Обратите внимание, что Selenium IDE может выделить переключатель One Way зеленым цветом — это означает, что мы можем успешно получить доступ к элементу, используя его атрибут VALUE.

Найдите элемент по имени, используя фильтры

Шаг 5) Выберите переключатель «Односторонний».

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

Найдите элемент по имени, используя фильтры

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

Поиск по тексту ссылки

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

Целевой формат: ссылка=текст_ссылки

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

Шаг 1)

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

Шаг 2)

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

Поиск по тексту ссылки

Шаг 3) Скопируйте текст ссылки в Firebug и вставьте его в цель Selenium IDE. box. Приставьте к нему префикс «link=".

Поиск по тексту ссылки

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

Поиск по тексту ссылки

Шаг 5) Для дальнейшей проверки введите «clickAndWait» в команду. box и выполнить его. Selenium IDE сможет успешно щелкнуть ссылку РЕГИСТРАЦИЯ и перенаправить вас на страницу регистрации, показанную ниже.

Поиск по тексту ссылки

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

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

Существует четыре основных способа найти элемент через DOM в Selenium:

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

Поиск по DOM – getElementById

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

Синтаксис

document.getElementById("id of the element")

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

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

Поиск по DOM – getElementById

Мы видим, что идентификатор, который нам следует использовать, — «persist_».box».

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

Поиск по DOM – getElementById

Поиск по DOM – getElementsByName

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

Поиск по DOM – getElementsByName

getElementById

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

Поиск по DOM – getElementsByName

getElementsByName

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

Синтаксис

document.getElementsByName(“name“)[index]

  • name = имя элемента, определенное его атрибутом name.
  • index = целое число, указывающее, какой элемент массива getElementsByName будет использоваться.

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

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

Поиск по DOM – getElementsByName

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

Поиск по DOM – getElementsByName

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

Поиск по DOM – getElementsByName

Поиск по DOM – dom:name

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

Синтаксис

document.forms[“name of the form“].elements[“name of the element“]

  • имя формы = значение атрибута name тега формы, содержащего элемент, к которому вы хотите получить доступ.
  • имя элемента = значение атрибута имени элемента, к которому вы хотите получить доступ.

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

Поиск по DOM – dom:name

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

Поиск по DOM – dom:name

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

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

Синтаксис

document.forms[index of the form].elements[index of the element]

  • индекс формы = номер индекса (начиная с 0) формы по отношению ко всей странице.
  • индекс элемента = порядковый номер (начиная с 0) элемента относительно всей формы, которая его содержит.

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

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

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

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

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

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

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

Поиск по XPath

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

  • Преимущество: Он может получить доступ практически к любому элементу, даже к тем, у которых нет атрибутов class, name или id.
  • Недостаток: Это самый сложный метод идентификации элементов из-за слишком большого количества различных правил и соображений.

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

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

Поиск по XPath

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

Поиск по XPath

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

Поиск по XPath

Шаг 4) Нажмите кнопку «Найти». Selenium IDE должна иметь возможность выделять оранжевый цвет box как показано ниже.

Поиск по XPath

Итоги

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

Способ доставки Целевой синтаксис Пример
По ID id= id_of_the_element идентификатор = еmail
По имени name=name_of_the_element name=Имя пользователя
По имени с использованием фильтров name=name_of_the_element filter=value_of_filter name=tripType value=в одну сторону
По тексту ссылки ссылка=link_text ссылка=РЕГИСТРАЦИЯ