Локатори в Selenium IDE: CSS Selector - DOM - XPath - документ за самоличност

Съдържание:

Anonim

Какво са локатори?

Locator е команда, която казва на Selenium IDE кои елементи на GUI (да речем текстово поле, бутони, квадратчета за отметка и т.н.) трябва да работят. Идентифицирането на правилните елементи на GUI е предпоставка за създаване на скрипт за автоматизация. Но точното идентифициране на GUI елементите е по-трудно, отколкото звучи. Понякога в крайна сметка работите с неправилни GUI елементи или изобщо без елементи! Следователно, Selenium предоставя редица локатори за точно намиране на GUI елемент

Различните видове CSS Locator в Selenium IDE

Има команди, които не се нуждаят от локатор (например командата "отвори"). Повечето от тях обаче се нуждаят от локатори на елементи в Selenium webdriver.

Изборът на локатор зависи до голяма степен от Вашето тествано приложение . В този урок ще превключваме между Facebook, нови tours.demoaut въз основа на локатори, които тези приложения поддържат. По същия начин във вашия проект за тестване ще изберете някой от горепосочените локатори на елементи в Selenium webdriver въз основа на поддръжката на вашето приложение.

Намиране по ID

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

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

За този пример ще използваме Facebook като наше тестово приложение, тъй като Mercury Tours не използват ID атрибути.

Стъпка 1. От създаването на този урок Facebook промени своя дизайн на страницата за вход. Използвайте тази демонстрационна страница http://demo.guru99.com/test/facebook.html за тестване. Проверете текстовото поле „Имейл или телефон“ с помощта на Firebug и вземете под внимание неговия идентификатор. В този случай идентификационният номер е „имейл“.

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

Намиране по име

Намирането на елементи по име е много подобно на намирането по ID, с изключение на това, че вместо това използваме префикса "name =" .

Целеви формат: име = име на елемента

В следващата демонстрация сега ще използваме Mercury Tours, защото всички важни елементи имат имена.

Стъпка 1. Придвижете се до http://demo.guru99.com/test/newtours/ и използвайте Firebug, за да проверите текстовото поле "Потребителско име". Обърнете внимание на атрибута на името му.

Тук виждаме, че името на елемента е "userName".

Стъпка 2. В IDE на Selenium въведете "name = userName" в полето Target и щракнете върху бутона Find. IDE на Selenium трябва да може да намери текстовото поле User Name, като го маркира.

Намиране по име с помощта на филтри

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

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

Да видим пример -

Стъпка 1 . Влезте в Mercury Tours, използвайки "урок" като потребителско име и парола. Трябва да ви отведе до страницата Flight Finder, показана по-долу.

Стъпка 2. Използвайки Firebug, забележете, че радио бутоните за двупосочно пътуване и еднопосочно пътуване имат едно и също име "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 на Selenium IDE. Префиксирайте го с "link =".

Стъпка 4. Щракнете върху бутона Намери и забележете, че Selenium IDE успя да маркира правилно връзката РЕГИСТРИРАНЕ.

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

Намиране чрез CSS Selector

CSS селекторите в Selenium са низови модели, използвани за идентифициране на елемент въз основа на комбинация от HTML таг, id, клас и атрибути. Намирането чрез CSS Selectors в Selenium е по-сложно от предишните методи, но това е най-често срещаната стратегия за локализиране на напреднали потребители на Selenium, тъй като може да има достъп дори до тези елементи, които нямат идентификатор или име.

CSS Selectors в Selenium имат много формати, но ние ще се съсредоточим само върху най-често срещаните.

  • Етикет и ID
  • Етикет и клас
  • Етикет и атрибут
  • Етикет, клас и атрибут
  • Вътрешен текст

Когато използваме тази стратегия, винаги поставяме пред полето Target "css =", както ще бъде показано в следващите примери.

Намиране чрез CSS Selector - Tag и ID

Отново ще използваме текстовото поле за имейл на Facebook в този пример. Както можете да си спомните, той има идентификационен номер на „имейл“ и вече имаме достъп до него в раздела „Намиране по идентификатор“. Този път ще използваме Selenium CSS Selector с ID при достъп до същия този елемент.

Синтаксис

Описание

css = tag # id
  • tag = HTML тагът на елемента, до който се осъществява достъп
  • # = знак за хеш. Това винаги трябва да присъства, когато се използва Selenium CSS Selector с ID
  • id = идентификаторът на елемента, до който се осъществява достъп

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

Стъпка 1. Отворете www.facebook.com. Използвайки Firebug, разгледайте текстовото поле „Имейл или телефон“.

