Locators in Selenium IDE: CSS Selector - DOM - XPath - ID

Obsah:

Anonim

Čo sú vyhľadávače?

Locator je príkaz, ktorý hovorí selénovému IDE, na ktoré prvky grafického používateľského rozhrania (napríklad textové pole, tlačidlá, začiarkavacie políčka atď.) Je potrebné pracovať. Identifikácia správnych prvkov grafického používateľského rozhrania je nevyhnutným predpokladom na vytvorenie automatizačného skriptu. Presná identifikácia prvkov grafického používateľského rozhrania je ale zložitejšia, ako sa zdá. Niekedy skončíte s nesprávnymi prvkami GUI alebo vôbec bez prvkov! Selenium teda poskytuje množstvo lokátorov na presné vyhľadanie prvku GUI

Rôzne typy vyhľadávača CSS v seléne IDE

Existujú príkazy, ktoré lokátor nepotrebujú (napríklad príkaz „otvoriť“). Väčšina z nich však potrebuje element Locators vo webovom ovládači selénu.

Výber vyhľadávača závisí vo veľkej miere od vašej testovanej aplikácie . V tomto výučbe budeme prepínať medzi Facebookom, novými prehliadkami. Demoaut na základe lokátorov, ktoré tieto aplikácie podporujú. Rovnako tak vo svojom testovacom projekte vyberiete ktorýkoľvek z vyššie uvedených lokátorov prvkov vo webovom ovládači selénu na základe vašej aplikačnej podpory.

Vyhľadanie podľa ID

Toto je najbežnejší spôsob lokalizácie prvkov, pretože ID majú byť pre každý prvok jedinečné.

Cieľový formát: id = id prvku

V tomto príklade použijeme ako testovaciu aplikáciu Facebook, pretože Mercury Tours nepoužívajú atribúty ID.

Krok 1. Od vytvorenia tohto tutoriálu Facebook zmenil dizajn svojej prihlasovacej stránky. Na testovanie použite túto ukážkovú stránku http://demo.guru99.com/test/facebook.html. Skontrolujte pomocou aplikácie Firebug textové pole „E-mail alebo telefón“ a všimnite si jeho ID. V tomto prípade je ID „e-mail“.

Krok 2. Spustite Selenium IDE a do poľa Target zadajte „id = email“. Kliknite na tlačidlo Nájsť a všimnite si, že textové pole „E-mail alebo telefón“ je zvýraznené žltou farbou a orámované zelenou farbou, čo znamená, že selénový IDE dokázal tento prvok správne nájsť.

Vyhľadanie podľa mena

Lokalizácia prvkov podľa názvu je veľmi podobná lokalizácii podľa ID, ibaže namiesto nich používame predponu „name =“ .

Cieľový formát: name = názov prvku

V nasledujúcej ukážke teraz použijeme Mercury Tours, pretože všetky významné prvky majú názvy.

Krok 1. Prejdite na stránku http://demo.guru99.com/test/newtours/ a pomocou Firebug skontrolujte textové pole „Meno používateľa“. Poznačte si jeho atribút názvu.

Tu vidíme, že názov prvku je „userName“.

Krok 2. V Selenium IDE zadajte do poľa Cieľ „meno = meno používateľa“ a kliknite na tlačidlo Nájsť. Selénové IDE by malo byť schopné vyhľadať textové pole Meno používateľa tak, že ho zvýrazní.

Vyhľadanie podľa názvu pomocou filtrov

Filtre je možné použiť, keď majú viaceré prvky rovnaký názov. Filtre sú ďalšie atribúty používané na rozlíšenie prvkov s rovnakým názvom.

Cieľový formát : name = name_of_the_element filter = value_of_filter

Pozrime sa na príklad -

Krok 1 . Prihláste sa na Mercury Tours pomocou „tutoriálu“ ako používateľského mena a hesla. Dostanete sa na nižšie uvedenú stránku Vyhľadávač letov.

