Локатори в Selenium

Какво представляват локаторите Selenium?

Локаторът е команда, която насочва Selenium IDE или Selenium WebDriver към правилния GUI елемент, като текстово поле, бутон, връзка или квадратче за отметка, върху който трябва да се извърши действие. Идентифицирането на правилния GUI елемент е предпоставка за изграждането на всеки надежден скрипт за автоматизация. Точното идентифициране обаче е по-трудно, отколкото звучи. Понякога може да се окаже, че взаимодействате с грешен елемент или изобщо без елемент. За да се справите с това, Selenium предлага разнообразие от стратегии за локализиране, които позволяват прецизно насочване към елементи от графичния потребителски интерфейс.

Докато някои команди, като например командата „отваряне“, не изискват локатор, по-голямата част от Selenium Командите зависят от локаторите на елементи. Изборът на локатор зависи до голяма степен от вашето приложение в процес на тестване (AUT). В този урок ще редуваме между Facebook и Mercury Демонстрационен сайт за обиколки (newtours.demoaut), базиран на това кои локатори се поддържат от всяко приложение. По същия начин, във вашия собствен тестване проект, ще изберете локатор на елементи в Selenium WebDriver, базиран на структурата на вашето приложение.

Локализиране по ID

Това е най-разпространеният метод за локализиране на елементи, защото идентификаторите са предназначени да бъдат уникални за всеки елемент на страницата. Винаги, когато съществува атрибут за идентификатор, той трябва да е вашият първи избор за бързи, стабилни и четливи тестови скриптове.

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

За този пример ще използваме демонстрационна страница във Facebook, защото Mercury Tours не използва атрибути за ID за основните си полета на формуляра.

Стъпка 1) Използвайте тази демонстрационна страница https://demo.guru99.com/test/facebook.html за тестване. Проверете текстовото поле „Имейл или телефон“, като използвате вградените инструменти за разработчици на браузъра си (натиснете F12 в Chrome, Edge или Firefox) и запишете неговия идентификатор. В този случай идентификаторът е „имейл“.

Стъпка 2) Стартиране Selenium IDE и въведете „id=email“ в Target поле. Щракнете върху бутона „Намери“ и обърнете внимание, че текстовото поле „Имейл или телефон“ е маркирано в жълто със зелена рамка, което показва, че Selenium IDE е локализирал елемента правилно.

Локализиране по име

Намирането на елементи по име е подобно на намирането по ID, с изключение на това, че използваме „име=“ префикс вместо това. Този подход е полезен, когато елементите нямат ID, но имат дефиниран атрибут на име.

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

За следващата демонстрация ще използваме Mercury Турове, защото всички значими елементи на формуляра в сайта носят атрибут name.

Стъпка 1) Отидете до https://demo.guru99.com/test/newtours/ и използвайте инструментите за разработчици на браузъра, за да проверите текстовото поле „Потребителско име“. Обърнете внимание на атрибута му name.

Тук името на елемента е „потребителско_име“.

Стъпка 2) In Selenium IDE, въведете „име=потребителско име“ в Target и щракнете върху бутона Намери. Selenium IDE трябва да намери текстовото поле „Потребителско име“, като го маркира.

Как да намерите елемент по име с помощта на филтри

Филтрите са полезни, когато няколко елемента споделят един и същ атрибут name. Филтрите са допълнителни атрибути, използвани за разграничаване на елементи, които споделят еднакво име. Без филтри, Selenium по подразбиране ще се използва само първият съответстващ елемент.

Target Формат: име=име_на_елемента filter=стойност_на_филтър

Нека разгледаме един пример.

Стъпка 1) Влезте в Mercury Турове.

Влезте в Mercury Обиколки, използващи „tutorial“ като потребителско име и парола. Страницата за търсене на полети трябва да се появи, както е показано по-долу.

Стъпка 2) Използвайте инструментите за разработчици, за да проверите атрибутите VALUE.

