CSS Selector in Selenium

Co je selektor CSS?

Selektory CSS v Selenium jsou vzory řetězců používané k identifikaci prvku na základě kombinace značky HTML, id, třídy a atributů. Vyhledání pomocí selektorů CSS v Selenium je složitější než předchozí metody, ale je to nejběžnější lokalizační strategie pokročilých Selenium uživatelům, protože má přístup i k těm prvkům, které nemají žádné ID ani jméno.

Selektory CSS v Selenium mají mnoho formátů, ale my se zaměříme pouze na ty nejběžnější. Různé typy CSS Locator v Selenium IDE

• Tag a ID
• Tag a třída
• Značka a atribut
• Značka, třída a atribut
• Vnitřní text

Při použití této strategie vždy předponu the Target pole s „css=“, jak bude ukázáno v následujících příkladech.

tag a id – CSS Selector

V tomto příkladu opět použijeme textové pole E-mail na Facebooku. Jak si pamatujete, má ID „e-mail“ a již jsme k němu přistupovali v části „Lokalizace podle ID“. Tentokrát použijeme a Selenium Selektor CSS s ID při přístupu ke stejnému prvku.

Syntax

css=tag#id

• tag = HTML tag prvku, ke kterému se přistupuje
• # = znak hash. To by mělo být vždy přítomno při použití a Selenium CSS Selector s ID
• id = ID prvku, ke kterému se přistupuje

Mějte na paměti, že před ID vždy předchází znak hash (#).

Krok 1) přejděte na www.facebook.com. Pomocí Firebugu prozkoumejte textové pole „E-mail nebo telefon“.

V tomto okamžiku si uvědomte, že značka HTML je „vstup“ a její ID je „e-mail“. Naše syntaxe tedy bude „css=input#email“.

Krok 2) Do pole zadejte „css=input#email“. Target krabička Selenium IDE a klikněte na tlačítko Najít. Selenium IDE by mělo být schopné tento prvek zvýraznit.

tag a třída – CSS Selector

CSS Selector in Selenium použití značky HTML a názvu třídy je podobné jako použití značky a ID, ale v tomto případě je místo znaku hash použita tečka (.).

Syntax

css=tag.class

• tag = HTML tag prvku, ke kterému se přistupuje
• . = znak tečky. To by mělo být vždy přítomno při použití selektoru CSS s třídou
• class = třída prvku, ke kterému se přistupuje

Krok 1) Přejděte na demo stránku http://demo.guru99.com/test/facebook.html a pomocí Firebugu zkontrolujte textové pole „E-mail nebo telefon“. Všimněte si, že jeho HTML tag je „input“ a jeho třída je „inputtext“.

Krok 2) In Selenium IDE, do pole zadejte „css=input.inputtext“. Target a klikněte na Najít. Selenium IDE by mělo být schopné rozpoznat textové pole E-mail nebo Telefon.

Vezměte na vědomí, že když má více prvků stejnou značku HTML a název, bude rozpoznán pouze první prvek ve zdrojovém kódu. Pomocí Firebugu zkontrolujte textové pole Heslo na Facebooku a všimněte si, že má stejný název jako textové pole E-mail nebo Telefon.

Důvod, proč bylo na předchozím obrázku zvýrazněno pouze textové pole E-mail nebo Telefon, je ten, že je na prvním místě ve zdroji stránky Facebooku.

tag a atribut – CSS Selector

Tato strategie používá značku HTML a specifický atribut prvku, ke kterému se má přistupovat.

Syntax

css=tag[attribute=value]

• tag = HTML tag prvku, ke kterému se přistupuje
• [ a ] ​​= hranaté závorky, do kterých bude umístěn konkrétní atribut a jeho odpovídající hodnota
• atribut = atribut, který se má použít. Je vhodné použít atribut, který je pro prvek jedinečný, jako je jméno nebo ID.
• hodnota = odpovídající hodnota zvoleného atributu.