Krok 2. Pomocou nástroja Firebug si všimnite, že prepínače Round Trip a One Way majú rovnaký názov „tripType“. Majú však rôzne atribúty VALUE, takže každý z nich môžeme použiť ako filter.

Krok 3.

  • Najprv prejdeme k prepínaču Jednosmerný. Kliknite na prvý riadok v editore.
  • Do poľa Príkaz selénu IDE zadajte príkaz „kliknúť“.
  • Do poľa Cieľ zadajte „name = tripType value = oneway“. Časť „hodnota = jedna cesta“ je náš filter.

Krok 4 . Kliknite na tlačidlo Nájsť a všimnite si, že selén IDE dokáže zvýrazniť prepínač Jednosmerný zelenou farbou - to znamená, že k prvku môžeme úspešne pristupovať pomocou jeho atribútu VALUE.

Krok 5. Stlačením klávesu „X“ na klávesnici vykonáte tento príkaz kliknutia. Všimnite si, že bol vybraný prepínač Jednosmerný.

Presne to isté môžete urobiť pomocou prepínača Round Trip, tentokrát pomocou cieľa „name = tripType value = roundtrip“.

Nájdenie podľa textu odkazu

Tento typ vyhľadávača CSS v seléne sa vzťahuje iba na texty hypertextových odkazov. K odkazu sa dostaneme tak, že náš cieľ označíme predponou „link =“ a potom nasleduje text hypertextového odkazu.

Cieľový formát : link = link_text

V tomto príklade prejdeme na odkaz „REGISTROVAŤ“, ktorý sa nachádza na domovskej stránke Mercury Tours.

Krok 1.

  • Najskôr sa uistite, že ste odhlásení z Mercury Tours.
  • Prejdite na domovskú stránku Mercury Tours.

Krok 2 .

  • Pomocou nástroja Firebug skontrolujte odkaz „REGISTROVAŤ“. Text odkazu sa nachádza medzi značkami a.
  • V takom prípade je náš text odkazu „REGISTROVAŤ“. Skopírujte text odkazu.

Krok 3 . Skopírujte text odkazu do Firebugu a vložte ho do poľa Cieľ Selenium IDE. Predponu zadajte „link =“.

Krok 4. Kliknite na tlačidlo Nájsť a všimnite si, že selén IDE dokázal správne zvýrazniť odkaz REGISTROVAŤ.

Krok 5. Ak chcete vykonať ďalšie overenie, zadajte do poľa príkazu príkaz „clickAndWait“ a vykonajte ho. Selénové IDE by malo byť schopné úspešne kliknúť na tento odkaz REGISTROVAŤ a presmerovať vás na registračnú stránku uvedenú nižšie.

Vyhľadanie pomocou nástroja CSS Selector

Selektory CSS v seléne sú reťazcové vzory používané na identifikáciu prvku na základe kombinácie značky HTML, id, triedy a atribútov. Lokalizácia pomocou selektorov CSS v seléne je komplikovanejšia ako predchádzajúce metódy, je to však najbežnejšia stratégia lokalizácie pokročilých používateľov selénu, pretože má prístup aj k tým prvkom, ktoré nemajú ID ani názov.

Selektory CSS v seléne majú veľa formátov, zameriame sa však iba na tie najbežnejšie.

  • Značka a ID
  • Značka a trieda
  • Značka a atribút
  • Značka, trieda a atribút
  • Vnútorný text

Pri použití tejto stratégie vždy predponu Target zadáme pred písmeno „css =“, ako to bude uvedené v nasledujúcich príkladoch.

Vyhľadanie pomocou nástroja CSS Selector - značka a ID

V tomto príklade opäť použijeme textové pole E-mail Facebooku. Ako si pamätáte, má ID „e-mailu“ a my sme k nim už pristupovali v sekcii „Nájdenie podľa ID“. Tentokrát použijeme selénový selektor CSS s ID pri prístupe k tomu istému prvku.

Syntax

Popis

