Menu

Jak používat selektor CSS k identifikaci webových prvků pro skripty selenu - výuka selenu č. 6

how use css selector

Vyzkoušejte Náš Nástroj Pro Odstranění Problémů

V našem předchozí tutoriál selenu , naučili jsme se různé typy lokátorů. Také jsme se naučili, jak používat: ID, ClassName, Name, Link Text a XPath lokátory pro identifikaci webových prvků na webové stránce.

V návaznosti na to se dnes budeme učit jak používat CSS Selector jako vyhledávač . Toto je náš 6. tutoriál v našem bezplatná série školení selenu .

Použití nástroje CSS Selector jako vyhledávače:

CSS Selector je kombinace selektoru prvků a hodnoty selektoru, která identifikuje webový prvek na webové stránce. Složená hodnota selektoru prvku a hodnoty selektoru je známá jako Selektorový vzor.

CSS Selector Selenium Locator

Selektorový vzor je konstruován pomocí značek HTML, atributů a jejich hodnot. Ústřední téma postupu vytváření CSS Selector a Xpath jsou si velmi podobné, což je základem jediného rozdílu v jejich konstrukčním protokolu.

Stejně jako Xpath může selektor CSS také vyhledávat webové prvky, které nemají ID, třídu ani název.

jaký typ softwarových programů jsou access, oracle, db2, mysql a sql server?

Nyní tedy pojďme diskutovat o primitivních typech selektorů CSS:

Použití nástroje CSS Selector jako vyhledávače

Co se naučíte:

Výběr CSS: ID

V této ukázce bychom přistupovali k textovému poli „E-mail“, které se nachází ve přihlašovacím formuláři na Gmail.com.

Textové pole E-mail má atribut ID, jehož hodnota je definována jako „E-mail“. Atribut ID a jeho hodnota lze tedy použít k vytvoření nástroje CSS Selector pro přístup k textovému poli e-mailu.

Vytváření selektoru CSS pro webový prvek

Krok 1 : Vyhledejte / zkontrolujte webový prvek (v našem případě textové pole „Email“) a všimněte si, že značka HTML je „input“ a hodnota atributu ID je „Email“ a oba společně odkazují na „Email Textbox“. Výše uvedená data by tedy byla použita k vytvoření CSS Selector.

Použití nástroje CSS Selector jako vyhledávače 2

Ověřte hodnotu lokátoru

Krok 1 : Zadejte „css = input # email“, tj. Hodnotu lokátoru v cílovém poli v Selenium IDE a klikněte na tlačítko Najít. Všimněte si, že textové pole E-mail bude zvýrazněno.

Použití nástroje CSS Selector jako vyhledávače 3

Syntax

css =

  • Značka HTML - Jedná se o značku, která se používá k označení webového prvku, ke kterému chceme přistupovat.
  • # - Znak hash se používá k symbolizaci atributu ID. Je-li k vytvoření CSS Selectoru použit atribut ID, je povinné použít znak hash.
  • Hodnota atributu ID - Je to hodnota atributu ID, ke které se přistupuje.
  • Hodnotě ID vždy předchází znak hash.

Poznámka: Platí také pro jiné typy selektorů CSS

  • Při zadávání selektoru CSS v cílovém textovém poli selenového IDE jej vždy nezapomeňte uvést předponou „css =“.
  • Pořadí výše uvedených artefaktů je neměnné.
  • Pokud dva nebo více webových prvků má stejnou značku HTML a hodnotu atributu, bude identifikován první prvek označený ve zdroji stránky.

Výběr CSS: Třída

V této ukázce bychom přistupovali k zaškrtávacímu políčku „Zůstaňte přihlášeni“ pod přihlašovacím formulářem na gmail.com.

Zaškrtávací políčko „Zůstaňte přihlášeni“ má atribut třídy, jehož hodnota je definována jako „pamatovat“. Atribut Class a jeho hodnota lze tedy použít k vytvoření selektoru CSS pro přístup k určenému webovému prvku.

