CSS селектор в Selenium

Какво е CSS селектор?

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

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

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

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

таг и id – CSS селектор

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

Синтаксис

css=tag#id

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

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

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

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

Таг и идентификатор - CSS селектор

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

Таг и идентификатор - CSS селектор

таг и клас – CSS селектор

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

Синтаксис

css=tag.class

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

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

Таг и клас - CSS селектор

Стъпка 2) In Selenium IDE, въведете „css=input.inputtext“ в Target и щракнете върху Намери. Selenium IDE трябва да може да разпознае текстовото поле Имейл или Телефон.

Таг и клас - CSS селектор

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

Таг и клас - CSS селектор

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

Таг и клас - CSS селектор

таг и атрибут – CSS селектор

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

Синтаксис

css=tag[attribute=value]

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

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

Таг и атрибут - CSS селектор

Стъпка 2) In Selenium IDE, въведете „css=input[name=lastName]“ в Target и щракнете върху Намери. Selenium IDE трябва да има успешен достъп до полето за фамилно име.

Таг и атрибут - CSS селектор

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

етикет, клас и атрибут – CSS селектор

Синтаксис

css=tag.class[attribute=value]

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

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

Таг, клас и атрибут - CSS селектор

Стъпка 2) Първо ще имаме достъп до текстовото поле „Имейл или телефон“. Така ще използваме стойност на tabindex 1. Въведете „css=input.inputtext[tabindex=1]“ в Selenium IDE Target и щракнете върху Намери. Полето за въвеждане „Имейл или телефон“ трябва да бъде маркирано.

Таг, клас и атрибут - CSS селектор

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

Таг, клас и атрибут - CSS селектор

вътрешен текст – CSS селектор

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

Синтаксис

css=tag:contains("inner text")

  • етикет = HTML етикетът на елемента, до който се осъществява достъп
  • вътрешен текст = вътрешният текст на елемента

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

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

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

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

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

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

Oбобщение

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

Начин на доставка Target Синтаксис Пример
Етикет и ID css=tag#id css=въвеждане#имейл
Етикет и клас css=tag.class css=input.inputtext
Етикет и атрибут css=tag[атрибут=стойност] css=вход[име=фамилия]
Етикет, клас и атрибут css=tag.classattribute=стойност] css=input.inputtext[tabindex=1]