css = značka # id
  • tag = značka HTML prístupného prvku
  • # = znak hash. Toto by malo byť vždy, keď používate selečkový selektor CSS s ID
  • id = ID prvku, ku ktorému sa pristupuje

Majte na pamäti, že ID vždy predchádza znak hash (#).

Krok 1. Prejdite na www.facebook.com. Pomocou nástroja Firebug preskúmajte textové pole „E-mail alebo telefón“.

V tomto okamihu nezabudnite, že značka HTML je „vstup“ a jej ID je „e-mail“. Naša syntax bude teda „css = input # email“.

Krok 2. Do poľa Cieľ selénového IDE zadajte „css = input # email“ a kliknite na tlačidlo Nájsť. Selénové IDE by malo byť schopné tento prvok zvýrazniť.

Lokalizácia podľa výberu CSS - značka a trieda

Lokalizácia pomocou selektora CSS na seléne pomocou značky HTML a názvu triedy je podobná ako pri použití značky a ID, ale v tomto prípade sa namiesto znaku hash použije bodka (.).

Syntax

Popis

css = značka. trieda
  • tag = značka HTML prístupného prvku
  • . = bodka. Toto by malo byť vždy, keď používate selektor CSS s triedou
  • trieda = trieda prvku, ku ktorému sa pristupuje

Krok 1. Prejdite na ukážkovú stránku http://demo.guru99.com/test/facebook.html a pomocou nástroja Firebug skontrolujte textové pole „E-mail alebo telefón“. Všimnite si, že jeho značka HTML je „vstup“ a jej trieda je „vstupný text“.

Krok 2. V Selenium IDE zadajte do poľa Cieľ „css = input.inputtext“ a kliknite na Nájsť. Selénové IDE by malo byť schopné rozpoznať textové pole E-mail alebo Telefón.

Upozorňujeme, že keď má viac prvkov rovnakú značku HTML a názov, bude rozpoznaný iba prvý prvok v zdrojovom kóde . Pomocou nástroja Firebug skontrolujte textové pole Heslo na Facebooku a všimnite si, že má rovnaké meno ako textové pole E-mail alebo Telefón.

Dôvod, prečo bolo na predchádzajúcom obrázku zvýraznené iba textové pole E-mail alebo Telefón, je ten, že je na prvom mieste v zdroji stránky Facebook.

Vyhľadanie pomocou nástroja CSS Selector - značka a atribút

Táto stratégia používa značku HTML a špecifický atribút prvku, ku ktorému sa má pristupovať.

Syntax

Popis

css = značka [atribút = hodnota]
  • tag = značka HTML prístupného prvku
  • [a] = hranaté zátvorky, do ktorých bude umiestnený konkrétny atribút a jeho zodpovedajúca hodnota
  • atribút = atribút, ktorý sa má použiť. Je vhodné použiť atribút, ktorý je pre prvok jedinečný, napríklad meno alebo ID.
  • hodnota = zodpovedajúca hodnota zvoleného atribútu.

Krok 1. Prejdite na stránku registrácie spoločnosti Mercury Tours (http://demo.guru99.com/test/newtours/register.php) a skontrolujte textové pole „Priezvisko“. Poznačte si jeho značku HTML (v tomto prípade „vstup“) a jej názov („priezvisko“).

Krok 2. V Selenium IDE zadajte do poľa Cieľ „css = input [name = lastName]“ a kliknite na Nájsť. Selénové IDE by malo mať úspešný prístup k priezvisku.

Ak má viac prvkov rovnakú značku a atribút HTML, bude rozpoznaný iba prvý . Toto správanie je podobné ako pri vyhľadávaní prvkov pomocou selektorov CSS s rovnakou značkou a triedou.

Vyhľadanie pomocou nástroja CSS Selector - značka, trieda a atribút

Syntax Popis
css = tag.class [atribút = hodnota]
  • tag = značka HTML prístupného prvku
  • . = bodka. Toto by malo byť vždy, keď používate selektor CSS s triedou
  • trieda = trieda prvku, ku ktorému sa pristupuje
  • [a] = hranaté zátvorky, do ktorých bude umiestnený konkrétny atribút a jeho zodpovedajúca hodnota
  • atribút = atribút, ktorý sa má použiť. Je vhodné použiť atribút, ktorý je pre prvok jedinečný, napríklad meno alebo ID.
  • hodnota = zodpovedajúca hodnota zvoleného atribútu.

Krok 1. Prejdite na ukážkovú stránku http://demo.guru99.com/test/facebook.html a pomocou Firebug skontrolujte vstupné polia „E-mail alebo telefón“ a „Heslo“. Všímajte si ich značku HTML, triedu a atribúty. V tomto príklade vyberieme ich atribúty „tabindex“.

Krok 2. Najprv vstúpime do textového poľa „E-mail alebo telefón“. Použijeme teda hodnotu tabindexu 1. Do poľa Cieľ Selenium IDE zadajte „css = input.inputtext [tabindex = 1]“ a kliknite na Nájsť. Je potrebné zvýrazniť vstupné pole „E-mail alebo telefón“.

Krok 3. Ak chcete otvoriť pole na zadanie hesla, jednoducho nahraďte hodnotu atribútu tabindex. Do poľa Cieľ zadajte „css = input.inputtext [tabindex = 2]“ a kliknite na tlačidlo Nájsť. Selénové IDE musí byť schopné úspešne identifikovať textové pole Heslo.

Lokalizácia pomocou nástroja CSS Selector - vnútorný text

Ako ste si mohli všimnúť, štítkom HTML sa málokedy priraďujú atribúty id, name alebo class. Ako k nim teda máme prístup? Odpoveď je prostredníctvom použitia ich vnútorných textov. Vnútorné texty sú skutočné vzory reťazcov, ktoré štítok HTML zobrazuje na stránke.

Syntax

Popis

css = tag: contains ("vnútorný text")
  • tag = značka HTML prístupného prvku
  • vnútorný text = vnútorný text prvku

Krok 1. Prejdite na domovskú stránku Mercury Tours (http://demo.guru99.com/test/newtours/) a pomocou nástroja Firebug preskúmajte štítok „Heslo“. Poznačte si jeho značku HTML (v tomto prípade to je „písmo“) a všimnite si, že nemá žiadne atribúty triedy, id alebo názvu.

Krok 2. Do poľa Cieľ selénu IDE zadajte css = font: contains ("Heslo:") a kliknite na Nájsť. Selénové IDE by malo mať prístup k štítku Heslo, ako je to znázornené na obrázku nižšie.

Krok 3. Tentokrát nahraďte vnútorný text textom „Boston“, aby sa váš cieľ stal „css = font: contains („ Boston “)“. Kliknite na Nájsť. Mali by ste si všimnúť, že štítok „Boston až San Francisco“ je zvýraznený. To vám ukazuje, že selén IDE má prístup k dlhému štítku, aj keď ste práve označili prvé slovo jeho vnútorného textu.

Lokalizácia podľa DOM (model objektu dokumentu)

Zjednodušene povedané, Object Object Model (DOM) je spôsob, akým sú štruktúrované prvky HTML. Selénové IDE dokáže použiť DOM pri prístupe k prvkom stránky. Ak použijeme túto metódu, naše cieľové pole bude vždy začínať „dom = dokument ...“; predpona „dom =“ sa však zvyčajne odstráni, pretože selén IDE dokáže automaticky interpretovať čokoľvek, čo začína kľúčovým slovom „dokument“, ako cestu v rámci DOM v seléne.

Existujú štyri základné spôsoby, ako vyhľadať prvok prostredníctvom DOM v seléne:

  • getElementById
  • getElementsByName
  • dom: name (platí iba pre prvky v pomenovanom tvare)
  • dom: index

Vyhľadanie podľa DOM - getElementById

Zamerajme sa na prvú metódu - pomocou metódy getElementById modelu DOM v seléne. Syntax by bola:

Syntax

Popis

document.getElementById ("ID prvku")

id prvku = toto je hodnota atribútu ID prvku, ku ktorému sa má pristupovať. Táto hodnota by mala byť vždy uvedená v zátvorkách ("").

Krok 1. Použite túto ukážkovú stránku http://demo.guru99.com/test/facebook.html Prejdite na ňu a pomocou Firebugu skontrolujte začiarkavacie políčko „Nechať ma prihláseného“. Poznačte si jeho ID.

Vidíme, že ID, ktoré by sme mali použiť, je „persist_box“.

Krok 2. Otvorte selén IDE a do poľa Cieľ zadajte „document.getElementById („ persist_box “)“ a kliknite na Nájsť. Selénové IDE by malo byť schopné vyhľadať začiarkavacie políčko „Nechať ma prihláseného“. Aj keď nedokáže zvýrazniť vnútro začiarkavacieho políčka, Selenium IDE môže stále obklopovať prvok jasným zeleným okrajom, ako je znázornené nižšie.

Lokalizácia podľa DOM - getElementsByName

Metóda getElementById má prístup iba k jednému prvku naraz, a to je prvok s ID, ktoré ste zadali. Metóda getElementsByName je iná. Zhromažďuje pole prvkov, ktoré majú názov, ktorý ste zadali. K jednotlivým prvkom sa dostanete pomocou indexu, ktorý začína na 0.

getElementById

  • Získa pre vás iba jeden prvok.
  • Tento prvok nesie ID, ktoré ste zadali v zátvorkách getElementById ().

getElementsByName

  • Získa kolekciu prvkov, ktorých názvy sú rovnaké.
  • Každý prvok je indexovaný číslom začínajúcim od 0, rovnako ako pole
  • K prvkom, ku ktorým chcete vstúpiť, určíte umiestnením jeho indexového čísla do hranatých zátvoriek v syntaxi getElementsByName nižšie.

Syntax

Popis

document.getElementsByName ("meno") [index]
  • name = názov prvku podľa jeho atribútu 'name'
  • index = celé číslo, ktoré označuje, ktorý prvok v poli getElementsByName sa použije.

Krok 1. Prejdite na domovskú stránku Mercury Tours a prihláste sa pomocou „tutoriálu“ ako používateľského mena a hesla. Firefox by vás mal presunúť na obrazovku Vyhľadávač letov.

Krok 2. Pomocou nástroja Firebug skontrolujte tri prepínače v dolnej časti stránky (prepínače Economy Class, Business Class a First Class). Všimnite si, že všetky majú rovnaký názov, ktorý je „servClass“.

Krok 3. Najprv otvoríme prepínač „Ekonomická trieda“. Zo všetkých týchto troch prepínačov je tento prvok na prvom mieste, takže má index 0. Do selénového IDE zadajte „document.getElementsByName („ servClass “) [0]“ a kliknite na tlačidlo Nájsť. Selén IDE by mal byť schopný správne identifikovať prepínač Economy Class.

Krok 4. Zmeňte číslo indexu na 1, aby sa z vášho Targeta stal dokument.getElementsByName ("servClass") [1]. Kliknite na tlačidlo Nájsť a selén IDE by mal byť schopný zvýrazniť prepínač „Business class“, ako je uvedené nižšie.

Vyhľadanie podľa DOM - dom: meno

Ako už bolo spomenuté, táto metóda bude platiť, iba ak je element, ku ktorému pristupujete, obsiahnutý v pomenovanom formulári.

Syntax

Popis

document.forms ["názov formulára"] .elements ["názov prvku"]
  • name of the form = hodnota atribútu name tagu form, ktorý obsahuje prvok, ku ktorému chcete získať prístup
  • name of the element = hodnota atribútu name prvku, ku ktorému chcete získať prístup

Krok 1. Prejdite na domovskú stránku Mercury Tours (http://demo.guru99.com/test/newtours/) a pomocou nástroja Firebug skontrolujte textové pole Meno používateľa. Všimnite si, že je obsiahnutý vo forme s názvom „domov“.

Krok 2. Do selénového IDE zadajte „document.forms [" home "]. Elements [„ userName "]" a kliknite na tlačidlo Nájsť. Selénové IDE musí byť schopné prístupu k prvku úspešne.

Vyhľadanie podľa DOM - dom: index

Táto metóda sa uplatňuje, aj keď sa prvok nenachádza v pomenovanom formulári, pretože používa index formulára a nie jeho názov.

Syntax

Popis

document.forms [index formulára] .prvky [index prvku]
  • index formulára = číslo indexu (začínajúce sa na 0) formulára vzhľadom na celú stránku
  • index prvku = číslo indexu (začínajúce na 0) prvku vzhľadom na celý formulár, ktorý ho obsahuje

Dostaneme sa do textového poľa „Telefón“ na stránke registrácie Mercury Tours. Formulár na tejto stránke nemá žiadny atribút name a ID, takže bude dobrým príkladom.

Krok 1. Prejdite na registračnú stránku Mercury Tours a skontrolujte textové pole Telefón. Všimnite si, že formulár, ktorý ho obsahuje, nemá atribúty ID a name.

Krok 2. Do poľa Cieľ Selenium IDE zadajte „document.forms [0] .elements [3]“ a kliknite na tlačidlo Nájsť. Selénové IDE by malo mať správny prístup k textovému poľu Telefón.

Krok 3. Prípadne môžete použiť názov prvku namiesto jeho indexu a získať rovnaký výsledok. Do poľa Cieľ Selenium IDE zadajte „document.forms [0] .elements [" phone "]". Textové pole Telefón by malo byť stále zvýraznené.

Vyhľadanie pomocou XPath

XPath je jazyk používaný pri vyhľadávaní uzlov XML (Extensible Markup Language). Pretože o HTML sa dá uvažovať ako o implementácii XML, môžeme na vyhľadanie prvkov HTML použiť aj XPath.

Výhoda: Môže získať prístup k takmer všetkým prvkom, a to aj k prvkom bez atribútov triedy, názvu alebo id.

Nevýhoda: Je to najkomplikovanejšia metóda identifikácie prvkov z dôvodu príliš veľa rôznych pravidiel a úvah.

Našťastie Firebug dokáže automaticky generovať lokátory XPath Selenium. V nasledujúcom príklade pristúpime k obrázku, ku ktorému nemožno získať prístup pomocou metód, o ktorých sme hovorili skôr.

Krok 1. Prejdite na domovskú stránku Mercury Tours a pomocou Firebug skontrolujte oranžový obdĺžnik napravo od žltého poľa „Odkazy“. Pozrite si obrázok nižšie.

Krok 2 . Pravým tlačidlom myši kliknite na kód HTML prvku a potom vyberte možnosť „Kopírovať XPath“.

Krok 3. Do selénového IDE zadajte do poľa Cieľ jednu lomku „/“ a potom vložte cestu XPath, ktorú sme skopírovali v predchádzajúcom kroku. Položka v poli Cieľ by teraz mala začínať dvoma lomkami „//“.

Krok 4 . Kliknite na tlačidlo Nájsť. Selénové IDE by malo byť schopné zvýrazniť oranžové políčko, ako je uvedené nižšie.

Zhrnutie

Syntax pre použitie lokátora

Metóda

Cieľová syntax

Príklad
Podľa ID id = id_of_the_element id = email
Podľa názvu meno = nazov_prvku meno = meno uzivatela
Podľa názvu pomocou filtrov meno = meno_prvkového filtra = hodnota_filtru name = tripType value = oneway
Textom odkazu odkaz = odkaz_text odkaz = REGISTRÁCIA
Značka a ID css = značka # id css = vstup # email
Značka a trieda css = značka. trieda css = input.inputtext
Značka a atribút css = značka [atribút = hodnota] css = vstup [meno = priezvisko]
Značka, trieda a atribút css = značka. trieda [atribút = hodnota] css = input.inputtext [tabindex = 1]