Локатори в Selenium

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

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

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

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

Розташування за ідентифікатором

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

Target Формат: id=ідентифікатор елемента

Для цього прикладу ми будемо використовувати Facebook як наш тестовий додаток, оскільки Mercury Тури не використовують ідентифікаційні атрибути.

Крок 1) З моменту створення цього посібника Facebook змінив дизайн сторінки входу. Використовуйте цю демонстраційну сторінку https://demo.guru99.com/test/facebook.html для тестування. Перегляньте текстове поле «Електронна пошта або телефон» за допомогою Firebug і запишіть його ідентифікатор. У цьому випадку ідентифікатор – «електронна адреса».

Крок 2) Запуск Selenium IDE та введіть «id=email» у полі Target коробка. Натисніть кнопку «Знайти» і помітите, що текстове поле «Електронна пошта або телефон» стає виділеним жовтим кольором із зеленою рамкою, тобто Selenium IDE вдалося правильно знайти цей елемент.

Пошук за назвою

Пошук елементів за назвою дуже схожий на пошук за ідентифікатором, за винятком того, що ми використовуємо "ім'я=" замість префікса.

Target Формат: name=назва елемента

У наступній демонстрації ми зараз будемо використовувати Mercury Тури, тому що всі важливі елементи мають імена.

Крок 1) перейдіть до https://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 Тури з використанням «підручника» як імені користувача та пароля. Це має привести вас до сторінки Flight Finder, показаної нижче.

Крок 2) Використання firebug використовує VALUE атрибутів.

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

Крок 3) Натисніть на перший рядок.

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

Крок 4) Натисніть кнопку Знайти.

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

Крок 5) Виберіть перемикач One Way.

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

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

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

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

Target сформований: посилання=текст_посилання

У цьому прикладі ми перейдемо за посиланням «ЗАРЕЄСТРУВАТИСЯ», яке знаходиться на Mercury Домашня сторінка турів.

Крок 1)

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

Крок 2)

• Використовуючи Firebug, перевірте посилання «РЕЄСТРАЦІЯ». Текст посилання знаходиться між тегами і.
• У цьому випадку текст нашого посилання буде «РЕЄСТРУВАТИСЯ». Скопіюйте текст посилання.

Крок 3) Скопіюйте текст посилання у Firebug і вставте його Selenium IDE Target коробка. Додайте перед ним «link=».

Крок 4) Натисніть кнопку «Знайти» і зверніть увагу на це Selenium IDE вдалося правильно виділити посилання REGISTER.

Крок 5) Щоб перевірити далі, введіть «clickAndWait» у полі команди та виконайте її. Selenium IDE має мати змогу успішно натиснути це посилання REGISTER і перевести вас на сторінку реєстрації, показану нижче.

Розташування за DOM (об’єктна модель документа)

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

Є чотири основні способи знайти елемент через DOM Selenium:

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

Розташування за DOM – getElementById

Зупинимося на першому методі – використанні методу getElementById DOM in Selenium. Синтаксис буде таким:

синтаксис

document.getElementById("id of the element")

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

Крок 1) Використовуйте цю демонстраційну сторінку https://demo.guru99.com/test/facebook.html Перейдіть до нього та за допомогою Firebug перевірте прапорець «Залишати мене в системі». Зверніть увагу на його ID.

Ми бачимо, що ID, який ми повинні використовувати, це “persist_box”.

Крок 2) відкритий Selenium IDE і в Target введіть «document.getElementById(«persist_box»)» і натисніть «Знайти». Selenium IDE повинна мати можливість знайти прапорець «Залишати мене в системі». Хоча він не може виділити внутрішню частину прапорця, 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. In 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 Домашня сторінка турів https://demo.guru99.com/test/newtours/ і використовуйте Firebug, щоб перевірити текстове поле імені користувача. Зверніть увагу, що він міститься у формі з назвою «домашня».

Крок 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 Сторінка реєстрації турів. Форма на цій сторінці не має назви та атрибута ID, тому це буде гарним прикладом.

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

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

Крок 3) Крім того, ви можете використовувати назву елемента замість його індексу та отримати той самий результат. Введіть «document.forms[0].elements[«phone»]». Selenium IDE Target коробка. Текстове поле «Телефон» усе ще має бути виділеним.

Розташування за допомогою XPath

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

• Перевага: Він може отримати доступ майже до будь-якого елемента, навіть без атрибутів class, name або id.
• Недолік: Це найскладніший метод ідентифікації елементів через занадто багато різних правил і міркувань.

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

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

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

Крок 3) In Selenium IDE, введіть одну косу риску “/” у полі Target потім вставте XPath, скопійований на попередньому кроці. Запис у вашому Target вікно має починатися з двох похилих рисок «//».

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