CSS Selector in Selenium

Co je CSS selektor v Selenium?

A CSS Selector in Selenium je řetězcový vzor, ​​který identifikuje webový prvek pomocí kombinace HTML tagu, ID, třídy a atributů. CSS selektory jsou o něco pokročilejší než vyhledávání podle ID nebo názvu, ale jsou nejoblíbenější strategií mezi zkušenými uživateli. Selenium uživatelé, protože mohou dosáhnout prvků, které nemají vůbec žádný atribut ID nebo Name.

Selektory CSS v Selenium se vyskytují v mnoha podobách, ale tato příručka se zaměřuje na pět nejběžnějších vzorů používaných v Selenium SDI:

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

Při použití této strategie v Selenium IDE, vždy předponou Target krabice s „css=„jak je ukázáno v každém níže uvedeném příkladu.“

Proč používat CSS selektory v Selenium?

Selektory CSS jsou preferovanou strategií pro vyhledávání pro mnoho Selenium automatizační inženýři, protože vyvažují rychlost, flexibilitu a čitelnost. Moderní webové aplikace často používají dynamicky generovaná ID nebo zcela odstraňují atributy názvu, takže selektory CSS jsou jediným spolehlivým způsobem, jak cílit na konkrétní prvek na stránce.

Mezi hlavní výhody používání CSS selektorů patří:

• Výkon: Selektory CSS jsou zpracovávány nativním enginem prohlížeče, takže se provádějí rychleji než ekvivalentní výrazy XPath, zejména ve starších prohlížečích, jako je Internet Explorer.
• Flexibilita: Kombinují logiku tagů, tříd, atributů a částečných shod, což testerům umožňuje cílit na prvky, které nemají stabilní ID.
• Čitelnost: Syntaxe odráží způsob, jakým vývojáři již píší pravidla CSS, což zkracuje dobu učení jak pro QA inženýry, tak pro front-end týmy.
• Stabilita napříč prohlížeči: Selektory CSS se chovají v celém Chromu konzistentně, Firefox, Edge a Safari, což snižuje počet selhání nestabilních testů.

Tag a ID – CSS selektor

Tento příklad používá textové pole E-mail na přihlašovací stránce Facebooku. Prvek má ID „e-mail„a k němu se již přistupovalo v sekci „Vyhledávání podle ID“. Nyní je stejný prvek cílen pomocí Selenium Selektor CSS s atributem ID.

Syntax

css=tag#id

• tag = HTML tag prvku, ke kterému se přistupuje
• # = znak křížku, který musí být vždy přítomen při použití 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.comPomocí nástrojů DevTools ve vašem prohlížeči (nebo staršího nástroje, jako je Firebug) zkontrolujte textové pole „E-mail nebo telefon“.

Všimněte si, že HTML tag je „vstup„a jeho ID je „e-mail„. Kompletní CSS selektor se tedy stává „css=vstup#email".

Krok 2) Zadejte „css=vstup#email" do Target krabička Selenium IDE a klikněte na tlačítko Najít. Selenium IDE zvýrazní odpovídající prvek na stránce.

Tag a třída – CSS selektor

Selektor CSS v Selenium který používá HTML tag a název třídy, se řídí stejnou myšlenkou jako tag a ID, ale znak křížku nahrazuje tečka (.).

Syntax

css=tag.class

• tag = HTML tag prvku, ke kterému se přistupuje
• . = tečka, která musí být vždy přítomna při použití CSS selektoru s třídou
• class = třída prvku, ke kterému se přistupuje

Krok 1) Otevřít demo stránku https://demo.guru99.com/test/facebook.html a zkontrolujte textové pole „E-mail nebo telefon“. Všimněte si, že HTML tag je „vstup„a jeho třída je „vstupní text".

Krok 2) In Selenium IDE, zadejte „css=input.inputtext"V Target a klikněte na Najít. Selenium IDE rozpozná textové pole E-mail nebo Telefon.

Vezměte prosím na vědomí, že pokud více prvků sdílí stejnou HTML značku a třídu, je rozpoznán pouze první odpovídající prvek ve zdrojovém kódu. Prohlédněte si textové pole Heslo na stejné stránce a všimněte si, že sdílí stejnou třídu jako textové pole E-mail nebo Telefon.

Na předchozím obrázku bylo zvýrazněno pouze textové pole E-mail nebo Telefon, protože se ve zdrojovém kódu stránky zobrazuje jako první.

Tag a atribut – CSS selektor

Tato strategie kombinuje HTML tag se specifickým atributem patřícím k prvku, ke kterému chcete přistupovat.

Syntax

css=tag[attribute=value]

• tag = HTML tag prvku, ke kterému se přistupuje
• [ a ] ​​= hranaté závorky, které obalují atribut a jeho odpovídající hodnotu
• attribute = atribut, který se má použít. Vyberte takový, který je pro daný element jedinečný, například name nebo id.
• hodnota = odpovídající hodnota zvoleného atributu.

Krok 1) Přejděte na Mercury Stránka s registrací na prohlídky https://demo.guru99.com/test/newtours/register.php a prohlédněte si textové pole „Příjmení“. Všimněte si jeho HTML tagu („input“) a atributu name („lastName“).

Krok 2) In Selenium IDE, zadejte „css=input[name=lastName]"V Target a klikněte na Najít. Selenium IDE úspěšně vyhledá pole Příjmení.

Pokud více prvků sdílí stejný HTML tag a atribut, je rozpoznán pouze první z nich. Chování je identické s vyhledáváním prvků se stejnou značkou a třídou.

Tag, třída a atribut – CSS selektor

Syntax

css=tag.class[attribute=value]

