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“.
Стъпка 2) Въведете „css=input#email“ в Target кутия от Selenium IDE и щракнете върху бутона Намери. Selenium IDE трябва да може да подчертае този елемент.
таг и клас – CSS селектор
CSS селектор в Selenium използването на HTML таг и име на клас е подобно на използването на таг и ID, но в този случай се използва точка (.) вместо знак за решетка.
Синтаксис
css=tag.class
- етикет = HTML етикетът на елемента, до който се осъществява достъп
- . = знакът точка. Това винаги трябва да присъства, когато използвате CSS селектор с клас
- class = класът на елемента, до който се осъществява достъп
Стъпка 1) Отидете на демонстрационната страница http://demo.guru99.com/test/facebook.html
и използвайте Firebug, за да проверите текстовото поле „Имейл или телефон“. Забележете, че неговият HTML таг е „вход“, а класът му е „въведен текст“.
Стъпка 2) In Selenium IDE, въведете „css=input.inputtext“ в Target и щракнете върху Намери. Selenium IDE трябва да може да разпознае текстовото поле Имейл или Телефон.
Обърнете внимание, че когато няколко елемента имат един и същ HTML таг и име, само първият елемент в изходния код ще бъде разпознат. Използвайки Firebug, проверете текстовото поле за парола във Facebook и забележете, че има същото име като текстовото поле за имейл или телефон.
Причината, поради която само текстовото поле Имейл или Телефон е маркирано в предишната илюстрация, е, че то е на първо място в изходния код на страницата на Facebook.
таг и атрибут – CSS селектор
Тази стратегия използва HTML тага и специфичен атрибут на елемента, до който ще се осъществява достъп.
Синтаксис
css=tag[attribute=value]
- етикет = HTML етикетът на елемента, до който се осъществява достъп
- [ и ] = квадратни скоби, в които ще бъдат поставени конкретен атрибут и съответната му стойност
- атрибут = атрибутът, който ще се използва. Препоръчително е да използвате атрибут, който е уникален за елемента, като име или идентификатор.
- стойност = съответната стойност на избрания атрибут.
Стъпка 1) Отидете до Mercury Страница за регистрация на Tours http://demo.guru99.com/test/newtours/register.php
и проверете текстовото поле „Фамилия“. Обърнете внимание на неговия HTML таг („въведено“ в този случай) и неговото име („фамилно име“).
Стъпка 2) In Selenium IDE, въведете „css=input[name=lastName]“ в Target и щракнете върху Намери. Selenium IDE трябва да има успешен достъп до полето за фамилно име.
Когато няколко елемента имат един и същ HTML таг и атрибут, само първият ще бъде разпознат. Това поведение е подобно на намирането на елементи с помощта на CSS селектори със същия етикет и клас.
етикет, клас и атрибут – CSS селектор
Синтаксис
css=tag.class[attribute=value]
- етикет = HTML етикетът на елемента, до който се осъществява достъп
- . = знакът точка. Това винаги трябва да присъства, когато използвате CSS селектор с клас
- class = класът на елемента, до който се осъществява достъп
- [ и ] = квадратни скоби, в които ще бъдат поставени конкретен атрибут и съответната му стойност
- атрибут = атрибутът, който ще се използва. Препоръчително е да използвате атрибут, който е уникален за елемента, като име или идентификатор.
- стойност = съответната стойност на избрания атрибут.
Стъпка 1) Отидете на демонстрационната страница http://demo.guru99.com/test/facebook.html
и използвайте Firebug, за да проверите полетата за въвеждане „Имейл или телефон“ и „Парола“. Обърнете внимание на техния HTML таг, клас и атрибути. За този пример ще изберем техните атрибути „tabindex“.
Стъпка 2) Първо ще имаме достъп до текстовото поле „Имейл или телефон“. Така ще използваме стойност на tabindex 1. Въведете „css=input.inputtext[tabindex=1]“ в Selenium IDE Target и щракнете върху Намери. Полето за въвеждане „Имейл или телефон“ трябва да бъде маркирано.
Стъпка 3) За достъп до полето за въвеждане на парола просто заменете стойността на атрибута tabindex. Въведете „css=input.inputtext[tabindex=2]“ в Target и щракнете върху бутона Намери. Selenium IDE трябва да може успешно да идентифицира текстовото поле за парола.
вътрешен текст – CSS селектор
Както може би сте забелязали, HTML етикетите рядко получават идентификатор, име или атрибути на клас. И така, как да имаме достъп до тях? Отговорът е чрез използването на техните вътрешни текстове. Вътрешните текстове са действителните модели на низове, които HTML етикетът показва на страницата.
Синтаксис
css=tag:contains("inner text")
- етикет = HTML етикетът на елемента, до който се осъществява достъп
- вътрешен текст = вътрешният текст на елемента
Стъпка 1) Отидете до Mercury Начална страница на Tours http://demo.guru99.com/test/newtours/
и използвайте Firebug, за да проучите етикета „Парола“. Обърнете внимание на неговия HTML таг (който в този случай е „шрифт“) и забележете, че той няма атрибути клас, идентификатор или име.
Стъпка 2) Тип css=font:contains(“Парола:”) в Selenium IDE Target и щракнете върху Намери. Selenium IDE трябва да има достъп до етикета за парола, както е показано на изображението по-долу.
Стъпка 3) Този път заменете вътрешния текст с „Бостън“, така че вашият Target сега ще стане „css=font:contains(„Boston“)“. Кликнете Намери. Трябва да забележите, че етикетът „Бостън до Сан Франциско“ става подчертан. Това ви показва това Selenium IDE има достъп до дълъг етикет, дори ако току-що сте посочили първата дума от неговия вътрешен текст.
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] |