Локатори в IDE селену: CSS Selector - DOM - XPath - Посвідчення особи

Зміст:

Anonim

Що таке локатори?

Locator - це команда, яка повідомляє Selenium IDE, які елементи графічного інтерфейсу (скажімо, текстове поле, кнопки, прапорці тощо), які йому потрібні для роботи. Визначення правильних елементів графічного інтерфейсу є обов'язковою умовою для створення сценарію автоматизації. Але точна ідентифікація елементів графічного інтерфейсу складніша, ніж здається. Іноді ви в кінцевому підсумку працюєте з неправильними елементами графічного інтерфейсу або взагалі відсутні! Отже, Selenium надає ряд локаторів для точного пошуку елемента графічного інтерфейсу

Різні типи CSS Locator в Selenium IDE

Є команди, які не потребують локатора (наприклад, команда "відкрити"). Однак більшості з них потрібні локатори елементів у веб-драйвері Selenium.

Вибір локатора значною мірою залежить від вашої заявки, що перевіряється . У цьому посібнику ми переключатимемось між Facebook, новими tours.demoaut на основі локаторів, які підтримують ці програми. Так само у своєму проекті тестування ви виберете будь-який із перерахованих вище локаторів елементів у веб-драйвері Selenium на основі підтримки вашої програми.

Пошук за ідентифікатором

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

Цільовий формат: 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 для перевірки текстового поля "Ім'я користувача". Візьміть до відома його атрибут назви.

Тут ми бачимо, що ім’я елемента - „ім’я користувача”.

Крок 2. У IDE селену введіть "name = userName" у полі Target та натисніть кнопку Find. Селен IDE повинен мати можливість знаходити текстове поле Ім'я користувача, виділяючи його.

Пошук за іменем за допомогою фільтрів

Фільтри можна використовувати, коли кілька елементів мають однакову назву. Фільтри - це додаткові атрибути, що використовуються для розрізнення елементів з однаковою назвою.

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

Подивимось приклад -

Крок 1 . Увійдіть в Mercury Tours, використовуючи "навчальний посібник" як ім'я користувача та пароль. Ви повинні перейти на сторінку Flight Finder, показану нижче.

Крок 2. Використовуючи Firebug, зверніть увагу, що перемикачі Round Trip та One Way мають однакову назву "tripType". Однак вони мають різні атрибути VALUE, тому ми можемо використовувати кожен із них як наш фільтр.

Крок 3.

  • Спочатку ми отримаємо доступ до перемикача One Way. Клацніть перший рядок у редакторі.
  • У поле Команда Selenium IDE введіть команду "клацніть".
  • У полі Target введіть "name = tripType value = oneway". Частина "value = oneway" - це наш фільтр.

Крок 4 . Натисніть кнопку Знайти і зауважте, що Selenium IDE може виділити зелений перемикач «Одностороння» - це означає, що ми можемо отримати доступ до елемента успішно, використовуючи його атрибут VALUE.

Крок 5. Натисніть клавішу "X" на клавіатурі, щоб виконати цю команду клацання. Зверніть увагу, що вибрано перемикач One Way.

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

Пошук за текстом посилання

Цей тип CSS-локатора в Selenium застосовується лише до текстів гіперпосилань. Ми отримуємо доступ до посилання, ставлячи перед ціллю префікс "link =", а потім текст гіперпосилання.

Цільовий формат : link = link_text

У цьому прикладі ми отримаємо доступ до посилання "РЕЄСТРАЦІЯ" на домашній сторінці Mercury Tours.

Крок 1.

  • Спочатку переконайтеся, що ви вийшли з Mercury Tours.
  • Перейдіть на домашню сторінку Mercury Tours.

Крок 2 .

  • За допомогою Firebug перегляньте посилання "РЕЄСТРУЙСЯ". Текст посилання знаходиться між тегами та.
  • У цьому випадку текст нашого посилання - "РЕЄСТРУЙСЯ". Скопіюйте текст посилання.

Крок 3 . Скопіюйте текст посилання у Firebug та вставте його у поле Target ID селену. Поставте перед ним префікс "link =".

Крок 4. Натисніть кнопку Знайти і зауважте, що Selenium IDE зміг правильно виділити посилання REGISTER.

Крок 5. Для подальшої перевірки введіть "clickAndWait" у поле Команда та виконайте його. Селен IDE повинен мати можливість успішно натиснути на це посилання РЕЄСТРАЦІЯ та перейти на сторінку реєстрації, показану нижче.

