Меню

Как да използвам CSS Selector за идентифициране на уеб елементи за скриптове за селен - Урок № 6 за селен

how use css selector

Опитайте Нашия Инструмент За Премахване На Проблемите

В нашата предишен урок за Селен , научихме различни видове локатори. Също така научихме как да използваме: ID, ClassName, Name, Link Text и XPath локатори за идентифициране на уеб елементи на уеб страница.

В продължение на това днес ще научим как да използвам CSS Selector като локатор . Това е шестият ни урок в нашата безплатна серийна тренировъчна серия .

Използване на CSS Selector като локатор:

CSS Selector е комбинацията от селектор на елемент и стойност на селектора, която идентифицира уеб елемента в рамките на уеб страница. Композитът от селектор на елемент и стойност на селектора е известен като модел на селектор.

CSS Selector Селен локатор

Образецът на селектора е конструиран с помощта на HTML тагове, атрибути и техните стойности. Централната тема зад процедурата за създаване на CSS Selector и Xpath са много сходни, в основата на единствената разлика в техния конструктивен протокол.

Подобно на Xpath, CSS селекторът може също да намира уеб елементи, които нямат ID, клас или име.

кой е най-добрият софтуер за диктовки

Така че сега, като се подготвяме, нека обсъдим примитивните типове CSS селектори:

Използване на CSS Selector като локатор

Какво ще научите:

CSS селектор: ID

В тази извадка бихме получили достъп до текстовото поле „Имейл“, което се намира във формата за вход на Gmail.com.

Текстовото поле за имейл има атрибут ID, чиято стойност е дефинирана като „Email“. По този начин атрибутът ID и неговата стойност могат да се използват за създаване на CSS Selector за достъп до текстовото поле на имейла.

Създаване на CSS селектор за уеб елемент

Етап 1 : Намерете / проверете уеб елемента (текстовото поле „Имейл“ в нашия случай) и забележете, че HTML тагът е „вход“, а стойността на атрибута на ИД е „Имейл“ и двамата заедно правят препратка към „Имейл текстовото поле“. Следователно горните данни ще бъдат използвани за създаване на CSS Selector.

Използване на CSS Selector като локатор 2

Проверете стойността на локатора

Етап 1 : Въведете „css = input # Email“, т.е. стойността на локатора в целевото поле в IDE на Selenium и кликнете върху бутона Намиране. Забележете, че полето Текст на имейл ще бъде маркирано.

Използване на CSS Selector като локатор 3

Синтаксис

css =

  • HTML таг - Това е тагът, който се използва за обозначаване на уеб елемента, до който искаме да осъществим достъп.
  • # - Знакът хеш се използва за символизиране на атрибут ID. Задължително е да се използва хеш знак, ако атрибутът ID се използва за създаване на CSS Selector.
  • Стойност на атрибута ID - Това е стойността на атрибут ID, който е достъпен.
  • Стойността на ID винаги се предшества от знак за хеш.

Забележка: Приложимо и за други видове CSS селектори

  • Докато посочвате CSS Selector в целевото текстово поле на Selenium IDE, винаги не забравяйте да го добавите с префикс с “css =”.
  • Последователността на горните артефакти е неизменна.
  • Ако два или повече уеб елемента имат една и съща HTML таг и стойност на атрибута, първият елемент, маркиран в източника на страницата, ще бъде идентифициран.

CSS селектор: Клас

В тази извадка щяхме да осъществим достъп до квадратчето за отметка „Останете в профила си“, което се намира под формата за вход на gmail.com.

Полето за отметка „Останете в профила“ има атрибут Class, чиято стойност е дефинирана като „запомни“. По този начин атрибутът Class и неговата стойност могат да се използват за създаване на CSS селектор за достъп до определения уеб елемент.

Намирането на елемент с помощта на Class като CSS Selector е много подобно на използването на ID, самотната разлика се крие в тяхното формиране на синтаксис.

Създаване на CSS селектор за уеб елемент

Етап 1 : Намерете / инспектирайте уеб елемента (отметка „Останете в профила“ в нашия случай) и забележете, че HTML тагът е „етикет“, а стойността на атрибута ID е „запомни“ и двамата колективно правят препратка към „Останете подписани“ в квадратчето за отметка ”.

Проверете стойността на локатора

Етап 1 : Въведете “css = label.remember”, т.е. стойността на локатора в целевото поле в IDE на Selenium и кликнете върху бутона Find. Забележете, че квадратчето „Останете влезли в системата“ ще бъде маркирано.

Използване на CSS Selector като локатор 4

Синтаксис

css =

  • . - Знакът точка се използва за символизиране на атрибута Class. Задължително е да се използва точка, ако атрибут Class се използва за създаване на CSS селектор.
  • Стойността на Class винаги се предшества от точков знак.

CSS селектор: Атрибут

В тази извадка щяхме да осъществим достъп до бутона „Вход“, който се намира под формата за вход на gmail.com.

Бутонът „Вход“ има атрибут тип, чиято стойност е дефинирана като „изпращане“. По този начин атрибутът type и неговата стойност могат да се използват за създаване на CSS селектор за достъп до определения уеб елемент.

Създаване на CSS селектор за уеб елемент

