Seleenin IDE-paikannimet: CSS-valitsin - DOM - XPath - Henkilötunnus

Sisällysluettelo:

Anonim

Mitä ovat paikannuslaitteet?

Locator on komento, joka kertoo Selenium IDE: lle, mitä GUI-elementtejä (esim. Tekstiruutu, painikkeet, valintaruudut jne.) Sen on toimittava. Oikeiden GUI-elementtien tunnistaminen on edellytys automaatioskriptin luomiselle. Mutta GUI-elementtien tarkka tunnistaminen on vaikeampi kuin miltä se kuulostaa. Joskus päädyt työskentelemään virheellisten GUI-elementtien kanssa tai ilman elementtejä ollenkaan! Siksi Selenium tarjoaa useita paikannuslaitteita tarkan GUI-elementin paikantamiseksi

Erilaiset CSS-paikannustyypit Selenium IDE: ssä

On komentoja, jotka eivät tarvitse paikanninta (kuten "avoin" -komento). Suurin osa heistä tarvitsee kuitenkin elementtipaikantimia Selenium-verkko-ohjaimessa.

Paikannin valinta riippuu suurelta osin testattavasta sovelluksestasi . Tässä opetusohjelmassa vaihdamme Facebookin, uusien tours.demoaut-ohjelmien välillä näiden sovellusten tukemien paikanninten perusteella. Vastaavasti testausprojektissasi valitset minkä tahansa yllä luetelluista Selenium-verkko-ohjaimen elementtien paikantajista sovellustuen perusteella.

Paikkatunnus

Tämä on yleisin tapa paikantaa elementtejä, koska tunnisteiden oletetaan olevan yksilöllisiä jokaiselle elementille.

Kohdemuoto: id = elementin id

Tässä esimerkissä käytämme Facebookia testisovelluksena, koska Mercury Tours ei käytä ID-määritteitä.

Vaihe 1. Tämän opetusohjelman luomisen jälkeen Facebook on muuttanut kirjautumissivun suunnittelua. Käytä tätä esittelysivua http://demo.guru99.com/test/facebook.html testaamiseen. Tarkista Sähköposti tai puhelin -tekstiruutu Firebugin avulla ja ota huomioon sen tunnus. Tässä tapauksessa tunnus on "sähköposti".

Vaihe 2. Käynnistä Selenium IDE ja kirjoita "id = email" Kohde-ruutuun. Napsauta Etsi-painiketta ja huomaa, että "Sähköposti tai puhelin" -tekstiruutu korostetaan keltaisella ja reunustaa vihreällä, eli Selenium IDE pystyi paikantamaan kyseisen elementin oikein.

Paikannus nimen mukaan

Elementtien sijainti nimen mukaan on hyvin samankaltaista kuin sijainnin tunnisteen perusteella, paitsi että käytämme sen sijaan "name =" -etuliitettä.

Kohdemuoto: nimi = elementin nimi

Seuraavassa esittelyssä käytämme nyt Mercury Toursia, koska kaikilla merkittävillä elementeillä on nimet.

Vaihe 1. Siirry osoitteeseen http://demo.guru99.com/test/newtours/ ja tarkista "Käyttäjänimi" -tekstiruutu Firebugin avulla. Ota huomioon sen nimi-attribuutti.

Tässä näemme, että elementin nimi on "käyttäjänimi".

Vaihe 2. Kirjoita Selenium IDE -kenttään Kohde-ruutuun "nimi = käyttäjänimi" ja napsauta Etsi-painiketta. Selenium IDE: n pitäisi pystyä löytämään Käyttäjänimi-tekstiruutu korostamalla se.

Sijainti nimen mukaan suodattimien avulla

Suodattimia voidaan käyttää, kun useilla elementeillä on sama nimi. Suodattimet ovat lisäominaisuuksia, joita käytetään erottamaan samannimiset elementit.

Tavoite Muoto : nimi = name_of_the_element suodatin = value_of_filter

Katsotaanpa esimerkki -

Vaihe 1 . Kirjaudu Mercury Toursiin käyttämällä "opetusohjelmaa" käyttäjätunnuksena ja salasanana. Sen pitäisi viedä alla olevalle Flight Finder -sivulle.

