Lokatorji v selenium IDE: CSS Selector - DOM - XPath - ID

Kazalo:

Anonim

Kaj so lokatorji?

Locator je ukaz, ki Selenium IDE sporoča, kateri elementi grafičnega uporabniškega vmesnika (recimo polje z besedilom, gumbi, potrditvena polja itd.) Potrebujejo njegovo delovanje. Identifikacija pravilnih elementov GUI je predpogoj za izdelavo skripta za avtomatizacijo. Toda natančna identifikacija elementov GUI je težja, kot se sliši. Včasih na koncu delate z napačnimi elementi GUI ali jih sploh ni! Zato Selenium ponuja številne lokatorje za natančno iskanje elementa GUI

Različne vrste CSS Locator v programu Selenium IDE

Obstajajo ukazi, ki ne potrebujejo lokatorja (na primer ukaz "odpri"). Vendar pa večina od njih potrebuje lokatorje elementov v spletnem pogonu Selenium.

Izbira lokatorja je v veliki meri odvisna od vaše preizkušene aplikacije . V tej vadnici bomo preklapljali med Facebookom, novimi tours.demoaut na podlagi lokatorjev, ki jih te aplikacije podpirajo. Podobno boste v projektu preizkušanja izbrali katerega koli od zgoraj naštetih lokatorjev elementov v spletnem pogonu Selenium, ki temelji na vaši podpori za aplikacijo.

Iskanje po osebnem dokumentu

To je najpogostejši način iskanja elementov, saj naj bi bili ID-ji enolični za vsak element.

Target Format: id = id elementa

V tem primeru bomo kot testno aplikacijo uporabili Facebook, ker Mercury Tours ne uporablja atributov ID.

Korak 1. Odkar je bila ustvarjena ta vadnica, je Facebook spremenil oblikovanje strani za prijavo. Za testiranje uporabite to predstavitveno stran http://demo.guru99.com/test/facebook.html. S Firebugom preglejte besedilno polje »E-pošta ali telefon« in si zabeležite njegov ID. V tem primeru je ID "email".

Korak 2. Zaženite selenium IDE in v polje Target vnesite "id = email". Kliknite gumb Poišči in opazite, da se polje z besedilom "E-pošta ali telefon" označi z rumeno in obrobi z zeleno, kar pomeni, da je Selenium IDE lahko pravilno našel ta element.

Iskanje po imenu

Iskanje elementov po imenu je zelo podobno iskanju po ID-ju, le da namesto tega uporabljamo predpono "name =" .

Ciljna oblika: ime = ime elementa

V naslednji predstavitvi bomo zdaj uporabili Mercury Tours, ker imajo vsi pomembni elementi imena.

Korak 1. Pojdite na http://demo.guru99.com/test/newtours/ in z Firebugom preglejte besedilno polje »Uporabniško ime«. Upoštevajte njegov atribut imena.

Tu vidimo, da je ime elementa "userName".

Korak 2. V ID-ju Selenium v ​​polje Target vnesite "name = userName" in kliknite gumb Find. Selenium IDE bi moral imeti možnost najti besedilno polje User Name, tako da ga označi.

Iskanje po imenu s pomočjo filtrov

Filtri se lahko uporabljajo, kadar ima več elementov isto ime. Filtri so dodatni atributi, ki se uporabljajo za razlikovanje elementov z istim imenom.

Ciljna oblika : ime = ime_elementa filter = vrednost_filtra

Poglejmo primer -

1. korak . Prijavite se v Mercury Tours z uporabo "vadnice" kot uporabniškega imena in gesla. Odpeljalo bi vas na spodaj prikazano stran Iskalnik letov.

Korak 2. Z uporabo Firebuga opazite, da imata izbirna gumba za povratni in enosmerni pot isto ime "tripType". Imajo pa različne atribute VALUE, zato jih lahko uporabimo kot svoj filter.

3. korak

  • Najprej bomo odprli izbirni gumb One Way. Kliknite prvo vrstico v urejevalniku.
  • V ukazno polje Selenium IDE vnesite ukaz "klik".
  • V polje Target vnesite "name = tripType value = oneway". Del "value = oneway" je naš filter.

4. korak . Kliknite gumb Poišči in opazite, da lahko selenium IDE izbirni gumb One Way označi z zeleno, kar pomeni, da lahko do elementa uspešno dostopimo z uporabo njegovega atributa VALUE.

Korak 5. Pritisnite tipko "X" na tipkovnici, da izvedete ta ukaz za klik. Upoštevajte, da je izbran izbirni gumb One Way.