Пошук за допомогою селектора CSS

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

Селектори CSS у Selenium мають багато форматів, але ми зупинимось лише на найбільш поширених.

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

При використанні цієї стратегії ми завжди додаємо до поля Target префікс "css =", як буде показано в наступних прикладах.

Пошук за допомогою селектора CSS - тегу та ідентифікатора

Знову ж таки, ми використовуватимемо текстове поле Facebook у цьому прикладі. Як ви пам'ятаєте, у нього є ідентифікатор "електронна пошта", і ми вже отримали до нього доступ у розділі "Пошук за ідентифікатором". Цього разу ми будемо використовувати Selenium CSS Selector з ідентифікатором для доступу до того самого елемента.

Синтаксис

Опис

css = тег # ідентифікатор
  • tag = HTML-тег елемента, до якого здійснюється доступ
  • # = знак хешу. Це має бути завжди при використанні Selenium CSS Selector з ідентифікатором
  • id = ідентифікатор елемента, до якого здійснюється доступ

Майте на увазі, що перед ідентифікатором завжди стоїть знак хешу (#).

Крок 1. Перейдіть на www.facebook.com. За допомогою Firebug перевірте текстове поле "Електронна пошта або телефон".

На цьому етапі зверніть увагу, що тег HTML є "вхідним", а його ідентифікатор - "електронною поштою". Тож наш синтаксис буде "css = input # email".

Крок 2. Введіть "css = input # email" у поле Target у IDE Selenium та натисніть кнопку "Знайти". Селен IDE повинен мати можливість виділити цей елемент.

Пошук за допомогою селектора CSS - тегу та класу

Розташування за допомогою CSS Selector у Selenium за допомогою тегу HTML та імені класу подібне до використання тегу та ідентифікатора, але в цьому випадку замість символу хешу використовується крапка (.).

Синтаксис

Опис

css = тег. клас
  • tag = HTML-тег елемента, до якого здійснюється доступ
  • . = крапковий знак. Це має бути завжди при використанні селектора CSS з класом
  • class = клас елемента, до якого здійснюється доступ

Крок 1. Перейдіть на демонстраційну сторінку http://demo.guru99.com/test/facebook.html і використовуйте Firebug для перевірки текстового поля "Електронна пошта або телефон". Зверніть увагу, що його тег HTML - "input", а його клас - "inputtext".

Крок 2. У IDE селену введіть "css = input.inputtext" у полі Ціль і натисніть Знайти. Селен IDE повинен мати можливість розпізнавати текстове поле електронної пошти або телефону.

Зверніть увагу, що коли кілька елементів мають однаковий тег HTML і ім’я, буде розпізнано лише перший елемент у вихідному коді . За допомогою Firebug перевірте текстове поле Пароль у Facebook і зауважте, що воно має те саме ім’я, що і текстове поле Електронна пошта або Телефон.

Причиною того, чому на попередній ілюстрації було виділено лише текстове поле Електронна пошта чи Телефон, є те, що воно першим у джерелі сторінки Facebook.

Пошук за допомогою селектора CSS - тег та атрибут

Ця стратегія використовує тег HTML та певний атрибут елемента, до якого потрібно отримати доступ.

Синтаксис

Опис

css = тег [атрибут = значення]
  • tag = HTML-тег елемента, до якого здійснюється доступ
  • [і] = квадратні дужки, в яких буде розміщено певний атрибут та відповідне йому значення
  • attribute = атрибут, який буде використовуватися. Доцільно використовувати атрибут, унікальний для елемента, такий як ім’я чи ідентифікатор.
  • значення = відповідне значення обраного атрибута.

Крок 1. Перейдіть на сторінку реєстрації Mercury Tours (http://demo.guru99.com/test/newtours/register.php) та перевірте текстове поле "Прізвище". Візьміть на замітку його тег HTML ("вхід" у цьому випадку) та його ім'я ("прізвище").

Крок 2. У IDE Selenium введіть "css = input [name = lastName]" у полі Target та натисніть Find. Селен IDE повинен мати можливість успішно отримати доступ до поля Прізвище.

Коли кілька елементів мають однаковий HTML-тег та атрибут, буде розпізнано лише перший . Ця поведінка схожа на пошук елементів за допомогою селекторів CSS з однаковим тегом і класом.

Пошук за допомогою селектора CSS - тегу, класу та атрибута

Синтаксис Опис
css = tag.class [атрибут = значення]
  • tag = HTML-тег елемента, до якого здійснюється доступ
  • . = крапковий знак. Це має бути завжди при використанні селектора CSS з класом
  • class = клас елемента, до якого здійснюється доступ
  • [і] = квадратні дужки, в яких буде розміщено певний атрибут та відповідне йому значення
  • attribute = атрибут, який буде використовуватися. Доцільно використовувати атрибут, унікальний для елемента, такий як ім’я чи ідентифікатор.
  • значення = відповідне значення обраного атрибута.

Крок 1. Перейдіть на демонстраційну сторінку http://demo.guru99.com/test/facebook.html і використовуйте Firebug, щоб перевірити поля введення "Електронна пошта або телефон" та "Пароль". Зверніть увагу на їх HTML-теги, клас та атрибути. Для цього прикладу ми оберемо їх атрибути 'tabindex'.

Крок 2. Спочатку ми отримаємо доступ до текстового поля "Електронна пошта або телефон". Таким чином, ми будемо використовувати значення tabindex 1. Введіть "css = input.inputtext [tabindex = 1]" у полі Target IDE селену та натисніть Знайти. Поле введення "Електронна пошта або телефон" має бути виділеним.

Крок 3. Щоб отримати доступ до вікна введення пароля, просто замініть значення атрибута tabindex. Введіть "css = input.inputtext [tabindex = 2]" у поле Ціль і натисніть кнопку Знайти. Селен IDE повинен мати можливість успішно ідентифікувати текстове поле Пароль.

Пошук за допомогою селектора CSS - внутрішній текст

Як ви могли помітити, міткам HTML рідко даються атрибути ідентифікатора, імені чи класу. Отже, як ми можемо отримати до них доступ? Відповідь полягає у використанні їх внутрішніх текстів. Внутрішні тексти - це фактичні шаблони рядків, які мітка HTML відображає на сторінці.

Синтаксис

Опис

css = тег: містить ("внутрішній текст")
  • tag = HTML-тег елемента, до якого здійснюється доступ
  • внутрішній текст = внутрішній текст елемента

Крок 1. Перейдіть на домашню сторінку Mercury Tours (http://demo.guru99.com/test/newtours/) та використовуйте Firebug для дослідження мітки "Пароль". Зверніть увагу на його тег HTML (у даному випадку це "шрифт") і зауважте, що він не має атрибутів класу, ідентифікатора чи імені.

Крок 2. Введіть css = font: contains ("Пароль:") у поле Target IDE селену та натисніть Знайти. Селен IDE повинен мати доступ до мітки Пароль, як показано на малюнку нижче.

Крок 3. Цього разу замініть внутрішній текст на "Бостон", так що ваша ціль тепер стане "css = font: contains (" Бостон ")". Клацніть Знайти. Ви повинні помітити, що ярлик "Бостон - Сан-Франциско" стає виділеним. Це показує, що Selenium IDE може отримати доступ до довгої мітки, навіть якщо ви щойно вказали перше слово її внутрішнього тексту.

Пошук за DOM (об'єктна модель документа)

Об’єктна модель документа (DOM), простіше кажучи, є способом структурування елементів HTML. Селен IDE може використовувати DOM для доступу до елементів сторінки. Якщо ми використовуємо цей метод, поле Target завжди починатиметься з "dom = document…"; однак префікс "dom =" зазвичай видаляється, оскільки Selenium IDE може автоматично інтерпретувати все, що починається з ключового слова "документ", як шлях у DOM у Selenium.

Існує чотири основних способи пошуку елемента через DOM в Selenium:

  • getElementById
  • getElementsByName
  • dom: name (застосовується лише до елементів у іменованій формі)
  • dom: індекс

Пошук за DOM - getElementById

Зупинимось на першому методі - використанні методу getElementById DOM у селені. Синтаксис буде таким:

Синтаксис

Опис

document.getElementById ("ідентифікатор елемента")

id елемента = це значення атрибута ID елемента, до якого потрібно отримати доступ. Це значення слід завжди вкладати в пару дужок ("").

Крок 1. Використовуйте цю демонстраційну сторінку http://demo.guru99.com/test/facebook.html Перейдіть до неї та використовуйте Firebug, щоб перевірити прапорець "Зберігати мене в системі". Візьміть до відома його посвідчення.

Ми бачимо, що ідентифікатор, який ми повинні використовувати, - "persist_box".

Крок 2. Відкрийте IDE селену та у полі Ціль введіть "document.getElementById (" persist_box ")" та натисніть Знайти. Селен 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. У середовищі IDE селену введіть "document.getElementsByName (" servClass ") [0]" і натисніть кнопку "Знайти". Селен IDE повинен мати можливість правильно ідентифікувати перемикач економ-класу.

Крок 4. Змініть номер індексу на 1 так, що ваш Target тепер стане document.getElementsByName ("servClass") [1]. Натисніть кнопку Знайти, і Selenium IDE повинен мати змогу виділити перемикач "Бізнес-клас", як показано нижче.

Пошук за DOM - dom: ім’я

Як вже згадувалося раніше, цей метод застосовуватиметься лише в тому випадку, якщо елемент, до якого ви отримуєте доступ, міститься у названій формі.

Синтаксис

Опис

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

Крок 1. Перейдіть на домашню сторінку Mercury Tours (http://demo.guru99.com/test/newtours/) та використовуйте Firebug для перевірки текстового поля Ім'я користувача. Зверніть увагу, що він міститься у формі з назвою "будинок".

Крок 2. У IDE Selenium введіть "document.forms [" home "]. Elements [" userName "]" і натисніть кнопку "Знайти". IDE селену повинна мати можливість успішного доступу до елемента.

Пошук за DOM - dom: індекс

Цей метод застосовується навіть тоді, коли елемент не входить до іменованої форми, оскільки він використовує індекс форми, а не його ім'я.

Синтаксис

Опис

document.forms [індекс форми] .elements [індекс елемента]
  • індекс форми = номер індексу (починаючи з 0) форми щодо всієї сторінки
  • індекс елемента = номер індексу (починаючи з 0) елемента щодо всієї форми, що його містить

Ми отримаємо доступ до текстового поля "Телефон" на сторінці реєстрації Mercury Tours. Форма на цій сторінці не має імені та атрибута ID, тому це буде хорошим прикладом.

Крок 1. Перейдіть на сторінку реєстрації Mercury Tours та огляньте текстове поле Телефон. Зверніть увагу, що форма, що її містить, не має атрибутів ідентифікатора та імені.

Крок 2. Введіть "document.forms [0] .elements [3]" у поле Target Selenium IDE та натисніть кнопку Знайти. Селен IDE повинен мати можливість правильно отримати доступ до текстового поля Телефон.

Крок 3. Як варіант, ви можете використовувати ім’я елемента замість його індексу і отримати той самий результат. Введіть "document.forms [0] .elements [" phone "]" у поле Target IDE селену. Текстове поле Телефон все одно має виділятися.

Пошук за XPath

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

Перевага: він може отримати доступ майже до будь-якого елементу, навіть до тих, що не мають атрибутів класу, імені чи ідентифікатора.

Недолік: Це найскладніший метод ідентифікації елементів через занадто багато різних правил та міркувань.

На щастя, Firebug може автоматично генерувати локатори XPath Selenium. У наступному прикладі ми отримаємо доступ до зображення, до якого неможливо отримати доступ за допомогою методів, які ми обговорювали раніше.

Крок 1. Перейдіть на домашню сторінку Mercury Tours і за допомогою Firebug огляньте помаранчевий прямокутник праворуч від жовтого поля "Посилання". Зверніться до зображення нижче.

Крок 2 . Клацніть правою кнопкою миші на HTML-коді елемента, а потім виберіть опцію "Копіювати XPath".

Крок 3. В IDE селену введіть одну косу риску "/" у полі Ціль, а потім вставте XPath, який ми скопіювали на попередньому кроці. Запис у полі Target тепер повинен починатися з двох похилих рисок "//".

Крок 4 . Клацніть на кнопку Знайти. Селен IDE повинен мати можливість виділити оранжеве поле, як показано нижче.

Резюме

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

Метод

Цільовий синтаксис

Приклад
За посвідченням особи id = id_of_the_element id = електронна пошта
За прізвищем ім'я = ім'я_елемента name = ім'я користувача
За назвою Використання фільтрів ім'я = ім'я_елементного фільтра = значення_фільтру name = tripType значення = oneway
За текстом посилання link = link_text посилання = РЕЄСТРАЦІЯ
Тег та ідентифікатор css = тег # ідентифікатор css = введення # електронної пошти
Тег і клас css = тег. клас css = input.inputtext
Тег та атрибут css = тег [атрибут = значення] css = введення [ім'я = прізвище]
Тег, клас та атрибут css = тег. клас [атрибут = значення] css = input.inputtext [tabindex = 1]