Nalezení prvku pomocí třídy jako selektoru CSS je velmi podobné použití ID, osamělý rozdíl spočívá v jejich tvorbě syntaxe.

Vytvoření selektoru CSS pro webový prvek

Krok 1 : Vyhledejte / zkontrolujte webový prvek (v našem případě zaškrtávací políčko „Zůstaňte přihlášeni“) a všimněte si, že značka HTML je „štítek“ a hodnota atributu ID je „zapamatovat si“ a oba společně odkazují na „Zůstaňte podepsáni zaškrtávací políčko “.

Ověřte hodnotu lokátoru

Krok 1 : Napište „css = label.remember“, tj. Hodnotu lokátoru do cílového pole v Selenium IDE a klikněte na tlačítko Najít. Všimněte si, že políčko „Zůstávat přihlášeno“ bude zvýrazněno.

Použití nástroje CSS Selector jako vyhledávače 4

Syntax

css =

  • . - Tečka se používá k symbolizaci atributu Class. Je-li k vytvoření selektoru CSS používán atribut Class, je povinné použít tečkovaný znak.
  • Hodnotě třídy vždy předchází tečka.

Výběr CSS: Atribut

V této ukázce bychom přistupovali k tlačítku „Přihlásit se“ pod přihlašovacím formulářem na gmail.com.

Tlačítko „Přihlásit“ má atribut typu, jehož hodnota je definována jako „odeslat“. Atribut typu a jeho hodnota lze tedy použít k vytvoření selektoru CSS pro přístup k určenému webovému prvku.

Vytvoření selektoru CSS pro webový prvek

Krok 1 : Vyhledejte / zkontrolujte webový prvek (v našem případě tlačítko „Přihlásit se“) a všimněte si, že značka HTML je „vstup“, atribut je typ a hodnota atributu typ jsou „odeslat“ a všichni společně odkazují na tlačítko „Přihlásit“.

Ověřte hodnotu lokátoru

Krok 1 : Zadejte „css = input (type =‘ submit ‘)“, tj. Hodnotu lokátoru v cílovém poli v Selenium IDE a klikněte na tlačítko Najít. Všimněte si, že tlačítko „Přihlásit“ bude zvýrazněno.

Použití nástroje CSS Selector jako vyhledávače 5

Syntax

css =

  • Atribut - Je to atribut, který chceme použít k vytvoření nástroje CSS Selector. Může hodnotu, typ, název atd. Doporučuje se vybrat atribut, jehož hodnota jednoznačně identifikuje webový prvek.
  • Hodnota atributu - Je to hodnota atributu, ke kterému se přistupuje.

Výběr CSS: ID / třída a atribut

V této ukázce bychom přistupovali k textovému poli „Heslo“, které se nachází ve přihlašovacím formuláři na gmail.com.

Textové pole „Heslo“ obsahuje atribut ID, jehož hodnota je definována jako „Passwd“, zadejte atribut, jehož hodnota je definována jako „heslo“. Atribut ID, atribut typu a jejich hodnoty lze tedy použít k vytvoření nástroje CSS Selector pro přístup k určenému webovému prvku.

html otázky a odpovědi pro osvěžovače

Vytvoření selektoru CSS pro webový prvek

Krok 1 : Vyhledejte / zkontrolujte webový prvek (v našem případě textové pole „Heslo“) a všimněte si, že značka HTML je „vstup“, atributy jsou ID a typ a jejich odpovídající hodnoty jsou „Passwd“ a „heslo“ a všechny dohromady uveďte odkaz na textové pole „Heslo“.

Ověřte hodnotu lokátoru

Krok 1 : Zadejte „css = input # Passwd (name =‘ Passwd ‘)“, tj. Hodnotu lokátoru v cílovém poli v Selenium IDE a klikněte na tlačítko Najít. Všimněte si, že textové pole „Heslo“ bude zvýrazněno.

Použití nástroje CSS Selector jako vyhledávače 5