Обърнете внимание, че радио бутоните „Двупосочно пътуване“ и „Еднопосочно пътуване“ споделят едно и също име „tripType“. Те обаче имат различни атрибути VALUE, така че можем да използваме всяка стойност като филтър.

Стъпка 3) Кликнете върху първия ред в редактора.

• Първо ще осъществим достъп до радио бутона Еднопосочно. Щракнете върху първия ред в Selenium IDE редактор.
• В полето „Команда“ въведете командата „щракване“.
• в Target В полето въведете „name=tripType value=oneway“. Частта „value=oneway“ служи като наш филтър.

Стъпка 4) Щракнете върху бутона Намери.

Забележи това Selenium IDE маркира радио бутона One Way в зелено, потвърждавайки, че елементът е бил достъпен успешно чрез атрибута му VALUE.

Стъпка 5) Изберете радиобутона Еднопосочно.

Натиснете клавиша „X“ на клавиатурата си, за да изпълните командата за щракване. Сега е избран радио бутонът „Еднопосочно“.

Можете да извършите същото действие с радио бутона „Round Trip“, този път използвайки „name=tripType value=roundtrip“ като цел.

Локализиране по текст на връзката

Тази стратегия за локализиране се прилага само за текстове на хипервръзки. Достъпваме до връзката, като поставяме пред целта „link=“, последвано от видимия текст на хипервръзката. Този метод е лесно четим и работи добре за тестване на навигацията.

Target Формат: връзка=текст_връзка

В следващия пример ще осъществим достъп до връзката „РЕГИСТРАЦИЯ“, която се намира на Mercury Начална страница на Tours.

Стъпка 1)

• Първо, уверете се, че сте излезли от Mercury Турове.
• Придвижете се до Mercury Начална страница на Tours.

Стъпка 2)

• Използвайте инструментите за разработчици, за да проверите връзката „РЕГИСТРАЦИЯ“. Текстът на връзката се показва между отварящия и затварящия тагове за котва.
• В този случай текстът на връзката е „РЕГИСТРАЦИЯ“. Копирайте текста на връзката.

Стъпка 3) Копирайте текста на връзката и го поставете в Selenium IDE Target кутия. Поставете пред него „link=“.

Стъпка 4) Щракнете върху бутона Намери. Selenium IDE ще маркира правилно връзката REGISTER.

Стъпка 5) За да проверите допълнително, въведете „clickAndWait“ в командното поле и го изпълнете. Selenium IDE ще кликне успешно върху връзката РЕГИСТРАЦИЯ и ще ви отведе до страницата за регистрация, показана по-долу.

Локализиране чрез DOM (документен обектен модел)

- Модел на обект на документ (DOM), с прости думи, описва как HTML елементите са структурирани като дърво от възли. Selenium IDE може да навигира в това дърво, за да получи достъп до елементи на страницата. Когато се използва този метод, Target Полето винаги започва с „dom=документ…“. Префиксът „dom=“ обикновено се пропуска, защото Selenium IDE автоматично интерпретира всяка стойност, започваща с „document“, като DOM път.

Има четири основни начина за намиране на елемент в DOM. Selenium:

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

Локализиране по DOM – getElementById

Нека първо разгледаме метода getElementById на DOM в SeleniumТози метод връща един елемент, като съпоставя неговия атрибут ID.

Синтаксис

document.getElementById("id of the element")

• id на елемента = стойността на атрибута ID на елемента, до който ще бъде осъществен достъп. Тази стойност винаги трябва да бъде оградена в кавички.

Стъпка 1) Използвайте тази демонстрационна страница https://demo.guru99.com/test/facebook.htmlОтидете до него и използвайте Инструментите за разработчици, за да проверите квадратчето „Не ме логвай“. Запишете му идентификационния номер.

Идентификаторът, който трябва да използваме, е „persist_box“.