• tag = HTML tag prvku, ke kterému se přistupuje
• . = tečka, která musí být vždy přítomna při použití CSS selektoru s třídou
• class = třída prvku, ke kterému se přistupuje
• [ a ] ​​= hranaté závorky, které obalují konkrétní atribut a jeho odpovídající hodnotu
• attribute = atribut, který se má použít. Vyberte takový, který je pro daný element jedinečný, například name nebo id.
• hodnota = odpovídající hodnota zvoleného atributu.

Krok 1) Otevřít demo stránku https://demo.guru99.com/test/facebook.html a zkontrolujte vstupní pole „E-mail nebo telefon“ a „Heslo“. Všimněte si jejich HTML tagu, třídy a atributů. Tento příklad používá „tabindexatribut „“.

Krok 2) Nejprve otevřete textové pole „E-mail nebo telefon“ s hodnotou tabindex 1. Zadejte „css=input.inputtext[tabindex=1]“Do Selenium IDE Target a klikněte na Najít. Pole E-mail nebo Telefon se zvýrazní.

Krok 3) Chcete-li cílit na pole pro zadání hesla, jednoduše nahraďte hodnotu tabindex. Zadejte „css=input.inputtext[tabindex=2]"V Target a klikněte na Najít. Selenium IDE úspěšně vyhledá textové pole Heslo.

Vnitřní text – CSS selektor

HTML štítky zřídka dostávají atributy id, name nebo class. Jak k nim tedy přistupujete v SeleniumOdpověď spočívá v jejich vnitřním textu. Vnitřní texty jsou skutečné řetězcové vzory, které HTML popisek zobrazuje na stránce.

Syntax

css=tag:contains("inner text")

• tag = HTML tag prvku, ke kterému se přistupuje
• vnitřní text = viditelný textový obsah elementu

Krok 1) Přejděte na Mercury Domovská stránka prohlídek https://demo.guru99.com/test/newtours/ a prohlédněte si štítek „Heslo“. Všimněte si jeho HTML tagu („v tomto případě font“) a všimněte si, že element nemá žádné atributy class, id ani name.

Krok 2) Typ css=font:contains(“Heslo:”) do Selenium IDE Target a klikněte na Najít. Selenium IDE vyhledá popisek hesla, jak je znázorněno níže.

Krok 3) Tentokrát nahraďte vnitřní text slovem „Boston“, aby Target stává se „css=font:contains(„Boston“)„. Klikněte na Najít. Štítek „Boston do San Francisca“ je zvýrazněn, což ukazuje, že Selenium IDE dokáže najít dlouhý popisek, i když je zadáno pouze první slovo jeho vnitřního textu.

CSS selektor vs. XPath v Selenium

Selektory CSS i XPath se používají k identifikaci webových prvků v Selenium, přesto mají různé silné stránky. Níže uvedená tabulka porovnává obě strategie lokalizace v klíčových dimenzích:

Kritéria	Selektor CSS	XPath
Rychlost	Rychlejší, běží na nativním enginu prohlížeče	Pomalejší, zejména ve starších prohlížečích
Vedení	Pouze přeposílání (od nadřazeného k podřízenému)	Vpřed a vzad (od dítěte k rodiči)
Syntax	Kratší a podobná pravidlům CSS	Delší, hierarchické výrazy cest
Shoda textu	Omezeno na pseudotřídu :contains()	Silné funkce text() a contains()
Nejlepší pro	Statické rozvržení a moderní webové aplikace	Komplexní procházení DOM a textové lokátory

Nejlepší postupy pro psaní CSS selektorů v Selenium

Psaní spolehlivých CSS selektorů jde nad rámec znalosti syntaxe. Následující postupy pomáhají testerům vytvářet stabilní a snadno udržovatelné Selenium skripty, které přežijí změny uživatelského rozhraní:

1. Preferujte jedinečné atributy: Vždy vyberte atributy id, data-test-id nebo name, které jsou explicitně přidány pro automatizaci. Tyto atributy zůstávají stabilní i při změně vizuálního rozvržení.
2. Vyhněte se příliš vnořeným selektorům: Dlouhé řetězce, jako např. div > div > ul > li > a snadno se zlomí, když vývojáři refaktorují značkování. Udržujte selektory co nejkratší.
3. Používejte částečné shody moudře: Vzory jako například [class*="btn-primary"] tolerují malé změny názvů tříd, ale mohou také odpovídat nezamýšleným prvkům.
4. Vyhněte se lokátorům založeným na indexech: Selektori jako nth-child(3) jsou křehké, protože přidání sourozeneckého prvku posune každou pozici.
5. Ověření selektorů v DevTools: Před spuštěním a Selenium skript, vložte selektor do konzole Chrome DevTools pomocí document.querySelector() pro potvrzení, že vrací přesně jeden prvek.
6. Kombinujte atributy pro jedinečnost: Pokud je třída sdílena mnoha prvky, přidejte filtr atributů, například input.form-control[name="email"] aby se cíl jednoznačně vyjasnil.
7. Dokumentace a opětovné použití: Centralizujte selektory uvnitř třídy Page Object tak, aby jedna aktualizace opravila každý test, který odkazuje na stejný prvek.

Dodržování těchto pokynů snižuje nestálost, zvyšuje rychlost provádění testů a usnadňuje... Selenium apartmány se časem snadněji udržují.

Shrnutí: Stručný přehled syntaxe selektorů CSS

Níže uvedená tabulka shrnuje všechny Selenium Vzor selektoru CSS popsaný v této příručce:

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]
Vnitřní text	css=tag:obsahuje(„text“)	css=font:contains(“Heslo:”)

Nejčastější dotazy