Vaihe 2. Firebugin avulla huomaa, että meno-paluu- ja yksisuuntaisilla radiopainikkeilla on sama nimi "tripType". Niillä on kuitenkin erilaiset VALUE-määritteet, joten voimme käyttää kutakin niistä suodattimena.

Vaihe 3.

  • Aiomme käyttää ensin One Way -valintanappia. Napsauta editorin ensimmäistä riviä.
  • Kirjoita Selenium IDE -komennoruutuun komento "napsauta".
  • Kirjoita Kohde-ruutuun "name = tripType value = oneway". "Value = oneway" -osa on suodattimemme.

Vaihe 4 . Napsauta Etsi-painiketta ja huomaa, että Selenium IDE pystyy korostamaan One Way -valintanapin vihreällä - mikä tarkoittaa, että voimme käyttää elementtiä onnistuneesti käyttämällä sen VALUE-attribuuttia.

Vaihe 5. Suorita tämä napsautuskomento painamalla näppäimistön "X" -näppäintä. Huomaa, että One Way -valintanappi valittiin.

Voit tehdä täsmälleen saman asian Round Trip -valintapainikkeella tällä kertaa käyttämällä kohteena "name = tripType value = meno-paluu".

Sijainti linkkitekstin mukaan

Tämäntyyppinen CSS-paikannin Seleniumissa koskee vain hyperlinkkitekstejä. Pääset linkkiin etuliittämällä kohteemme "link =" -merkillä ja sitten hyperlinkkitekstillä.

Kohdemuoto : link = LINK_TEXT

Tässä esimerkissä käytämme "REGISTER" -linkkiä, joka löytyy Mercury Toursin kotisivulta.

Vaihe 1.

  • Varmista ensin, että olet kirjautunut ulos Mercury Toursista.
  • Siirry Mercury Toursin kotisivulle.

Vaihe 2 .

  • Tarkista Firebugin avulla "REGISTER" -linkki. Linkkiteksti löytyy tunnisteiden ja tagien välistä.
  • Tässä tapauksessa linkkitekstimme on "REGISTER". Kopioi linkkiteksti.

Vaihe 3 . Kopioi linkkiteksti Firebugiin ja liitä se Selenium IDE: n Kohde-ruutuun. Etuliite "link =".

Vaihe 4. Napsauta Etsi-painiketta ja huomaa, että Selenium IDE pystyi korostamaan REGISTER-linkin oikein.

Vaihe 5. Vahvistaaksesi lisää kirjoittamalla komento-ruutuun "clickAndWait" ja suorittamalla se. Selenium IDE: n pitäisi pystyä napsauttamaan kyseistä REKISTERI-linkkiä onnistuneesti ja viemään alla olevalle rekisteröintisivulle.

Sijainti CSS-valitsimen avulla

Seleenin CSS-valitsimet ovat merkkijonokuvioita, joita käytetään tunnistamaan elementti HTML-tagin, id: n, luokan ja määritteiden yhdistelmän perusteella. CSS-valitsinten sijainti Seleniumissa on monimutkaisempi kuin edelliset menetelmät, mutta se on edistyneiden Selenium-käyttäjien yleisin paikantamisstrategia, koska se voi käyttää jopa niitä elementtejä, joilla ei ole tunnusta tai nimeä.

Seleniumin CSS-valitsimilla on monia muotoja, mutta keskitymme vain yleisimpiin.

  • Tunniste ja tunnus
  • Tunniste ja luokka
  • Tunniste ja määritteet
  • Tunniste, luokka ja määritteet
  • Sisäinen teksti

Tätä strategiaa käytettäessä etuliite Kohde-ruutuun on aina "css =", kuten seuraavissa esimerkeissä näkyy.

Sijainti CSS-valitsimen avulla - Tunniste ja tunnus

Jälleen käytämme tässä esimerkissä Facebookin Sähköposti-tekstiruutua. Kuten muistat, sillä on "sähköposti" -tunnus, ja olemme jo käyttäneet sitä kohdassa "Sijainti tunnuksen mukaan" -osiossa. Tällä kertaa käytämme Selenium CSS -valitsinta, jolla on tunnus, pääsemään samaan elementtiin.

Syntaksi

Kuvaus

