Локаторы в Selenium

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

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

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

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

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

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

Target Формат: id=id элемента

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

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

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

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

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

Target Формат: name=имя элемента

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

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

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

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

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

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

Target Формат: name=name_of_the_element filter=value_of_filter

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

Шаг 1) Войти на Mercury Туры.

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

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

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

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

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

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

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

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

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

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

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

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

Target Формат: ссылка=текст_ссылки

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

Шаг 1)

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

Шаг 2)

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

Шаг 3) Скопируйте текст ссылки в Firebug и вставьте его в Selenium Иды Target box. Добавьте к нему префикс «link=».

Шаг 4) Нажмите кнопку «Найти» и обратите внимание, что Selenium IDE смогла правильно выделить ссылку REGISTER.

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

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

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

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

Шаг 2) Откройте Selenium IDE и в Target введите «document.getElementById(“persist_box”)» и нажмите «Найти». Selenium IDE должна уметь находить флажок «Keep me logined». Хотя он не может выделить внутреннюю часть флажка, 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. В Selenium IDE, введите «document.getElementsByName(»servClass»)[0]» и нажмите кнопку «Найти». Selenium IDE должна иметь возможность правильно идентифицировать переключатель Эконом-класса.

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

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

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

Синтаксис

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

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

Поиск по XPath

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

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

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

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

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

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

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