На този етап обърнете внимание, че HTML тагът е „вход“, а идентификаторът му е „имейл“. Така че нашият синтаксис ще бъде "css = input # email".

Стъпка 2. Въведете "css = input # email" в полето Target на Selenium IDE и щракнете върху бутона Find. IDE на Selenium трябва да може да подчертае този елемент.

Намиране чрез CSS Selector - Tag и Class

Намирането чрез CSS Selector в Selenium с помощта на HTML таг и име на клас е подобно на използването на таг и ID, но в този случай вместо знак за хеш се използва точка (.).

Синтаксис

Описание

css = таг. клас
  • tag = HTML тагът на елемента, до който се осъществява достъп
  • . = точката. Това винаги трябва да присъства, когато използвате CSS Selector с клас
  • class = класът на елемента, до който се осъществява достъп

Стъпка 1. Отидете на демонстрационната страница http://demo.guru99.com/test/facebook.html и използвайте Firebug, за да проверите текстовото поле "Имейл или телефон". Забележете, че неговият HTML таг е "input", а неговият клас е "inputtext".

Стъпка 2. В IDE на Selenium въведете "css = input.inputtext" в полето Target и щракнете върху Find. IDE на Selenium трябва да може да разпознава текстовото поле Email или Phone.

Обърнете внимание, че когато множество елементи имат един и същ HTML таг и име, само първият елемент в изходния код ще бъде разпознат . Използвайки Firebug, проверете текстовото поле Password във Facebook и забележете, че то има същото име като текстовото поле Email или Phone.

Причината, поради която само текстовото поле за имейл или телефон е подчертано в предишната илюстрация, е, че е първо в източника на страницата на Facebook.

Намиране чрез CSS селектор - маркер и атрибут

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

Синтаксис

Описание

css = таг [атрибут = стойност]
  • tag = HTML тагът на елемента, до който се осъществява достъп
  • [и] = квадратни скоби, в които ще бъдат поставени конкретен атрибут и съответната му стойност
  • attribute = атрибутът, който ще се използва. Препоръчително е да използвате атрибут, който е уникален за елемента като име или идентификатор.
  • value = съответната стойност на избрания атрибут.

