Menu

Ako používať selektor CSS na identifikáciu webových prvkov pre skripty selénu - selén - návod č. 6

how use css selector

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

V našom predchádzajúci tutoriál selénu , naučili sme sa rôzne typy lokátorov. Naučili sme sa tiež, ako používať: ID, ClassName, Name, Link Text a XPath lokátory na identifikáciu webových prvkov na webovej stránke.

V nadväznosti na to sa dnes dozvieme ako používať CSS Selector ako vyhľadávač . Toto je náš 6. tutoriál v našom bezplatná séria tréningu selénu .

Použitie nástroja CSS Selector ako vyhľadávača:

Výber CSS je kombináciou selektora prvkov a selektorovej hodnoty, ktorá identifikuje webový prvok na webovej stránke. Zloženie selektora prvkov a hodnoty selektora je známe ako Selektorový vzor.

Selénový lokátor selektora CSS

Selektorový vzor je konštruovaný pomocou značiek HTML, atribútov a ich hodnôt. Ústredná téma postupu pri vytváraní CSS Selector a Xpath sú si veľmi podobné, čo je základom jediného rozdielu v ich konštrukčnom protokole.

Rovnako ako Xpath, aj selektor CSS dokáže vyhľadať webové prvky, ktoré nemajú ID, triedu ani názov.

vzorový plán testovacieho dokumentu pre mobilnú aplikáciu

Takže teraz sa chystajme prediskutovať primitívne typy selektorov CSS:

Používanie selektora CSS ako vyhľadávača

Čo sa dozviete:

Selektor CSS: ID

V tejto ukážke by sme pristupovali k textovému poľu „E-mail“, ktoré sa nachádza v prihlasovacom formulári na stránke Gmail.com.

Textové pole E-mail má atribút ID, ktorého hodnota je definovaná ako „E-mail“. Atribút ID a jeho hodnota môžu byť teda použité na vytvorenie nástroja CSS Selector na prístup do textového poľa e-mailu.

Vytváranie selektora CSS pre webový prvok

Krok 1 : Nájdite / skontrolujte webový prvok (v našom prípade textové pole „E-mail“) a všimnite si, že značka HTML je „vstup“ a hodnota atribútu ID je „Email“ a obaja spoločne odkazujú na „e-mail s textovým poľom“. Vyššie uvedené údaje by sa teda použili na vytvorenie selektora CSS.

Používanie selektora CSS ako vyhľadávača 2

Overte hodnotu lokátora

Krok 1 : Zadajte „css = vstup # e-mail“, t. J. Hodnotu lokátora do cieľového poľa v Selenium IDE a kliknite na tlačidlo Nájsť. Všimnite si, že textové pole E-mail by bolo zvýraznené.

Používanie selektora CSS ako vyhľadávača 3

Syntax

css =

  • Značka HTML - Je to značka, ktorá sa používa na označenie webového prvku, ku ktorému chceme získať prístup.
  • # - Znak hash sa používa na symbolizáciu atribútu ID. Ak sa na vytvorenie nástroja na výber CSS používa atribút ID, je povinné použiť znak hash.
  • Hodnota atribútu ID - Je to hodnota atribútu ID, ku ktorej sa pristupuje.
  • Pred hodnotou ID vždy stojí znak hash.

Poznámka: Použiteľné aj pre iné typy selektorov CSS

  • Pri zadávaní selektora CSS v cieľovom textovom poli selénového IDE vždy nezabudnite uviesť predponu „css =“.
  • Postupnosť vyššie uvedených artefaktov je nezmeniteľná.
  • Ak majú dva alebo viac webových prvkov rovnakú značku HTML a hodnotu atribútu, bude identifikovaný prvý prvok označený v zdroji stránky.

Výber CSS: Trieda

V tejto ukážke by sme pristupovali k začiarkavaciemu políčku „Neodhlasovať“ pod prihlasovacím formulárom na gmail.com.

Začiarkavacie políčko „Zostať prihlásený“ má atribút Class, ktorého hodnota je definovaná ako „pamätať“. Atribút Class a jeho hodnota sa teda dá použiť na vytvorenie selektora CSS na prístup k určenému webovému prvku.