Стъпка 2) отворено Selenium IDE и в Target В полето въведете document.getElementById(„persist_box“) и след това щракнете върху „Намери“. Selenium IDE ще намери квадратчето за отметка „Запомни ме“. Въпреки че не може да маркира вътрешността на квадратчето, то огражда елемента с яркозелена рамка, както е показано по-долу.

Локализиране по DOM – getElementsByName

Методът getElementById осъществява достъп само до един елемент в даден момент, а именно до елемента с посочения ID. Методът getElementsByName се държи по различен начин. Той връща масив от елементи, които споделят посоченото име. Достъпът до отделните елементи се осъществява с помощта на числов индекс, който започва от 0.

	getElementById Връща само един елемент. Този елемент носи идентификатора, посочен в скобите на getElementById().
	getElementsByName Връща колекция от елементи, чиито имена са еднакви. Всеки елемент е индексиран с число, започващо от 0, подобно на масив. Избирате конкретен елемент, като поставите индекса му в квадратните скоби в синтаксиса по-долу.

Синтаксис

document.getElementsByName("name")[index]

• име = име на елемента, както е дефинирано от неговия атрибут „име“.
• индекс = цяло число, което показва кой елемент в масива на getElementsByName ще бъде използван.

Стъпка 1) Придвижете се до Mercury Отворете началната страница на Tours и влезте, използвайки „tutorial“ като потребителско име и парола. Браузърът ще зареди екрана за търсене на полети.

Стъпка 2) Използвайте инструментите за разработчици, за да проверите трите радио бутона в долната част на страницата (Икономична класа, Бизнес класа и Първа класа). Обърнете внимание, че всички те имат едно и също име – „servClass“.

Стъпка 3) Първо, нека използваме радио бутона „Икономична класа“. От трите радио бутона този елемент се появява първи, така че индексът му е 0. В Selenium IDE, въведете document.getElementsByName(“servClass”)[0] и щракнете върху бутона Find. 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 Начална страница на Tours https://demo.guru99.com/test/newtours/ и използвайте Инструменти за разработчици, за да проверите текстовото поле „Потребителско име“. Обърнете внимание, че то се съдържа във формуляр с име „начало“.

Стъпка 2) In Selenium IDE, въведете document.forms[“home”].elements[“userName”] и щракнете върху бутона Find. 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 IDE Target и щракнете върху бутона Намери. Selenium IDE ще има правилен достъп до текстовото поле „Телефон“.

Стъпка 3) Като алтернатива, можете да използвате името на елемента вместо неговия индекс за същия резултат. Въведете document.forms[0].elements[“phone”] в Target поле. Текстовото поле „Телефон“ ще остане маркирано.

Локализиране чрез XPath

XPath е езикът за заявки, използван за навигация в XML (Extensible Markup Language) възли. Тъй като HTML може да се счита за имплементация на XML, XPath може също да локализира HTML елементи. Това е една от най-мощните стратегии за локализиране в Selenium.

• Предимство: Той може да достъпва почти всеки елемент, включително тези без атрибути клас, име или идентификатор.
• Недостатък: Това е най-сложната стратегия за локализиране поради многото си правила и синтактични вариации.

Инструментите за разработчици на съвременни браузъри могат автоматично да генерират XPath изрази. В Chrome, Edge или Firefox, щракнете с десния бутон върху елемент в панела „Елементи“ и изберете „Копиране“ > „Копиране на XPath“. В следващия пример ще осъществим достъп до изображение, което не може да бъде намерено с помощта на методите, обсъдени по-рано.

Стъпка 1) Придвижете се до Mercury Отворете началната страница на Tours и използвайте инструментите за разработчици, за да проверите оранжевия правоъгълник вдясно от жълтото поле „Връзки“, както е показано по-долу.

Стъпка 2) Щракнете с десния бутон върху HTML кода на елемента и след това изберете опцията „Копиране на XPath“.

Стъпка 3) In Selenium IDE, въведете една наклонена черта напред „/“ в Target полето, след което поставете XPath, копиран в предишната стъпка. Входът в Target полето сега трябва да започва с две наклонени черти „//“.