Krok 1) přejděte na Mercury Stránka registrace zájezdů http://demo.guru99.com/test/newtours/register.php a zkontrolujte textové pole „Příjmení“. Všimněte si jeho HTML tagu (v tomto případě „vstup“) a jeho názvu („lastName“).

Krok 2) In Selenium IDE, zadejte „css=input[name=lastName]“ do pole Target a klikněte na Najít. Selenium IDE by mělo mít úspěšně přístup k poli Příjmení.

Pokud má více prvků stejnou značku HTML a atribut, bude rozpoznán pouze první. Toto chování je podobné hledání prvků pomocí selektorů CSS se stejnou značkou a třídou.

tag, class a atribut – CSS Selector

Syntax

css=tag.class[attribute=value]

• tag = HTML tag prvku, ke kterému se přistupuje
• . = znak tečky. To by mělo být vždy přítomno při použití selektoru CSS s třídou
• class = třída prvku, ke kterému se přistupuje
• [ a ] ​​= hranaté závorky, do kterých bude umístěn konkrétní atribut a jeho odpovídající hodnota
• atribut = atribut, který se má použít. Je vhodné použít atribut, který je pro prvek jedinečný, jako je jméno nebo ID.
• hodnota = odpovídající hodnota zvoleného atributu.

Krok 1) Přejděte na demo stránku http://demo.guru99.com/test/facebook.html a pomocí Firebugu zkontrolujte vstupní pole „E-mail nebo Telefon“ a „Heslo“. Všimněte si jejich HTML tagu, třídy a atributů. Pro tento příklad vybereme jejich atributy 'tabindex'.

Krok 2) Nejprve vstoupíme do textového pole „E-mail nebo Telefon“. Použijeme tedy hodnotu tabindex 1. Zadejte „css=input.inputtext[tabindex=1]“ do Selenium IDE Target a klikněte na Najít. Vstupní pole „E-mail nebo telefon“ by mělo být zvýrazněno.

Krok 3) Chcete-li získat přístup k vstupnímu poli Heslo, jednoduše nahraďte hodnotu atributu tabindex. Do pole zadejte „css=input.inputtext[tabindex=2]“. Target a klikněte na tlačítko Najít. Selenium IDE musí být schopno úspěšně identifikovat textové pole Heslo.

vnitřní text – CSS Selector

Jak jste si mohli všimnout, štítkům HTML se zřídka přidělují atributy id, name nebo class. Jak se k nim tedy dostaneme? Odpověď spočívá v použití jejich vnitřních textů. Vnitřní texty jsou skutečné vzory řetězců, které štítek HTML zobrazuje na stránce.

Syntax

css=tag:contains("inner text")

• tag = HTML tag prvku, ke kterému se přistupuje
• vnitřní text = vnitřní text prvku

Krok 1) přejděte na Mercury Domovská stránka Tours http://demo.guru99.com/test/newtours/ a pomocí Firebugu prozkoumejte štítek „Heslo“. Všimněte si jeho HTML tagu (což je v tomto případě „font“) a všimněte si, že nemá žádné atributy class, id nebo name.

Krok 2) Typ css=font:contains(“Heslo:”) do Selenium IDE Target a klikněte na Najít. Selenium IDE by mělo mít přístup k štítku Password, jak je znázorněno na obrázku níže.

Krok 3) Tentokrát nahraďte vnitřní text textem „Boston“, takže váš Target se nyní změní na „css=font:contains(“Boston”)”. Klikněte na Najít. Měli byste si všimnout, že se zvýrazní štítek „Boston to San Francisco“. To vám ukazuje Selenium IDE má přístup k dlouhému štítku, i když jste právě uvedli první slovo jeho vnitřního textu.

Shrnutí

Syntaxe pro lokalizaci podle použití selektoru CSS

Metoda	Target Syntax	Příklad
Tag a ID	css=tag#id	css=vstup#email
Značka a třída	css=tag.class	css=input.inputtext
Značka a atribut	css=tag[attribute=value]	css=input[name=lastName]
Značka, třída a atribut	css=tag.class[attribute=value]	css=input.inputtext[tabindex=1]