Lokalizácia prvku pomocou triedy ako selektora CSS je veľmi podobná použitiu ID, osamelý rozdiel spočíva v ich tvorbe syntaxe.

Vytvorenie selektora CSS pre webový prvok

Krok 1 : Nájdite / skontrolujte webový prvok (v našom prípade začiarkavacie políčko „Zostať prihlásený“) a všimnite si, že značka HTML je „štítok“ a hodnota atribútu ID je „pamätať“ a obaja spoločne odkazujú na slovo „Zostať prihlásený začiarkavacie políčko “.

Overte hodnotu lokátora

Krok 1 : Zadajte „css = label.remember“, tj. Hodnotu lokátora do cieľového poľa v Selenium IDE a kliknite na tlačidlo Nájsť. Všimnite si, že políčko „Neodhlasovať“ by bolo zvýraznené.

Používanie nástroja CSS Selector ako vyhľadávača 4

Syntax

css =

  • . - Bodka sa používa na symbolizáciu atribútu triedy. Ak sa na vytvorenie nástroja na výber CSS používa atribút Class, je povinné použiť bodku.
  • Pred hodnotou triedy vždy stojí bodka.

Selektor CSS: Atribút

V tejto ukážke by sme sprístupnili tlačidlo „Prihlásiť sa“, ktoré sa nachádza pod prihlasovacím formulárom na adrese gmail.com.

Tlačidlo „Prihlásiť sa“ má atribút typu, ktorého hodnota je definovaná ako „odoslať“. Preto atribút typu a jeho hodnota možno použiť na vytvorenie selektora CSS na prístup k určenému webovému prvku.

Vytvorenie selektora CSS pre webový prvok

Krok 1 : Vyhľadajte / skontrolujte webový prvok (v našom prípade tlačidlo „Prihlásiť sa“) a všimnite si, že značka HTML je „vstup“, atribút je typu a hodnota atribútu typu je „odoslať“ a všetky spolu odkazujú na tlačidlo „Prihlásiť sa“.

Overte hodnotu lokátora

Krok 1 : Zadajte výraz „css = input (type =‘ submit ‘)“, t. J. Hodnotu lokátora do cieľového poľa v Selenium IDE a kliknite na tlačidlo Nájsť. Všimnite si, že by bolo zvýraznené tlačidlo „Prihlásiť sa“.

Používanie selektora CSS ako vyhľadávača 5

Syntax

css =

  • Atribút - Je to atribút, ktorý chceme použiť na vytvorenie nástroja na výber CSS. Môže to byť hodnota, typ, názov atď. Odporúča sa zvoliť atribút, ktorého hodnota jednoznačne identifikuje webový prvok.
  • Hodnota atribútu - Je to hodnota atribútu, ku ktorému sa pristupuje.

Selektor CSS: ID / trieda a atribút

V tejto ukážke by sme pristupovali k textovému poľu „Heslo“, ktoré sa nachádza v prihlasovacom formulári na adrese gmail.com.

Textové pole „Heslo“ obsahuje atribút ID, ktorého hodnota je definovaná ako „Passwd“, zadajte atribút, ktorého hodnota je definovaná ako „heslo“. Takto je možné použiť atribút ID, atribút typu a ich hodnoty na vytvorenie nástroja CSS Selector na prístup k určenému webovému prvku.

otázky na pohovor pre ňu

Vytvorenie selektora CSS pre webový prvok

Krok 1 : Vyhľadajte / skontrolujte webový prvok (v našom prípade textové pole „Heslo“) a všimnite si, že značka HTML je „vstup“, atribúty sú ID a typ a ich zodpovedajúce hodnoty sú „Passwd“ a „password“ a všetky dohromady urobte odkaz na textové pole „Heslo“.

Overte hodnotu lokátora

Krok 1 : Zadajte „css = input # Passwd (name =‘ Passwd ‘)“, t. J. Hodnotu lokátora do cieľového poľa v selénovom IDE a kliknite na tlačidlo Nájsť. Všimnite si, že textové pole „Heslo“ bude zvýraznené.

Používanie selektora CSS ako vyhľadávača 5

Syntax

css =