Popolnoma isto lahko storite z izbirnim gumbom za povratno potovanje, tokrat z uporabo cilja "name = tripType value = roundtrip".

Iskanje po besedilu povezave

Ta vrsta lokatorja CSS v programu Selenium velja samo za besedila hiperpovezav. Do povezave dostopamo tako, da pred ciljno oznako vstavimo "link =", nato pa ji sledi besedilo hiperpovezave.

Ciljna oblika : link = link_text

V tem primeru bomo dostopali do povezave "REGISTER" na domači strani Mercury Tours.

Korak 1.

  • Najprej se prepričajte, da ste odjavljeni iz Mercury Tours.
  • Pojdite na domačo stran Mercury Tours.

2. korak .

  • S pomočjo Firebuga preglejte povezavo "REGISTER". Besedilo povezave najdete med oznakama in.
  • V tem primeru je naše besedilo povezave "REGISTER". Kopirajte besedilo povezave.

3. korak . Kopirajte besedilo povezave v Firebug in ga prilepite v polje Target Selenium IDE. Predpono mu dodajte s "link =".

Korak 4. Kliknite gumb Poišči in opazite, da je Selenium IDE lahko pravilno označil povezavo REGISTER.

Korak 5. Za nadaljnje preverjanje v ukazno polje vnesite "clickAndWait" in ga izvedite. Selenium IDE bi moral imeti možnost, da uspešno klikne to povezavo REGISTER in vas pripelje na spodnjo stran za registracijo.

Iskanje s pomočjo izbirnika CSS

Izbirniki CSS v seleniju so vzorci nizov, ki se uporabljajo za prepoznavanje elementa na podlagi kombinacije oznake HTML, id, razreda in atributov. Iskanje s pomočjo izbirnikov CSS v programu Selenium je bolj zapleteno kot prejšnje metode, vendar je najpogostejša strategija iskanja naprednih uporabnikov programa Selenium, saj lahko dostopa tudi do tistih elementov, ki nimajo ID-ja ali imena.

Izbirniki CSS v programu Selenium imajo veliko formatov, vendar se bomo osredotočili le na najpogostejše.

  • Oznaka in ID
  • Oznaka in razred
  • Oznaka in atribut
  • Oznaka, razred in atribut
  • Notranje besedilo

Pri uporabi te strategije pred polje Target vedno vstavimo predpono "css =", kot bo prikazano v naslednjih primerih.

Iskanje s pomočjo izbirnika CSS - oznaka in ID

Še enkrat bomo v tem primeru uporabili Facebook-ovo polje z besedilom Email. Kot se spomnite, ima ID »e-pošta« in do njega smo že dostopali v razdelku »Iskanje po ID«. Tokrat bomo za dostop do istega elementa uporabili selenium CSS Selector z ID-jem.

Sintaksa

Opis

css = id # oznake
  • tag = oznaka HTML elementa, do katerega dostopate
  • # = znak zgoščevanja. Ta mora biti vedno prisoten pri uporabi Selenium CSS Selector z ID
  • id = ID elementa, do katerega dostopate