Етап 1 : Намерете / проверете уеб елемента (бутон „Вход“ в нашия случай) и забележете, че HTML тагът е „input“, атрибутът е тип, а стойността на атрибута type е „submit“ и всички те заедно правят препратка към бутона „Вход“.

Проверете стойността на локатора

Етап 1 : Напишете „css = input (type =’ submit ’)“, т.е. стойността на локатора в целевото поле в IDE на Selenium и кликнете върху бутона Find. Забележете, че бутонът „Вход“ ще бъде маркиран.

Използване на CSS Selector като локатор 5

Синтаксис

css =

  • Атрибут - Това е атрибутът, който искаме да използваме за създаване на CSS Selector. Той може да стойност, тип, име и т.н. Препоръчително е да изберете атрибут, чиято стойност уникално идентифицира уеб елемента.
  • Стойност на атрибута - Това е стойността на атрибут, който е достъпен.

CSS селектор: ID / клас и атрибут

В тази извадка бихме получили достъп до текстовото поле „Парола“, което се намира във формуляра за вход на gmail.com.

Текстовото поле „Парола“ има атрибут ID, чиято стойност е дефинирана като „Passwd“, атрибут тип, чиято стойност е дефинирана като „парола“. По този начин ID атрибут, атрибут тип и техните стойности могат да се използват за създаване на CSS Selector за достъп до определения уеб елемент.

как да отворите JSON файл на Windows

Създаване на CSS селектор за уеб елемент

Етап 1 : Намерете / проверете уеб елемента (текстовото поле „Парола“ в нашия случай) и забележете, че HTML тагът е „вход“, атрибутите са ID и тип и съответстващите им стойности са „Passwd“ и „парола“ и всички те заедно направете препратка към текстовото поле „Парола“.

Проверете стойността на локатора

Етап 1 : Въведете „css = input # Passwd (name =’ Passwd ’)“, т.е. стойността на локатора в целевото поле в IDE на Selenium и щракнете върху бутона Find Забележете, че текстовото поле „Парола“ ще бъде маркирано.

Използване на CSS Selector като локатор 5

Синтаксис

css =

Два или повече атрибута също могат да бъдат предоставени в синтаксиса.Например, „Css = input # Passwd (type =’ password ’) (name =‘ Passwd ’)“.

CSS селектор: Подниз

CSS в Selenium позволява съвпадение на частичен низ и по този начин се получава много интересна функция за създаване на CSS селектори с помощта на поднизове. Има три начина, по които CSS селектори могат да бъдат създадени въз основа на механизма, използван за съвпадение на подниза.

Видове механизми

Всички механизми отдолу имат символично значение.

  • Съвпадение на префикс
  • Съвпадение на суфикс
  • Съвпадение на подниз

Нека ги обсъдим в детайли.

Съвпадение на префикс

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

Синтаксис

css =

  • ^ - Символична нотация за съвпадение на низ, използващ префикс.
  • Префикс - Това е низът, въз основа на който се извършва операцията за съвпадение. Очаква се вероятният низ да започне с посочения низ.

Например: Нека разгледаме „Текстово поле за парола“, така че съответният CSS селектор ще бъде:

css = input # Passwd (name ^ = 'Pass')

Съвпадение на суфикс

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

Синтаксис

css =

  • # - Символична нотация, за да съответства на низ, използващ суфикс.
  • Наставката - Това е низът, въз основа на който се извършва операцията за съвпадение. Очаква се вероятният низ да завършва с посочения низ.

Например,Нека отново разгледаме „Текстово поле за парола“, така че съответният CSS селектор ще бъде:

css = input # Passwd (име $ = ’wd’)

Съвпадение на подниз

Използва се, за да съответства на низа с помощта на съответстващ подниз.

Синтаксис

css =

  • * - Символична нотация за съвпадение на низ, използващ подниз.
  • Подниз - Това е низът, въз основа на който се извършва операцията за съвпадение. Очаква се вероятният низ да има посочения модел на низ.

Например,позволява отново да разгледаме „Текстово поле за парола“, така че съответният CSS селектор ще бъде:

css = input # Passwd (име $ = ’wd’)

CSS селектор: Вътрешен текст

Вътрешният текст ни помага да идентифицираме и създадем CSS Selector, използвайки модел на низове, който HTML тагът показва на уеб страницата.

Помислете „Нуждаете се от помощ?“ хипервръзка под формата за вход на gmail.com.

Закрепващият маркер, представляващ хипервръзката, има текст, затворен вътре. По този начин този текст може да се използва за създаване на CSS селектор за достъп до определения уеб елемент.

Синтаксис:

css =

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

Това е една от най-често използваните стратегии за намиране на уеб елемент поради неговия опростен синтаксис.

Поради факта, че създаването на CSS Selector и Xpath изисква много усилия и практика, така че процесът се упражнява само от по-сложни и обучени потребители.

Следващ урок # 7 : Продължавайки напред със следващия ни урок, бихме се възползвали от възможността да ви запознаем с разширение на стратегиите за локализиране. По този начин в следващия урок ще изучим механизъм за намиране на уеб елементи в Google Chrome и Internet Explorer.

как да се възпроизведе ударна вълна флаш файл -

Покриваме Selenium Locators по-подробно, тъй като това е важна част от създаването на Selenium Script.

Кажете ни вашите запитвания / коментари по-долу.

Препоръчително четене

^