Локаторы в Selenium IDE: CSS Selector - ДОМ - XPath - Я БЫ

Содержание:

Anonim

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

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

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

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

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

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

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

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

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

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

Шаг 2. Запустите Selenium IDE и введите id = email в поле Target. Нажмите кнопку «Найти» и обратите внимание, что текстовое поле «Электронная почта или телефон» выделено желтым и обведено зеленым, что означает, что 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, обратите внимание, что переключатели «Туда и обратно» и «В одну сторону» имеют одинаковое имя «tripType». Однако у них разные атрибуты VALUE, поэтому мы можем использовать каждый из них в качестве фильтра.

Шаг 3.

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

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

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

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

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

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

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

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

Шаг 1.

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

Шаг 2 .

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

Шаг 3 . Скопируйте текст ссылки в Firebug и вставьте его в поле Target Selenium IDE. Добавьте к нему префикс "link =".

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

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

Поиск с помощью селектора CSS

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

Селекторы CSS в Selenium имеют множество форматов, но мы остановимся только на наиболее распространенных.

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

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

Поиск с помощью селектора CSS - тег и идентификатор

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

Синтаксис

Описание

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

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

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

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

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

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

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

Синтаксис

Описание

css = тег. учебный класс
  • tag = HTML-тег элемента, к которому осуществляется доступ
  • . = знак точки. Это всегда должно присутствовать при использовании селектора CSS с классом
  • 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 = HTML-тег элемента, к которому осуществляется доступ
  • [и] = квадратные скобки, в которые будет помещен конкретный атрибут и соответствующее ему значение.
  • attribute = атрибут, который будет использоваться. Желательно использовать атрибут, уникальный для элемента, например имя или идентификатор.
  • value = соответствующее значение выбранного атрибута.

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

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

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

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

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

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

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

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

Поиск с помощью селектора CSS - внутренний текст

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

Синтаксис

Описание

css = tag: contains ("внутренний текст")
  • tag = HTML-тег элемента, к которому осуществляется доступ
  • внутренний текст = внутренний текст элемента

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

Шаг 2. Введите css = font: contains ("Password:") в поле "Target" Selenium IDE и нажмите "Найти". Selenium IDE должна иметь доступ к метке пароля, как показано на изображении ниже.

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

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

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

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

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

Поиск по DOM - getElementById

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

Синтаксис

Описание

document.getElementById («идентификатор элемента»)

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

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

Мы видим, что нам следует использовать идентификатор «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 = имя элемента, как определено его атрибутом name
  • index = целое число, указывающее, какой элемент в массиве getElementsByName будет использоваться.

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

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

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

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

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

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

Синтаксис

Описание

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

Шаг 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) формы по отношению ко всей странице
  • index элемента = номер индекса (начиная с 0) элемента по отношению ко всей форме, которая его содержит

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

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

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

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

Поиск с помощью XPath

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

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

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

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

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

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

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

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

Резюме

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

Методика

Целевой синтаксис

Пример
По ID id = id_of_the_element id = электронная почта
По имени name = name_of_the_element name = userName
По имени с использованием фильтров name = name_of_the_element filter = value_of_filter name = tripType value = oneway
По тексту ссылки ссылка = текст_ссылки ссылка = РЕГИСТРАЦИЯ
Тег и идентификатор css = тег # идентификатор css = input # адрес электронной почты
Тег и класс css = тег. учебный класс css = input.inputtext
Тег и атрибут css = тег [атрибут = значение] css = input [имя = lastName]
Тег, класс и атрибут css = тег. класс [атрибут = значение] css = input.inputtext [tabindex = 1]