Стъпка 1. Придвижете се до страницата за регистрация на Mercury Tours (http://demo.guru99.com/test/newtours/register.php) и проверете текстовото поле "Фамилия". Обърнете внимание на неговия HTML таг ("вход" в този случай) и името му ("lastName").

Стъпка 2. В Selenium IDE въведете "css = input [name = lastName]" в полето Target и щракнете върху Find. IDE на Selenium трябва да има достъп до полето Фамилно име успешно.

Когато множество елементи имат един и същ HTML таг и атрибут, само първият ще бъде разпознат . Това поведение е подобно на намирането на елементи с помощта на CSS селектори със същия етикет и клас.

Намиране чрез CSS Selector - таг, клас и атрибут

Синтаксис Описание
css = tag.class [атрибут = стойност]
  • tag = HTML тагът на елемента, до който се осъществява достъп
  • . = точката. Това винаги трябва да присъства, когато използвате CSS Selector с клас
  • 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 и щракнете върху Find. Полето за въвеждане на имейл или телефон трябва да бъде маркирано.

Стъпка 3. За достъп до полето за въвеждане на парола, просто заменете стойността на атрибута tabindex. Въведете "css = input.inputtext [tabindex = 2]" в полето Target и кликнете върху бутона Find. IDE на Selenium трябва да може успешно да идентифицира текстовото поле Парола.

Намиране чрез CSS Selector - вътрешен текст

Както може би сте забелязали, HTML етикетите рядко получават атрибути id, name или class. И така, как да ги осъществим? Отговорът е чрез използването на техните вътрешни текстове. Вътрешните текстове са действителните модели на низове, които HTML етикетът показва на страницата.

Синтаксис

Описание

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

Стъпка 1. Отидете до началната страница на Mercury Tours (http://demo.guru99.com/test/newtours/) и използвайте Firebug, за да проучите етикета „Парола“. Обърнете внимание на неговия HTML таг (който в този случай е „шрифт“) и забележете, че той няма атрибути на клас, идентификатор или име.

Стъпка 2. Въведете css = font: contains ("Password:") в полето Target на Selenium IDE и щракнете върху Find. IDE на Selenium трябва да има достъп до етикета за парола, както е показано на изображението по-долу.

Стъпка 3. Този път заменете вътрешния текст с "Бостън", така че вашата цел вече ще стане "css = font: contains (" Boston ")". Щракнете върху Намери. Трябва да забележите, че етикетът „Бостън до Сан Франциско“ става подчертан. Това ви показва, че Selenium IDE може да има достъп до дълъг етикет, дори ако току-що сте посочили първата дума от вътрешния му текст.

Намиране по DOM (обектен модел на документ)

Моделът на обект на документ (DOM), с прости думи, е начинът, по който се структурират HTML елементите. IDE на Selenium може да използва DOM за достъп до елементите на страницата. Ако използваме този метод, нашето поле Target винаги ще започва с "dom = document ..."; обаче префиксът "dom =" обикновено се премахва, тъй като IDE на Selenium може автоматично да интерпретира всичко, което започва с ключовата дума "документ", така или иначе като път в DOM в Selenium.

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

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

Намиране от DOM - getElementById

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

Синтаксис

Описание

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

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

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

Виждаме, че идентификационният номер, който трябва да използваме, е "persist_box".

Стъпка 2. Отворете IDE на Selenium и в полето Target въведете "document.getElementById (" persist_box ")" и щракнете върху Find. IDE на Selenium трябва да може да намери квадратчето за отметка „Запази ме влязъл в системата“. Въпреки че не може да подчертае интериора на квадратчето за отметка, 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]" и щракнете върху бутона Търсене. IDE на Selenium трябва да може да разпознава правилно бутона за избор на икономична класа.

Стъпка 4. Променете номера на индекса на 1, така че вашата цел вече ще стане document.getElementsByName ("servClass") [1]. Щракнете върху бутона Намери и Selenium IDE трябва да може да маркира бутона за избор "Бизнес клас", както е показано по-долу.

Намиране чрез DOM - dom: име

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

Синтаксис

Описание

document.forms ["име на формуляра"].. елементи ["име на елемента"]
  • name на формуляра = стойността на атрибута name на маркера на формуляра, който съдържа елемента, до който искате да получите достъп
  • name на елемента = стойността на атрибута name на елемента, до който искате да получите достъп

Стъпка 1. Придвижете се до началната страница на Mercury Tours (http://demo.guru99.com/test/newtours/) и използвайте Firebug, за да проверите текстовото поле User Name. Забележете, че се съдържа във форма, наречена „дом“.

Стъпка 2. В IDE на Selenium напишете "document.forms [" home "]. Elements [" userName "]" и щракнете върху бутона Find. IDE на Selenium трябва да има успешен достъп до елемента.

Намиране по DOM - dom: индекс

Този метод се прилага дори когато елементът не е в имена на формуляр, защото използва индекса на формуляра, а не името му.

Синтаксис

Описание

document.forms [индекс на формуляра] .elements [индекс на елемента]
  • индекс на формуляра = номерът на индекса (започващ от 0) на формуляра по отношение на цялата страница
  • индекс на елемента = индексният номер (започващ от 0) на елемента по отношение на цялата форма, която го съдържа

Ще получим достъп до текстовото поле "Телефон" на страницата за регистрация на Mercury Tours. Формулярът на тази страница няма име и атрибут ID, така че това ще бъде добър пример.

Стъпка 1. Отворете страницата за регистрация на Mercury Tours и проверете текстовото поле Телефон. Забележете, че формулярът, който го съдържа, няма атрибути ID и име.

Стъпка 2. Въведете "document.forms [0] .elements [3]" в полето Target на Selenium IDE и щракнете върху бутона Find. IDE на Selenium трябва да има възможност за правилен достъп до текстовото поле Телефон.

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

Намиране чрез XPath

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

Предимство: Той може да има достъп до почти всеки елемент, дори до тези без атрибути на клас, име или id.

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

За щастие, Firebug може автоматично да генерира локатори XPath Selenium. В следващия пример ще получим достъп до изображение, което не може да бъде достъпно чрез методите, които обсъдихме по-рано.

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

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

Стъпка 3. В IDE на Selenium въведете една наклонена черта "/" в полето Target, след което поставете XPath, който копирахме в предишната стъпка. Записът в полето Target сега трябва да започва с две наклонени черти "//".

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

Обобщение

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

Метод

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

Пример
По идентификационен номер id = id_of_the_element id = имейл
По име име = име_на_елемента name = userName
По име Използване на филтри name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Чрез Текст на връзката link = link_text връзка = РЕГИСТРИРАНЕ
Етикет и ID css = tag # id css = вход # имейл
Етикет и клас css = таг. клас css = input.inputtext
Етикет и атрибут css = таг [атрибут = стойност] css = вход [име = фамилия]
Етикет, клас и атрибут css = таг. клас [атрибут = стойност] css = input.inputtext [tabindex = 1]