Стъпка 4) Щракнете върху бутона Намери. Selenium IDE ще маркира оранжевото поле, както е показано по-долу.

Защо е важен изборът на правилния локатор

Изборът на правилната стратегия за локализиране е едно от най-влиятелните решения в Selenium автоматизация, защото тя пряко влияе върху стабилността на скриптовете, скоростта на изпълнение и дългосрочните разходи за поддръжка. Лошо избраният локатор може да причини нестабилни тестове, фалшиви грешки и честа преработка при всяка промяна на потребителския интерфейс на приложението. Редът на предпочитание, препоръчан от опитни инженери по автоматизация, е първо ID, след това Име, последвано от CSS селектор, текст на връзката и накрая XPath.

Локаторите, базирани на идентификатори, са най-бързи, защото търсенето в браузъра е оптимизирано за уникални идентификатори. Локаторите, базирани на имена, са почти толкова ефективни, когато имената са уникални. CSS селекторите и XPath осигуряват гъвкавост, но са склонни да бъдат по-бавни и по-крехки, когато разработчиците рефакторират DOM. Link Text е отличен за навигационни връзки, но предлага ограничена повторна употреба.

Стабилната автоматизация зависи и от сътрудничеството с разработчиците. Когато тестерите изискват последователни и смислени атрибути ID или data-* по време на преглед на код, издръжливостта на локаторите се подобрява значително. Избягвайте да разчитате на автоматично генерирани идентификатори (като тези, генерирани от рамки), тъй като те могат да се променят между компилациите. Чрез приоритизиране на четливи, управлявани от намерения локатори, екипите могат да поддържат тестовите пакети поддържаеми и да намалят техническия дълг с развитието на приложението.

Най-добри практики за писане на надеждни локатори

Надеждните локатори са основата на една поддържаема Selenium набор от тестове. Следните практики помагат за намаляване на грешките в скриптовете, подобряване на четимостта и осигуряване на устойчивост на тестовете към промени в потребителския интерфейс.

1. Предпочитайте уникални идентификатори: Винаги първо проверявайте за атрибут ID. Идентификационните номера са предназначени да бъдат уникални в рамките на страницата и са най-ефективният избор.
2. Използвайте семантично име и атрибути data-*: Насърчавайте разработчиците да добавят стабилни атрибути за тестване, като например data-testid или data-qa. Те остават последователни, дори когато CSS класовете се променят.
3. Избягвайте абсолютен XPath: Абсолютните пътища като /html/body/div[2]/div[3]/span лесно се чупят. Използвайте относителни XPath изрази с атрибути като //input[@name='userName'].
4. Комбинирайте атрибути за прецизност: Когато един атрибут не е уникален, комбинирайте няколко атрибута (например //button[@type='submit' и @name='login']), за да насочите към правилния елемент.
5. Използвайте текста разумно: Локаторите, които зависят от видим текст, може да се нарушат при различните езикови локализации. Използвайте текстови локатори само когато съдържанието е стабилно и едноезично.
6. Централизирайте локаторите: Съхранявайте локаторите в клас Page Object Model (POM), така че актуализациите да могат да се правят на едно място, а не в много тестови скриптове.
7. Валидиране в Инструменти за разработчици: Преди да добавите локатор към скрипт, тествайте го в конзолата на браузъра, като използвате $x(“//xpath”) за XPath или document.querySelector за CSS, за да потвърдите, че връща точно един елемент.
8. Избягвайте локатори, базирани на индекси, когато е възможно: Позициите на индексите, като например [3], зависят от реда на елементите. Дори малки промени в оформлението могат да изместят индекса и да нарушат работата на скрипта.

Чрез последователно прилагане на тези практики, инженерите по автоматизация създават тестови пакети, които се мащабират в различните екипи и издържат на чести актуализации на потребителския интерфейс с минимална поддръжка.

Въпроси и Отговори