css = tag # id
  • tag = käytetyn elementin HTML-tagi
  • # = hash-merkki. Tämän pitäisi olla aina läsnä, kun käytetään Selenium CSS -valitsinta tunnuksella
  • id = käytetyn elementin tunnus

Muista, että tunnusta edeltää aina hash-merkki (#).

Vaihe 1. Siirry osoitteeseen www.facebook.com. Tarkista Firebugin avulla Sähköposti tai puhelin -tekstiruutu.

Huomaa tässä vaiheessa, että HTML-tunniste on "input" ja sen tunnus on "email". Joten syntaksimme tulee olemaan "css = input # email".

Vaihe 2. Kirjoita "css = input # email" Selenium IDE: n Kohde-ruutuun ja napsauta Etsi-painiketta. Seleeni IDE: n pitäisi pystyä korostamaan kyseinen elementti.

Sijainti CSS-valitsimen mukaan - Tunniste ja luokka

CSS-valitsimen sijainti Seleniumissa HTML-tagin ja luokan nimen avulla on samanlainen kuin tagin ja tunnuksen käyttö, mutta tässä tapauksessa hash-merkin sijaan käytetään pistettä (.).

Syntaksi

Kuvaus

css = tag. luokassa
  • tag = käytetyn elementin HTML-tagi
  • . = pistemerkki. Tämän pitäisi olla aina läsnä, kun käytetään CSS-valitsinta luokan kanssa
  • class = käytetyn elementin luokka

Vaihe 1. Siirry esittelysivulle http://demo.guru99.com/test/facebook.html ja tarkista Firebugin avulla Sähköposti tai puhelin -tekstikenttä. Huomaa, että sen HTML-tagi on "input" ja sen luokka on "inputtext".

Vaihe 2. Kirjoita Selenium IDE -kenttään Kohde-ruutuun "css = input.inputtext" ja napsauta Etsi. Selenium IDE: n pitäisi pystyä tunnistamaan Sähköposti tai Puhelin-tekstiruutu.

Huomaa, että kun useilla elementeillä on sama HTML-tunniste ja nimi, vain lähdekoodin ensimmäinen osa tunnistetaan . Tarkista Firebugin avulla Salasanan tekstikenttä Facebookissa ja huomaa, että sillä on sama nimi kuin Sähköposti tai Puhelin-tekstikentällä.

Syy, miksi vain Sähköposti tai Puhelin-tekstiruutu korostettiin edellisessä kuvassa, on se, että se on ensimmäinen Facebookin sivulähteessä.

Sijainti CSS-valitsimen mukaan - Tunniste ja määritteet

Tämä strategia käyttää HTML-tagia ja tiettyä elementin määritettä, jota käytetään.

Syntaksi

Kuvaus

css = tag [attribute = arvo]
  • tag = käytetyn elementin HTML-tagi
  • [ja] = hakasulkeet, joihin tietty attribuutti ja sitä vastaava arvo sijoitetaan
  • attribute = käytettävä attribuutti. On suositeltavaa käyttää elementille yksilöllistä määritettä, kuten nimi tai tunnus.
  • arvo = valitun määritteen vastaava arvo.

Vaihe 1. Siirry Mercury Toursin rekisteröintisivulle (http://demo.guru99.com/test/newtours/register.php) ja tarkista "Sukunimi" -tekstiruutu. Ota huomioon sen HTML-tagi (tässä tapauksessa "input") ja nimi ("sukunimi").

Vaihe 2. Kirjoita Selenium IDE -kenttään Kohde-ruutuun "css = input [nimi = sukunimi]" ja napsauta Etsi. Selenium IDE: n pitäisi pystyä käyttämään Sukunimi-ruutua onnistuneesti.

Kun useilla elementeillä on sama HTML-tagi ja -attribuutti, vain ensimmäinen tunnistetaan . Tämä käyttäytyminen on samanlainen kuin elementtien sijainti CSS-valitsimilla, joilla on sama tunniste ja luokka.

Paikannus CSS-valitsimen avulla - tagi, luokka ja attribuutti

Syntaksi Kuvaus
css = tag.class [attribute = arvo]
  • tag = käytetyn elementin HTML-tagi
  • . = pistemerkki. Tämän pitäisi olla aina läsnä, kun käytetään CSS-valitsinta luokan kanssa
  • class = käytetyn elementin luokka
  • [ja] = hakasulkeet, joihin tietty attribuutti ja sitä vastaava arvo sijoitetaan
  • attribute = käytettävä attribuutti. On suositeltavaa käyttää elementille yksilöllistä määritettä, kuten nimi tai tunnus.
  • arvo = valitun määritteen vastaava arvo.

Vaihe 1. Siirry esittelysivulle http://demo.guru99.com/test/facebook.html ja tarkista Firebugin avulla Sähköposti tai puhelin ja Salasana -kentät. Ota huomioon heidän HTML-tunniste, luokka ja määritteet. Tässä esimerkissä valitaan heidän tabindex-määritteensä.

Vaihe 2. Pääset ensin Sähköposti tai puhelin -tekstiruutuun. Siksi käytämme tabindex-arvoa 1. Kirjoita "css = input.inputtext [tabindex = 1]" Selenium IDE: n Kohde-ruutuun ja napsauta Etsi. Sähköposti tai puhelin -ruudun tulee olla korostettu.

Vaihe 3. Pääset Salasana-kenttään korvaamalla tabindex-määritteen arvo. Kirjoita Kohde-ruutuun "css = input.inputtext [tabindex = 2]" ja napsauta Etsi-painiketta. Selenium IDE: n on kyettävä tunnistamaan Salasana-tekstiruutu onnistuneesti.

Sijainti CSS-valitsimen avulla - sisäinen teksti

Kuten olet ehkä huomannut, HTML-tunnisteille annetaan harvoin tunnus, nimi tai luokan määritteet. Joten miten pääsemme niihin? Vastaus tapahtuu käyttämällä heidän sisäisiä tekstejään. Sisäiset tekstit ovat todellisia merkkijonokuvioita, jotka HTML-tarra näyttää sivulla.

Syntaksi

Kuvaus

css = tag: sisältää ("sisempi teksti")
  • tag = käytetyn elementin HTML-tagi
  • sisempi teksti = elementin sisempi teksti

Vaihe 1. Siirry Mercury Toursin kotisivulle (http://demo.guru99.com/test/newtours/) ja tutki Firebugin avulla "Salasana" -tarra. Ota huomioon sen HTML-tunniste (joka tässä tapauksessa on "fontti") ja huomaa, että sillä ei ole luokan, tunnuksen tai nimen määritteitä.

Vaihe 2. Kirjoita css = font: sisältää ("Salasana:") Selenium IDE: n Kohde-ruutuun ja napsauta Etsi. Selenium IDE: n pitäisi pystyä käyttämään salasanatunnistetta alla olevan kuvan mukaisesti.

Vaihe 3. Korvaa tällä kertaa sisempi teksti "Bostonilla", jotta kohdetavoitteestasi tulee nyt "css = font: sisältää (" Boston ")". Napsauta Etsi. Huomaa, että "Bostonista San Franciscoon" -tunniste korostuu. Tämä osoittaa, että Selenium IDE voi käyttää pitkää tarraa, vaikka olet juuri ilmoittanut sen sisäisen tekstin ensimmäisen sanan.

Sijainti DOM: n mukaan (Document Object Model)

Asiakirjaobjektimalli (DOM) on yksinkertaisesti ilmaiseva tapa, jolla HTML-elementit jäsennetään. Selenium IDE pystyy käyttämään DOM: ää sivuelementtejä käytettäessä. Jos käytämme tätä menetelmää, Kohde-ruutumme alkaa aina "dom = document ..."; etuliite "dom =" poistetaan kuitenkin normaalisti, koska Selenium IDE pystyy tulkitsemaan kaiken, joka alkaa avainsanalla "asiakirja", poluksi Seleniumin DOM: n sisällä.

Seleenissä on neljä perustapaa löytää elementti DOM: n kautta:

  • getElementById
  • getElementsByName
  • dom: nimi (koskee vain nimetyn muodon elementtejä)
  • dom: hakemisto

Sijainti DOM: n mukaan - getElementById

Keskittykäämme ensimmäiseen menetelmään - käyttämällä DOM: n getElementById-menetelmää seleenissä. Syntaksi olisi:

Syntaksi

Kuvaus

document.getElementById ("elementin tunnus")

elementin tunnus = tämä on käytetyn elementin ID-määritteen arvo. Tämän arvon tulee aina olla sulkeissa ("").

Vaihe 1. Käytä tätä esittelysivua http://demo.guru99.com/test/facebook.html Siirry siihen ja tarkista Pidä minut kirjautuneena -valintaruutu Firebugin avulla. Ota huomioon sen henkilötodistus.

Voimme nähdä, että käytettävä tunnus on "persist_box".

Vaihe 2. Avaa Selenium IDE ja kirjoita Kohde-ruutuun "document.getElementById (" persist_box ")" ja napsauta Etsi. Selenium IDE: n pitäisi pystyä löytämään Pidä minut kirjautuneena -valintaruutu. Vaikka Selenium IDE ei pysty korostamaan valintaruudun sisätilaa, se voi silti ympäröivät elementin kirkkaan vihreällä reunalla alla olevan kuvan mukaisesti.

Paikannus DOM: n mukaan - getElementsByName

GetElementById-menetelmä voi käyttää vain yhtä elementtiä kerrallaan, ja se on määritetyn tunnuksen sisältävä elementti. GetElementsByName-menetelmä on erilainen. Se kerää joukon elementtejä, joilla on määrittämäsi nimi. Voit käyttää yksittäisiä elementtejä hakemistolla, joka alkaa nollasta.

getElementById

  • Se saa vain yhden elementin sinulle.
  • Tällä elementillä on tunnus, jonka olet määrittänyt getElementById () -sulkeissa.

getElementsByName

  • Se saa kokoelman elementtejä, joiden nimet ovat kaikki samat.
  • Jokainen elementti indeksoidaan numerolla, joka alkaa 0: sta, kuten taulukko
  • Määrität haluamasi elementin lisäämällä sen indeksinumeron hakasulkeisiin getElementsByName-sovelluksen alla olevassa syntaksissa.

Syntaksi

Kuvaus

document.getElementsByName ("nimi") [hakemisto]
  • name = elementin nimi määritettynä sen 'name' -määritteellä
  • index = kokonaisluku, joka osoittaa, mitä getElementsByName-taulukon elementtiä käytetään.

Vaihe 1. Siirry Mercury Toursin kotisivulle ja kirjaudu sisään käyttämällä "opetusohjelmaa" käyttäjätunnuksena ja salasanana. Firefoxin pitäisi viedä sinut Flight Finder -näyttöön.

Vaihe 2. Tarkista Firebugin avulla sivun alaosassa olevat kolme valintanappia (Economy-luokan, Business-luokan ja First-luokan valintanapit). Huomaa, että heillä kaikilla on sama nimi, joka on "servClass".

Vaihe 3. Pääset ensin käyttämään "Economy class" -valintanappia. Kaikista näistä kolmesta valintanapista tämä elementti on ensin, joten sen indeksi on 0. Kirjoita Selenium IDE: hen "type.getElementsByName (" servClass ") [0] ja napsauta Etsi-painiketta. Selenium IDE: n pitäisi pystyä tunnistamaan Economy-luokan radiopainike oikein.

Vaihe 4. Vaihda hakemistonumeroksi 1, jotta kohdetavoitteestasi tulee nyt document.getElementsByName ("servClass") [1]. Napsauta Etsi-painiketta, jolloin Selenium IDE: n pitäisi pystyä korostamaan "Business class" -valintanappi alla olevan kuvan mukaisesti.

Sijainti DOM - dom: nimen mukaan

Kuten aiemmin mainittiin, tätä menetelmää sovelletaan vain, jos käyttämäsi elementti sisältyy nimettyyn lomakkeeseen.

Syntaksi

Kuvaus

document.forms ["lomakkeen nimi"] .elements ["elementin nimi"]
  • muodon nimi = lomaketunnisteen nimiattribuutin arvo, joka sisältää elementin, jota haluat käyttää
  • elementin nimi = sen elementin nimi-attribuutin arvo, jota haluat käyttää

Vaihe 1. Siirry Mercury Toursin kotisivulle (http://demo.guru99.com/test/newtours/) ja tarkista Käyttäjänimi-tekstiruutu Firebugin avulla. Huomaa, että se sisältyy muotoon nimeltä "koti".

Vaihe 2. Kirjoita Selenium IDE -kenttään "document.forms [" home "]. Elements [" käyttäjänimi "] ja napsauta Etsi-painiketta. Selenium IDE: n on voitava käyttää elementtiä onnistuneesti.

Sijainti DOM - dom: index mukaan

Tätä menetelmää sovelletaan myös silloin, kun elementti ei ole nimellisessä muodossa, koska se käyttää lomakkeen hakemistoa eikä sen nimeä.

Syntaksi

Kuvaus

document.forms [lomakkeen hakemisto] .elements [elementin hakemisto]
  • lomakkeen hakemisto = lomakkeen hakemistonumero (alkaen 0: sta) koko sivun suhteen
  • elementin indeksi = elementin indeksinumero (alkaen 0: sta) suhteessa sen koko muotoon

Pääset "Puhelin" -tekstiruutuun Mercury Tours -rekisteröintisivulla. Kyseisen sivun lomakkeella ei ole nimeä ja tunnusattribuuttia, joten tästä tulee hyvä esimerkki.

Vaihe 1. Siirry Mercury Toursin rekisteröintisivulle ja tarkista Puhelin-tekstiruutu. Huomaa, että sitä sisältävällä lomakkeella ei ole tunnusta ja nimeä.

Vaihe 2. Kirjoita "document.forms [0] .elements [3]" Selenium IDE: n Kohde-ruutuun ja napsauta Etsi-painiketta. Selenium IDE: n pitäisi pystyä käyttämään Puhelin-tekstiruutua oikein.

Vaihe 3. Vaihtoehtoisesti voit käyttää elementin nimeä sen indeksin sijasta ja saada saman tuloksen. Kirjoita Selenium IDE: n Kohde-kenttään "document.forms [0] .elements [" puhelin "]". Puhelin-tekstiruudun tulisi silti olla korostettu.

Paikannus XPathin mukaan

XPath on kieli, jota käytetään XML (Extensible Markup Language) -solmujen paikantamiseen. Koska HTML: n voidaan ajatella olevan XML: n toteutus, voimme käyttää XPathia myös HTML-elementtien löytämisessä.

Etu: Se voi käyttää melkein mitä tahansa elementtiä, myös niitä, joilla ei ole luokan, nimen tai tunnuksen ominaisuuksia.

Haitta: Se on monimutkaisin menetelmä elementtien tunnistamiseksi liian monien erilaisten sääntöjen ja näkökohtien vuoksi.

Onneksi Firebug voi automaattisesti luoda XPath Selenium -paikantimia. Seuraavassa esimerkissä käytämme kuvaa, jota ei voida käyttää aiemmin keskustelluilla menetelmillä.

Vaihe 1. Siirry Mercury Toursin kotisivulle ja tarkista oranssi suorakulmio keltaisen "Linkit" -ruudun oikealla puolella Firebugin avulla. Katso alla olevaa kuvaa.

Vaihe 2 . Napsauta hiiren kakkospainikkeella elementin HTML-koodia ja valitse "Kopioi XPath" -vaihtoehto.

Vaihe 3. Kirjoita Selenium IDE: ssä yksi eteenpäin viiva "/" Kohde-ruutuun ja liitä sitten XPath, jonka kopioimme edellisessä vaiheessa. Kohde-kentän merkinnän pitäisi nyt alkaa kahdella eteenpäin viivalla "//".

Vaihe 4 . Napsauta Etsi-painiketta. Selenium IDE: n pitäisi pystyä korostamaan oranssi ruutu alla olevan kuvan mukaisesti.

Yhteenveto

Syntaksi paikanninkäytölle

Menetelmä

Kohdesyntaksi

Esimerkki
Henkilötodistuksen mukaan id = elementin_tunnus id = sähköposti
Nimeltä nimi = elementin nimi nimi = käyttäjänimi
Nimeä käyttämällä suodattimia name = elementtisuodattimen nimi = suodattimen arvo nimi = tripType-arvo = yksisuuntainen
Linkkitekstillä link = link_teksti link = REKISTERÖIDY
Tunniste ja tunnus css = tag # id css = syöte # sähköposti
Tunniste ja luokka css = tag. luokassa css = input.inputtext
Tunniste ja attribuutti css = tag [attribute = arvo] css = input [nimi = sukunimi]
Tunniste, luokka ja attribuutti css = tag. luokka [attribuutti = arvo] css = input.inputtext [tabindex = 1]