Dim синтаксис vba

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

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

Существуют команды. Которые не нуждаются в локаторе (например. Команда Однако большинству из них действительно нужны локаторы элементов в Selenium webdriver.

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

Определение местоположения по идентификатору

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

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

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

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

 

Шаг 2. Запустите Selenium IDE и введите Нажмите кнопку

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

Размещение элементов по имени очень похоже на размещение по идентификатору. За исключением того. Что мы используем

вместо этого префикс

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

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

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

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

Шаг 2. В Selenium IDE введите Selenium IDE должна иметь возможность найти текстовое поле Имя пользователя. Выделив его.

Поиск по имени с помощью фильтров

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

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

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

Шаг 1. Войдите в Mercury Tours. Используя Он должен привести вас на страницу поиска рейсов. Показанную ниже.

Шаг 2. Используя Firebug, обратите внимание. Что переключатели Round Trip и One Way имеют одно и то же имя Однако они имеют разные атрибуты ЦЕННОСТИ. Поэтому мы можем использовать каждый из них в качестве фильтра.

Шаг 3.

  • Сначала мы собираемся получить доступ к переключателю One Way. Нажмите на первую строку редактора.
  • В командном поле Selenium IDE введите команду
  • В поле Цель введите Часть

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

Шаг 5. Нажмите клавишу Обратите внимание. Что переключатель One Way стал выбран.

Вы можете сделать то же самое с переключателем

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

Этот тип CSS-локатора в Selenium применяется только к текстам гиперссылок.

Мы получаем доступ к ссылке. Добавляя к нашей цели префикс

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

В этом примере мы перейдем по ссылке

Шаг 1.

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

Шаг 2.

  • Используя Firebug. Проверьте ссылку Текст ссылки находится между тегами и.
  • В этом случае наш текст ссылки — Скопируйте текст ссылки.

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

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

Шаг 5. Для дальнейшей проверки введите Selenium IDE должен быть в состоянии нажать на эту ссылку РЕГИСТРАЦИИ успешно и принять вас на страницу регистрации. Показанную ниже.

Поиск по селектору CSS

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

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

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

При использовании этой стратегии мы всегда ставим перед целевым полем префикс

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

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

Синтаксис

Описание

css=tag#id

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

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

Шаг 1. Перейдите к www.facebook.com. Используя Firebug. Проверьте текстовое поле

На этом этапе обратите внимание. Что HTML-тег является Таким образом. Наш синтаксис будет выглядеть так:

Шаг 2. Введите Selenium IDE должна быть в состоянии выделить этот элемент.

 

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

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

Синтаксис

Описание

css=tag.class

  • tag = HTML-тег элемента. К которому осуществляется доступ
  • . = знак точки. Это всегда должно присутствовать при использовании селектора CSS с классом
  • class = класс элемента. К которому осуществляется доступ.

 

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

Шаг 2. В Selenium IDE введите Selenium IDE должна уметь распознавать текстовое поле электронной почты или телефона.

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

Причина, по которой на предыдущем рисунке было выделено только текстовое поле электронной почты или телефона. Заключается в том. Что оно стоит на первом месте в источнике страницы Facebook.

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

Эта стратегия использует HTML-тег и определенный атрибут элемента. К которому должен быть получен доступ.

Синтаксис

Описание

css=тег[атрибут=значение]

  • tag = HTML-тег элемента. К которому осуществляется доступ
  • [ and ] = квадратные скобки. В которые будет помещен конкретный атрибут и соответствующее ему значение
  • атрибут = используемый атрибут. Желательно использовать атрибут. Уникальный для элемента. Например имя или идентификатор.
  • value = соответствующее значение выбранного атрибута.

 

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

Шаг 2. В Selenium IDE введите Selenium IDE должна иметь возможность успешно получить доступ к окну Last Name.

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

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

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

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

Шаг 2. Сначала мы получим доступ к текстовому окну Таким образом. Мы будем использовать значение tabindex равное 1. Введите Поле ввода

Шаг 3. Чтобы получить доступ к окну ввода пароля. Просто замените значение атрибута tabindex. Введите Selenium IDE должна быть в состоянии успешно идентифицировать текстовое поле пароля.

Поиск по CSS селектору — внутренний текст

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

Синтаксис

Описание

css=tag:contains(внутренний текст

  • tag = HTML-тег элемента. К которому осуществляется доступ
  • внутренний текст = внутренний текст элемента

 

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

Шаг 2. Введите css=font:contains( в целевое поле Selenium IDE и нажмите кнопку Найти. Selenium IDE должна иметь возможность получить доступ к метке пароля. Как показано на рисунке ниже.

Шаг 3. На этот раз замените внутренний текст на Нажмите кнопку Найти. Вы должны заметить, что надпись Это показывает. Что Selenium IDE может получить доступ к длинной метке. Даже если вы просто указали первое слово ее внутреннего текста.

Локализация по DOM (Объектная модель документа)

Проще говоря. Объектная модель документа (DOM) — это способ структурирования HTML-элементов. Selenium IDE может использовать DOM для доступа к элементам страницы. Если мы используем этот метод. Наше целевое поле всегда будет начинаться с

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

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

Поиск по DOM — getElementById

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

Синтаксис

Описание

document.getElementById(id элемента

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

 

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

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

Шаг 2. Откройте Selenium IDE и в целевом поле введите Selenium IDE должна быть в состоянии найти флажок Хотя он не может выделить внутреннюю часть флажка. Selenium IDE все равно может окружить элемент ярко-зеленой рамкой. Как показано ниже.

Размещение по DOM — getElementsByName

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

 

getElementById

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

getElementsByName

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

 

Синтаксис

Описание

document.getElementsByName(имяиндекс]

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

 

Шаг 1. Перейдите на главную страницу Mercury Tours и войдите в систему. Используя Firefox должен вывести вас на экран поиска рейсов.

Шаг 2. С помощью Firebug проверьте три переключателя в нижней части страницы (переключатели эконом-класса. Бизнес-класса и первого класса). Обратите внимание. Что все они имеют одно и то же имя. Которое является

Шаг 3. Сначала давайте перейдем к переключателю Из всех этих трех переключателей этот элемент идет первым. Поэтому он имеет индекс 0. В Selenium IDE введите Selenium IDE должна быть в состоянии правильно идентифицировать переключатель эконом-класса.

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

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

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

Синтаксис

Описание

document.forms[имя формыимя элемента

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

 

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

Шаг 2. В Selenium IDE введитеSelenium IDE должна иметь возможность успешно получить доступ к элементу.

Размещение по DOM — dom:index

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

Синтаксис

Описание

document.forms[индекс формы].elements[индекс элемента]

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

 

Мы получим доступ к текстовому окну Форма на этой странице не имеет атрибута name и ID. Так что это будет хорошим примером.

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

Шаг 2. Введите Selenium IDE должна иметь правильный доступ к текстовому полю телефона.

Шаг 3. В качестве альтернативы вы можете использовать имя элемента вместо его индекса и получить тот же результат. ВведитеТекстовое поле телефона по-прежнему должно быть выделено.

Поиск по XPath

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

        Преимущество: Он может получить доступ практически к любому элементу. Даже к элементам без атрибутов класса. Имени или идентификатора.

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

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

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

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

Шаг 3. В Selenium IDE введите одну косую черту Теперь запись в вашем целевом поле должна начинаться с двух косых черт

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

Краткие сведения

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

Метод

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

Пример

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