Syntax

css =

V syntaxi lze také uvést dva nebo více atributů.Například, „Css = input # Passwd (type =‘ password ‘) (name =‘ Passwd ’)“.

Výběr CSS: Podřetězec

CSS v selenu umožňuje shodu s částečným řetězcem a tím odvození velmi zajímavé funkce pro vytvoření selektorů CSS pomocí podřetězců. Existují tři způsoby, jak lze selektory CSS vytvořit na základě mechanismu použitého k porovnání podřetězce.

Druhy mechanismů

Všechny spodní mechanismy mají symbolický význam.

  • Přiřaďte předponu
  • Porovnejte příponu
  • Přiřaďte podřetězec

Pojďme si o nich podrobně promluvit.

Přiřaďte předponu

Používá se k korespondenci s řetězcem pomocí odpovídající předpony.

Syntax

css =

  • ^ - Symbolický zápis, který odpovídá řetězci pomocí předpony.
  • Předpona - Je to řetězec, na jehož základě se provádí operace shody. Očekává se, že pravděpodobný řetězec bude začínat zadaným řetězcem.

Například: Zvažme „textové pole hesla“, takže odpovídající selektor CSS bude:

css = input # Passwd (name ^ = ‘Pass’)

Porovnejte příponu

Používá se k korespondenci s řetězcem pomocí odpovídající přípony.

Syntax

css =

  • # - Symbolický zápis, který odpovídá řetězci pomocí přípony.
  • Přípona - Je to řetězec, na jehož základě se provádí operace shody. Očekává se, že pravděpodobný řetězec končí zadaným řetězcem.

Například,Pojďme znovu zvážit „Textové pole hesla“, takže odpovídající CSS Selector bude:

css = input # Passwd (name $ = ‘wd‘)

Přiřaďte podřetězec

Používá se k korespondenci s řetězcem pomocí odpovídajícího podřetězce.

Syntax

css =

  • * - Symbolická notace, která odpovídá řetězci pomocí podřetězce.
  • Dílčí řetězec - Je to řetězec, na jehož základě se provádí operace shody. Očekává se, že pravděpodobný řetězec bude mít zadaný vzor řetězce.

Například,pojďme znovu zvážit „Textové pole hesla“, takže odpovídající selektor CSS bude:

css = input # Passwd (name $ = ‘wd‘)

Výběr CSS: Vnitřní text

Vnitřní text nám pomáhá identifikovat a vytvořit CSS Selector pomocí řetězcového vzoru, který značka HTML projevuje na webové stránce.

Zvažte: „Potřebujete pomoc?“ hypertextový odkaz pod přihlašovacím formulářem na gmail.com.

Kotevní značka představující hypertextový odkaz má uvnitř uzavřený text. Tento text lze tedy použít k vytvoření selektoru CSS pro přístup k určenému webovému prvku.

Syntax:

css =

  • : - Tečka se používá k symbolizaci obsahuje metodu
  • Obsahuje - Je to hodnota atributu Class, ke které se přistupuje.
  • Text - Text, který se zobrazuje kdekoli na webové stránce bez ohledu na její umístění.

Toto je jedna z nejčastěji používaných strategií k vyhledání webového prvku kvůli jeho zjednodušené syntaxi.

Vzhledem k tomu, že vytváření CSS Selector a Xpath vyžaduje hodně úsilí a praxe, je tento proces prováděn pouze sofistikovanějšími a vyškolenými uživateli.

Další výuka č. 7 : Pokračujeme v našem dalším výukovém programu, využili bychom příležitosti a představili vám rozšíření lokalizačních strategií. V dalším tutoriálu bychom tedy studovali mechanismus k vyhledání webových prvků v prohlížečích Google Chrome a Internet Explorer.

jak se stát vedoucí knihou

Podrobněji se věnujeme lokátorům selenu, protože je důležitou součástí tvorby skriptů selenu.

Sdělte nám své dotazy / komentáře níže.

Doporučené čtení

^