Upoštevajte, da je pred ID vedno znak zgoščevanja (#).

Korak 1. Pojdite na www.facebook.com. S pomočjo Firebuga preglejte besedilno polje »E-pošta ali telefon«.

Na tej točki upoštevajte, da je oznaka HTML "input" in njen ID "email". Torej bo naša sintaksa "css = input # email".

Korak 2. V polje Target v programu Selenium IDE vnesite "css = input # email" in kliknite gumb Poišči. Selenium IDE bi moral biti sposoben poudariti ta element.

Iskanje s pomočjo izbirnika CSS - oznaka in razred

Iskanje s pomočjo CSS Selectorja v seleniju z uporabo oznake HTML in imena razreda je podobno uporabi oznake in ID-ja, vendar je v tem primeru namesto znaka zgoščevanja uporabljena pika (.).

Sintaksa

Opis

css = oznaka. razred
  • tag = oznaka HTML elementa, do katerega dostopate
  • . = pikica. Ta mora biti vedno prisoten pri uporabi izbirnika CSS z razredom
  • class = razred elementa, do katerega dostopate

Korak 1. Pojdite na predstavitveno stran http://demo.guru99.com/test/facebook.html in z Firebugom preglejte besedilno polje »E-pošta ali telefon«. Upoštevajte, da je njegova oznaka HTML "input", njegov razred pa "inputtext".

Korak 2. V ID-ju Selenium v ​​polje Target vnesite "css = input.inputtext" in kliknite Poišči. Selenium IDE bi moral biti sposoben prepoznati besedilno polje E-pošta ali Telefon.

Upoštevajte, da če ima več elementov isto oznako in ime HTML, bo prepoznan samo prvi element v izvorni kodi . S pomočjo Firebuga preglejte besedilno polje Geslo v Facebooku in opazite, da ima isto ime kot besedilno polje E-pošta ali Telefon.

Razlog, da je bilo na prejšnji ilustraciji poudarjeno le polje z besedilom E-pošta ali Telefon, je, da je prvo mesto v viru strani na Facebooku.

Iskanje s pomočjo izbirnika CSS - oznaka in atribut

Ta strategija uporablja oznako HTML in določen atribut elementa, do katerega želite dostopati.

Sintaksa

Opis

css = oznaka [atribut = vrednost]
  • tag = oznaka HTML elementa, do katerega dostopate
  • [in] = oglati oklepaji, znotraj katerih bo umeščen določen atribut in njegova ustrezna vrednost
  • atribut = atribut, ki ga želite uporabiti. Priporočljivo je uporabiti atribut, ki je unikaten za element, kot sta ime ali ID.
  • vrednost = ustrezna vrednost izbranega atributa.

Korak 1. Pomaknite se na stran za registracijo Mercury Tours (http://demo.guru99.com/test/newtours/register.php) in si oglejte besedilno polje »Priimek«. Upoštevajte njeno oznako HTML (v tem primeru "input") in njeno ime ("lastName").

Korak 2. V ID-ju Selenium v ​​polje Target vnesite "css = input [name = lastName]" in kliknite Find. Selenium IDE bi moral imeti uspešen dostop do polja Priimek.

Če ima več elementov isto oznako in atribut HTML, bo prepoznan samo prvi . To vedenje je podobno iskanju elementov z uporabo izbirnikov CSS z isto oznako in razredom.

Iskanje po CSS Selector - oznaka, razred in atribut

Sintaksa Opis
css = tag.class [atribut = vrednost]
  • tag = oznaka HTML elementa, do katerega dostopate
  • . = pikica. Ta mora biti vedno prisoten pri uporabi izbirnika CSS z razredom
  • class = razred elementa, do katerega dostopate
  • [in] = oglati oklepaji, znotraj katerih bo umeščen določen atribut in njegova ustrezna vrednost
  • atribut = atribut, ki ga želite uporabiti. Priporočljivo je uporabiti atribut, ki je unikaten za element, kot sta ime ali ID.
  • vrednost = ustrezna vrednost izbranega atributa.

Korak 1. Pojdite na predstavitveno stran http://demo.guru99.com/test/facebook.html in z Firebugom preglejte vnosna polja »E-pošta ali telefon« in »Geslo«. Upoštevajte njihovo oznako, razred in atribute HTML. Za ta primer bomo izbrali njihove atribute 'tabindex'.

Korak 2. Najprej bomo odprli besedilno polje »E-pošta ali telefon«. Tako bomo uporabili vrednost tabindex 1. V polje Target Selenium IDE vnesite "css = input.inputtext [tabindex = 1]" in kliknite Najdi. Označeno mora biti polje za vnos »E-pošta ali telefon«.

Korak 3. Za dostop do polja za vnos gesla preprosto zamenjajte vrednost atributa tabindex. V polje Target vnesite "css = input.inputtext [tabindex = 2]" in kliknite gumb Poišči. Selenium IDE mora biti sposoben uspešno prepoznati besedilno polje Password.

Iskanje s pomočjo CSS Selector - notranje besedilo

Kot ste že opazili, oznake HTML redko dobijo atribute id, ime ali razred. Kako torej do njih dostopati? Odgovor je z uporabo njihovih notranjih besedil. Notranja besedila so dejanski vzorci nizov, ki jih oznaka HTML prikazuje na strani.

Sintaksa

Opis

css = tag: vsebuje ("notranje besedilo")
  • tag = oznaka HTML elementa, do katerega dostopate
  • notranje besedilo = notranje besedilo elementa

Korak 1. Pojdite na domačo stran Mercury Tours (http://demo.guru99.com/test/newtours/) in z Firebugom raziščite oznako "Geslo". Upoštevajte njeno oznako HTML (v tem primeru je "pisava") in opazite, da nima atributov razreda, id ali imena.

Korak 2. V polje Cilj Selenium IDE vnesite css = font: contains ("Password:") in kliknite Najdi. Selenium IDE mora imeti dostop do oznake Geslo, kot je prikazano na spodnji sliki.

Korak 3. Tokrat zamenjajte notranje besedilo z "Boston", tako da bo vaš Target zdaj postal "css = font: contains (" Boston ")". Kliknite Najdi. Opazite, da oznaka "Boston do San Francisca" postane poudarjena. To vam kaže, da lahko selenium IDE dostopa do dolge nalepke, tudi če ste pravkar navedli prvo besedo njenega notranjega besedila.

Iskanje po DOM (objektni model dokumenta)

Predmetni model dokumenta (DOM) je preprosto povedano način strukturiranja elementov HTML. Selenium IDE lahko uporablja DOM za dostop do elementov strani. Če uporabimo to metodo, se bo polje Target vedno začelo z "dom = dokument…"; vendar se predpona "dom =" običajno odstrani, ker lahko Selenium IDE samodejno razlaga vse, kar se začne s ključno besedo "dokument", kot pot znotraj DOM-a v programu Selenium.

Obstajajo štirje osnovni načini iskanja elementa prek DOM v selenu:

  • getElementById
  • getElementsByName
  • dom: ime (velja samo za elemente v imenovani obliki)
  • dom: indeks

Iskanje po DOM - getElementById

Osredotočimo se na prvo metodo - z uporabo metode getElementById DOM v selenu. Sintaksa bi bila:

Sintaksa

Opis

document.getElementById ("id elementa")

id elementa = to je vrednost atributa ID elementa, do katerega želite dostopati. Ta vrednost mora biti vedno v oklepaju ("").

Korak 1. Uporabite to predstavitveno stran http://demo.guru99.com/test/facebook.html Pomaknite se do nje in uporabite Firebug, da preverite potrditveno polje »Ostani prijavljen« Upoštevajte njegovo osebno izkaznico.

Vidimo, da je ID, ki bi ga morali uporabiti, "persist_box".

Korak 2. Odprite selenium IDE in v polje Target vnesite "document.getElementById (" persist_box ")" in kliknite Najdi. Selenium IDE bi moral imeti možnost najti potrditveno polje »Ohrani me prijavljenega«. Čeprav ne more poudariti notranjosti potrditvenega polja, lahko Selenium IDE še vedno obda element s svetlo zeleno obrobo, kot je prikazano spodaj.

Iskanje po DOM - getElementsByName

Metoda getElementById lahko hkrati dostopa samo do enega elementa in to je element z ID-jem, ki ste ga določili. Metoda getElementsByName je drugačna. Zbira niz elementov z imenom, ki ste ga določili. Do posameznih elementov dostopate z indeksom, ki se začne na 0.

getElementById

  • Za vas bo dobil samo en element.
  • Ta element nosi ID, ki ste ga določili v oklepajih getElementById ().

getElementsByName

  • Dobil bo zbirko elementov, katerih imena so enaka.
  • Vsak element se indeksira s številom, ki se začne od 0, tako kot matrika
  • Določite, do katerega elementa želite dostopati, tako da v spodnjo sintakso getElementsByName vnesete njegovo indeksno številko v oglate oklepaje.

Sintaksa

Opis

document.getElementsByName ("ime") [kazalo]
  • name = ime elementa, kot ga določa njegov atribut 'name'
  • index = celo število, ki označuje, kateri element znotraj matrike getElementsByName bo uporabljen.

Korak 1. Pojdite na domačo stran Mercury Tours in se prijavite z uporabo "vadnice" kot uporabniškega imena in gesla. Firefox bi vas moral odpreti na zaslon Flight Finder.

Korak 2. Z Firebugom preglejte tri izbirne gumbe na spodnjem delu strani (izbirni gumbi v ekonomskem razredu, poslovnem razredu in prvem razredu). Opazite, da imajo vsi isto ime, ki je "servClass".

Korak 3. Najprej odprimo izbirni gumb »Ekonomski razred«. Med vsemi tremi izbirnimi gumbi je ta element na prvem mestu, zato ima indeks 0. V ID-ju za Selenium vnesite "document.getElementsByName (" servClass ") [0]" in kliknite gumb Poišči. Selenium IDE bi moral biti sposoben pravilno prepoznati izbirni gumb ekonomskega razreda.

Korak 4. Spremenite številko indeksa na 1, tako da bo vaš Target zdaj postal document.getElementsByName ("servClass") [1]. Kliknite gumb Poišči in Selenium IDE bi moral imeti možnost označiti izbirni gumb »Poslovni razred«, kot je prikazano spodaj.

Iskanje po DOM - dom: ime

Kot smo že omenili, bo ta metoda veljala le, če je element, do katerega dostopate, vsebovan v imenovanem obrazcu.

Sintaksa

Opis

document.forms ["ime obrazca"] .elements ["ime elementa"]
  • ime obrazca = vrednost atributa imena oznake obrazca, ki vsebuje element, do katerega želite dostopati
  • ime elementa = vrednost atributa imena elementa, do katerega želite dostopati

Korak 1. Pojdite na domačo stran Mercury Tours (http://demo.guru99.com/test/newtours/) in z Firebugom preglejte besedilno polje User Name. Opazite, da je vsebovan v obliki z imenom "dom".

Korak 2. V ID-ju Selenium vnesite "document.forms [" home "]. Elements [" userName "]" in kliknite gumb Poišči. Selenium IDE mora imeti uspešen dostop do elementa.

Iskanje po DOM - dom: indeks

Ta metoda velja tudi, kadar element ni v imenovanem obrazcu, ker uporablja indeks obrazca in ne njegovega imena.

Sintaksa

Opis

document.forms [kazalo obrazca] .elements [kazalo elementa]
  • indeks obrazca = številka indeksa (začenši z 0) obrazca glede na celotno stran
  • indeks elementa = številka indeksa (začenši z 0) elementa glede na celoten obrazec, ki ga vsebuje

Dostopili bomo do besedilnega polja "Telefon" na strani za registracijo Mercury Tours. Obrazec na tej strani nima imena in atributa ID, zato bo to dober primer.

Korak 1. Pomaknite se na stran za registracijo Mercury Tours in preglejte besedilno polje Phone. Upoštevajte, da obrazec, ki ga vsebuje, nima atributov ID in imena.

Korak 2. V polje Target Selenium IDE vnesite "document.forms [0] .elements [3]" in kliknite gumb Poišči. Selenium IDE mora imeti možnost pravilnega dostopa do besedilnega polja Telefon.

Korak 3. Druga možnost je, da namesto indeksa uporabite ime elementa in dobite enak rezultat. V polje Target Selene IDE vnesite "document.forms [0] .elements [" phone "]". Polje z besedilom Telefon naj bo še vedno označeno.

Iskanje po XPathu

XPath je jezik, ki se uporablja pri iskanju vozlišč XML (Extensible Markup Language). Ker si HTML lahko predstavljamo kot izvedbo XML, lahko XPath uporabimo tudi pri iskanju elementov HTML.

Prednost: Dostopa lahko do skoraj vseh elementov, tudi do tistih brez atributov razreda, imena ali id.

Slabost: To je najbolj zapleten način prepoznavanja elementov zaradi preveč različnih pravil in premislekov.

Na srečo lahko Firebug samodejno ustvari lokatorje XPath Selenium. V naslednjem primeru bomo dostopali do slike, do katere ni mogoče dostopati po metodah, o katerih smo že govorili.

Korak 1. Pomaknite se na domačo stran Mercury Tours in z Firebugom preglejte oranžni pravokotnik na desni strani rumenega polja "Povezave". Glejte spodnjo sliko.

2. korak . Z desno miškino tipko kliknite kodo elementa in nato izberite možnost "Kopiraj XPath".

Korak 3. V polje Selenium IDE v polje Target vnesite poševnico naprej / / in nato prilepite XPath, ki smo ga kopirali v prejšnjem koraku. Vnos v polje Target se mora zdaj začeti z dvema poševnicama naprej "//".

4. korak . Kliknite gumb Najdi. Selenium IDE bi moral biti sposoben označiti oranžno polje, kot je prikazano spodaj.

Povzetek

Sintaksa za uporabo Locatorja

Metoda

Ciljna sintaksa

Primer
Po osebnem dokumentu id = id_elementa id = e-pošta
Po imenu ime = ime_elementa ime = uporabniškoime
Po imenu Uporaba filtrov ime = ime_elementa filter = vrednost_filtra name = tripType vrednost = oneway
Z besedilom povezave link = link_text povezava = PRIJAVA
Oznaka in ID css = id # oznake css = input # email
Oznaka in razred css = oznaka. razred css = input.inputtext
Oznaka in atribut css = oznaka [atribut = vrednost] css = vnos [ime = priimek]
Oznaka, razred in atribut css = oznaka. razred [atribut = vrednost] css = input.inputtext [tabindex = 1]