V syntaxi môžu byť poskytnuté aj dva alebo viac atribútov.Napríklad, „Css = input # Passwd (type =‘ password ‘) (name =‘ Passwd ‘)“.

Selektor CSS: vedľajší reťazec

CSS v seléne umožňuje zosúladiť čiastočný reťazec a odvodiť tak veľmi zaujímavú vlastnosť pri vytváraní selektorov CSS pomocou podreťazcov. Existujú tri spôsoby, ako je možné vytvoriť selektory CSS na základe mechanizmu použitého na priradenie podreťazca.

Druhy mechanizmov

Všetky spodné mechanizmy majú symbolický význam.

  • Priraďte predponu
  • Priraďte príponu
  • Priraďte podreťazec

Poďme o nich diskutovať podrobne.

Priraďte predponu

Používa sa na zodpovedanie reťazca pomocou zodpovedajúcej predpony.

Syntax

css =

  • ^ - Symbolická notácia zodpovedajúca reťazcu pomocou predpony.
  • Predpona - Je to reťazec, na základe ktorého sa vykonáva operácia zhody. Očakáva sa, že pravdepodobný reťazec bude začínať zadaným reťazcom.

Napríklad: Uvažujme o „textovom poli Heslo“, takže zodpovedajúci selektor CSS bude:

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

Priraďte príponu

Používa sa na korešpondenciu s reťazcom pomocou zodpovedajúcej prípony.

Syntax

css =

  • # - Symbolická notácia, ktorá umožňuje zhodu reťazca pomocou prípony.
  • Prípona - Je to reťazec, na základe ktorého sa vykonáva operácia zhody. Očakáva sa, že pravdepodobný reťazec končí zadaným reťazcom.

Napríklad,Zvážme opäť „Textové pole hesla“, takže zodpovedajúci selektor CSS bude:

css = vstup # heslo (meno $ = ‘wd’)

Priraďte podreťazec

Používa sa na korešpondenciu s reťazcom pomocou zodpovedajúceho podreťazca.

Syntax

css =

  • * - Symbolická notácia na priradenie reťazca pomocou podreťazca.
  • Vedľajší reťazec - Je to reťazec, na základe ktorého sa vykonáva operácia zhody. Očakáva sa, že pravdepodobný reťazec bude mať zadaný vzor reťazca.

Napríklad,znova zvážime „Textové pole hesla“, takže zodpovedajúci selektor CSS bude:

css = vstup # heslo (meno $ = ‘wd’)

Selektor CSS: vnútorný text

Vnútorný text nám pomáha identifikovať a vytvoriť selektor CSS pomocou reťazcového vzoru, ktorý značka HTML prejavuje na webovej stránke.

Zvážte: „Potrebujete pomoc?“ hypertextový odkaz uvedený pod prihlasovacím formulárom na gmail.com.

Kotvová značka predstavujúca hypertextový odkaz má vnútri uzavretý text. Tento text je teda možné použiť na vytvorenie selektora CSS na prístup k určenému webovému prvku.

Syntax:

css =

  • : - Bodka sa používa na symbolizáciu metódy obsahuje
  • Obsahuje - Je to hodnota atribútu triedy, ku ktorej sa pristupuje.
  • Text - Text, ktorý sa zobrazuje kdekoľvek na webovej stránke bez ohľadu na jej umiestnenie.

Toto je jedna z najčastejšie používaných stratégií na vyhľadanie webového prvku kvôli jeho zjednodušenej syntaxi.

Pretože vytváranie CSS Selector a Xpath vyžaduje veľa úsilia a praxe, proces je vykonávaný iba sofistikovanejšími a vyškolenými používateľmi.

Nasledujúci návod č. 7 : Pokračujeme v ďalšom výučbe, využili by sme príležitosť predstaviť vám rozšírenie stratégií lokalizácie. V ďalšom návode by sme teda študovali mechanizmus na lokalizáciu webových prvkov v prehliadačoch Google Chrome a Internet Explorer.

aký je sieťový kľúč pre wifi

Lokalizátorom selénu sa venujeme podrobnejšie, pretože je to dôležitá súčasť tvorby skriptov selénu.

Dajte nám vedieť svoje otázky alebo komentáre nižšie.

Odporúčané čítanie

^