Helymeghatározók a szelén IDE-ben: CSS-választó - DOM - XPath - ID

Tartalomjegyzék:

Anonim

Mik azok a lokátorok?

A Locator egy olyan parancs, amely megmondja a Selenium IDE-nek, hogy mely GUI elemeknek (például Text Box, Buttons, Check Boxes stb.) Kell működniük. Az automatizálási parancsfájl létrehozásának előfeltétele a helyes GUI elemek azonosítása. De a GUI elemek pontos azonosítása nehezebb, mint amilyennek hangzik. Előfordul, hogy helytelen GUI elemekkel dolgozik, vagy egyáltalán nem! Ezért a Selenium számos lokátort biztosít a GUI elem pontos megkereséséhez

A különböző típusú CSS lokátorok a szelén IDE-ben

Vannak olyan parancsok, amelyekhez nincs szükség lokátorra (például az "open" parancs). A legtöbbjüknek azonban elemelokátorokra van szükségük a Selenium webmeghajtóban.

A lokátor kiválasztása nagyban függ a tesztelés alatt álló alkalmazástól . Ebben az oktatóanyagban a Facebook, az új tours.demoaut között válthatunk azon lokátorok alapján, amelyeket ezek az alkalmazások támogatnak. Hasonlóképpen, a Testing projektben az alkalmazás támogatása alapján kiválaszthatja a Selenium webdriver bármelyik fent felsorolt ​​elem lokátorát.

Hely szerinti azonosítás

Ez a leggyakoribb módszer az elemek megkeresésére, mivel az azonosítók állítólag minden elem esetében egyediek.

Célformátum: az elem id = id

Ebben a példában a Facebookot fogjuk használni tesztalkalmazásként, mert a Mercury Tours nem használ azonosító attribútumokat.

1. lépés. Az oktatóanyag létrehozása óta a Facebook megváltoztatta bejelentkezési oldalának kialakítását. Teszteléshez használja ezt a bemutató oldalt: http://demo.guru99.com/test/facebook.html. Vizsgálja meg az "E-mail vagy telefon" szövegmezőt a Firebug segítségével, és vegye tudomásul annak azonosítóját. Ebben az esetben az azonosító "e-mail".

2. lépés: Indítsa el a Selenium IDE alkalmazást, és írja be az "id = email" szót a Cél mezőbe. Kattintson a Keresés gombra, és vegye észre, hogy az "E-mail vagy telefon" szövegmező sárga színnel jelenik meg és zölddel szegélyezve, vagyis a Selenium IDE képes volt helyesen megtalálni az elemet.

Név szerinti helymeghatározás

Az elemek név szerinti helymeghatározása nagyon hasonlít az azonosító szerinti helymeghatározáshoz, azzal a különbséggel, hogy helyette a "name =" előtagot használjuk.

Célformátum: név = az elem neve

A következő bemutatón most a Mercury Tours-t fogjuk használni, mert minden jelentős elemnek van neve.

1. lépés: Keresse meg a http://demo.guru99.com/test/newtours/ webhelyet, és a Firebug segítségével ellenőrizze a "Felhasználónév" szövegmezőt. Vegye figyelembe a név attribútumát.

Itt látjuk, hogy az elem neve "userName".

2. lépés: A Selenium IDE mezőbe írja be a "name = userName" elemet a Cél mezőbe, majd kattintson a Keresés gombra. A Selenium IDE-nek képesnek kell lennie arra, hogy kiemelje a Felhasználónév mezőt.

Név szerinti hely szerinti szűrés

A szűrők akkor használhatók, ha több elemnek ugyanaz a neve. A szűrők további attribútumok, amelyeket az azonos nevű elemek megkülönböztetésére használnak.

Cél Formátum : name = name_of_the_element filter = value_of_filter

Lássunk egy példát -

1. lépés . Jelentkezzen be a Mercury Tours programba az oktatóprogram használatával, felhasználónévként és jelszóként. Ennek el kell jutnia az alább látható Flight Finder oldalra.

2. lépés: A Firebug használatával vegye figyelembe, hogy az oda-vissza út és az egyirányú választógombok neve "tripType". Azonban különböző VALUE attribútumokkal rendelkeznek, így mindegyiket szűrőként használhatjuk.

3. lépés

  • Először az Egyirányú választógombot fogjuk elérni. Kattintson a szerkesztő első sorára.
  • A Selenium IDE Parancs mezőjébe írja be a "click" parancsot.
  • A Cél mezőbe írja be a következőt: "name = tripType value = oneway". Az "érték = egyirányú" rész a szűrőnk.

4. lépés . Kattintson a Keresés gombra, és vegye észre, hogy a Selenium IDE képes zöld színnel kiemelni az Egyirányú választógombot - ez azt jelenti, hogy a VALUE attribútum segítségével sikeresen hozzáférhetünk az elemhez.

5. lépés : A billentyűparancs végrehajtásához nyomja meg az "X" billentyűt. Figyelje meg, hogy az Egyirányú választógomb kiválasztásra került.

Pontosan ugyanezt a körutazás gomb segítségével teheti meg, ezúttal a "name = tripType value = roundtrip" használatával.

Helymeghatározás linkszöveg alapján

Ez a CSS-lokátor a Seleniumban csak a hiperhivatkozásokra vonatkozik. A hivatkozáshoz úgy jutunk hozzá, hogy a célunkat előtaggal a "link =" kifejezéssel látjuk el, majd a hiperhivatkozás szövege követi.

Cél Formátum : link = LINK_TEXT

Ebben a példában a Mercury Tours honlapján található "REGISZTRÁLÁS" linkre fogunk belépni.

1. lépés.

  • Először ellenőrizze, hogy ki van-e jelentkezve a Mercury Tours szolgáltatásból.
  • Nyissa meg a Mercury Tours honlapját.

2. lépés .

  • A Firebug használatával ellenőrizze a "REGISZTRÁL" linket. A link szövege megtalálható a és a tagek között.
  • Ebben az esetben a link szövegünk "REGISTER". Másolja a link szövegét.

3. lépés . Másolja a link szövegét a Firebug-ba, és illessze be a Selenium IDE Cél mezőjébe. Előtag: "link =".

4. lépés: Kattintson a Keresés gombra, és vegye észre, hogy a Selenium IDE helyesen tudta kiemelni a REGISZTRÁLÁS linket.

5. lépés. A további ellenőrzéshez írja be a "clickAndWait" parancsot a Parancs mezőbe, és hajtsa végre. A Selenium IDE-nek képesnek kell lennie arra, hogy sikeresen rákattintson arra a REGISZTRÁCIÓ linkre, és eljuthasson az alább látható Regisztráció oldalra.

Helymeghatározás CSS Selector segítségével

A szelén CSS-választói olyan karakterláncminták, amelyeket HTML elem, azonosító, osztály és attribútumok kombinációja alapján azonosítanak egy elemre. A szelén CSS szelektorok általi helymeghatározás bonyolultabb, mint az előző módszerek, de ez a haladó szelén felhasználók leggyakoribb helymeghatározási stratégiája, mert még azokhoz az elemekhez is hozzáférhet, amelyeknek nincs azonosítójuk vagy név.

A szelén CSS-választóknak sok formátuma van, de csak a leggyakoribbakra koncentrálunk.

  • Címke és azonosító
  • Címke és osztály
  • Címke és attribútum
  • Címke, osztály és attribútum
  • Belső szöveg

Ennek a stratégiának a használatakor a Cél mezőt mindig a "css =" elé tesszük, amint az a következő példákban látható.

Helymeghatározás CSS-választóval - címke és azonosító

Ebben a példában ismét a Facebook e-mail szövegmezőjét fogjuk használni. Mint emlékszel, "e-mail" azonosítóval rendelkezik, és már elérjük azt a "Hely szerinti azonosítás" részben. Ezúttal egy Selenium CSS Selector-t használunk azonosítóval ugyanahhoz az elemhez való hozzáféréshez.

Szintaxis

Leírás

css = tag # id
  • tag = a hozzáférhető elem HTML-címkéje
  • # = a hash jel. Ennek mindig jelen kell lennie, ha Selenium CSS Selector-t használ azonosítóval
  • id = a hozzáférhető elem azonosítója

Ne feledje, hogy az azonosítót mindig kivonatjel (#) előzi meg.

1. lépés: Keresse meg a www.facebook.com webhelyet. A Firebug használatával vizsgálja meg az "E-mail vagy telefon" szövegmezőt.

Ezen a ponton vegye figyelembe, hogy a HTML címke "input", azonosítója pedig "email". Szintaxisunk tehát "css = input # email" lesz.

2. lépés: Írja be a "css = input # email" szót a Selenium IDE Cél mezőjébe, és kattintson a Keresés gombra. A szelén IDE-nek képesnek kell lennie az elem kiemelésére.

Helymeghatározás CSS Selector - címke és osztály szerint

A CSS Selector segítségével történő keresés a Seleniumban egy HTML-címke és egy osztálynév segítségével hasonló a címke és az azonosító használatához, de ebben az esetben egy hash-jel helyett egy pontot (.) Használunk.

Szintaxis

Leírás

css = tag. osztály
  • tag = a hozzáférhető elem HTML-címkéje
  • . = a pontjel. Ennek mindig jelen kell lennie, ha az osztályhoz CSS Selector-t használ
  • class = az elérni kívánt elem osztálya

1. lépés: Lépjen a http://demo.guru99.com/test/facebook.html bemutató oldalra, és a Firebug segítségével ellenőrizze az "E-mail vagy telefon" szövegmezőt. Figyelje meg, hogy HTML-címkéje "input", osztálya pedig "inputtext".

2. lépés: A Selenium IDE mezőbe írja be a "css = input.inputtext" elemet a Cél mezőbe, majd kattintson a Keresés gombra. A Selenium IDE-nek képesnek kell lennie az E-mail vagy Telefon szövegmező felismerésére.

Vegye figyelembe, hogy ha több elemnek ugyanaz a HTML címkéje és neve van, akkor a forráskódban csak az első elem kerül felismerésre . A Firebug használatával ellenőrizze a Jelszó szövegmezőt a Facebookon, és vegye észre, hogy annak ugyanaz a neve, mint az E-mail vagy Telefon szövegmezőnek.

Az ok, amiért az előző ábrán csak az E-mail vagy a Telefon szövegdobozt emelték ki, az az, hogy az első a Facebook oldalforrásában.

Helymeghatározás CSS-választóval - címke és attribútum

Ez a stratégia a HTML címkét és az elérni kívánt elem meghatározott attribútumát használja.

Szintaxis

Leírás

css = tag [attribútum = érték]
  • tag = a hozzáférhető elem HTML-címkéje
  • [és] = szögletes zárójelek, amelyekbe egy adott attribútum és annak megfelelő értéke kerül
  • attribútum = a használni kívánt attribútum. Célszerű olyan attribútumot használni, amely egyedi az elemhez, például név vagy azonosító.
  • érték = a választott attribútum megfelelő értéke.

1. lépés: Keresse meg a Mercury Tours regisztrációs oldalát (http://demo.guru99.com/test/newtours/register.php), és ellenőrizze a "Vezetéknév" szövegmezőt. Vegye figyelembe a HTML-címkét (ebben az esetben a "bevitel") és a nevét ("vezetéknév").

2. lépés A Selenium IDE mezőbe írja be a "css = input [név = vezetéknév]" szót a Cél mezőbe, majd kattintson a Keresés gombra. A Selenium IDE-nek sikeresen hozzáférnie kell a Vezetéknév mezőhöz.

Ha több elemnek ugyanaz a HTML címkéje és attribútuma van, akkor csak az elsőt ismeri fel . Ez a viselkedés hasonló az elemek azonosított címkével és osztályú CSS-választókkal történő elhelyezéséhez.

Helymeghatározás CSS-választóval - címke, osztály és attribútum

Szintaxis Leírás
css = tag.class [attribútum = érték]
  • tag = a hozzáférhető elem HTML-címkéje
  • . = a pontjel. Ennek mindig jelen kell lennie, ha az osztályhoz CSS Selector-t használ
  • class = az elérni kívánt elem osztálya
  • [és] = szögletes zárójelek, amelyekbe egy adott attribútum és annak megfelelő értéke kerül
  • attribútum = a használni kívánt attribútum. Célszerű olyan attribútumot használni, amely egyedi az elemhez, például név vagy azonosító.
  • érték = a választott attribútum megfelelő értéke.

1. lépés: Menjen a http://demo.guru99.com/test/facebook.html bemutató oldalra, és a Firebug segítségével ellenőrizze az „E-mail vagy telefon” és a „Jelszó” beviteli mezőket. Vegye figyelembe a HTML-címkéiket, osztályukat és attribútumaikat. Ebben a példában kiválasztjuk a 'tabindex' attribútumaikat.

2. lépés. Először elérjük az „E-mail vagy telefon” szövegdobozt. Így 1 tabindex értéket fogunk használni. Írja be a "css = input.inputtext [tabindex = 1]" szót a Selenium IDE Cél mezőjébe, majd kattintson a Keresés gombra. Az „E-mail vagy telefon” beviteli mezőt ki kell jelölni.

3. lépés. A Jelszó beviteli mező eléréséhez egyszerűen cserélje ki a tabindex attribútum értékét. Írja be a "css = input.inputtext [tabindex = 2]" kifejezést a Cél mezőbe, és kattintson a Keresés gombra. A Selenium IDE-nek képesnek kell lennie a Jelszó szövegmező sikeres azonosítására.

Helymeghatározás CSS Selector segítségével - belső szöveg

Mint észrevette, a HTML címkéknek ritkán adnak azonosítót, nevet vagy osztályattribútumot. Szóval, hogyan érhetjük el őket? A válasz a belső szövegeik felhasználásával történik. A belső szövegek azok a tényleges karakterláncminták, amelyeket a HTML címke az oldalon megjelenít.

Szintaxis

Leírás

css = tag: tartalmaz ("belső szöveg")
  • tag = a hozzáférhető elem HTML-címkéje
  • belső szöveg = az elem belső szövege

1. lépés: Keresse meg a Mercury Tours honlapját (http://demo.guru99.com/test/newtours/), és a Firebug segítségével vizsgálja meg a "Jelszó" címkét. Vegye figyelembe a HTML-címkét (amely ebben az esetben "font"), és vegye figyelembe, hogy nincs osztály-, azonosító- vagy névattribútuma.

2. lépés: Írja be a css = font: tartalmaz ("Jelszó:") szöveget a Selenium IDE Célmezőjébe, majd kattintson a Keresés gombra. A Selenium IDE-nek képesnek kell lennie a Jelszó címke elérésére az alábbi képen látható módon.

3. lépés. Ezúttal cserélje ki a belső szöveget "Boston" -ra, hogy a cél most "css = font: tartalmaz (" Boston ") legyen. Kattintson a Keresés gombra. Észre kell vennie, hogy a "Boston - San Francisco" címke kiemelve jelenik meg. Ez azt mutatja, hogy a Selenium IDE akkor is hozzáférhet egy hosszú címkéhez, ha éppen a belső szövegének első szavát jelölte meg.

Helymeghatározás DOM szerint (dokumentumobjektum modell)

A HTML-elemek felépítésének módja egyszerűsítve a Document Object Model (DOM). A Selenium IDE képes használni a DOM-ot az oldalelemek elérésében. Ha ezt a módszert alkalmazzuk, a Célmezőnk mindig "dom = dokumentum ..." -val kezdődik; azonban a "dom =" előtagot általában eltávolítják, mert a Selenium IDE úgyis képes automatikusan értelmezni bármit, ami a "dokumentum" kulcsszóval kezdődik, a szelén DOM-ján belüli útnak.

Négy alapvető módja van egy elem megkeresésének a szelén DOM-on keresztül:

  • getElementById
  • getElementsByName
  • dom: név (csak a megnevezett űrlapon belüli elemekre vonatkozik)
  • dom: index

Helymeghatározás DOM - getElementById szerint

Koncentráljunk az első módszerre - a szelén DOM getElementById módszerével. A szintaxis a következő lenne:

Szintaxis

Leírás

document.getElementById ("az elem azonosítója")

Az elem id = ez az elérni kívánt elem ID attribútumának értéke. Ezt az értéket mindig zárójelpárba kell zárni ("").

1. lépés. Használja ezt a bemutató oldalt: http://demo.guru99.com/test/facebook.html Keresse meg azt, és a Firebug segítségével ellenőrizze a "Tartson bejelentkezve" jelölőnégyzetet. Vegye figyelembe az azonosítóját.

Láthatjuk, hogy az azonosító, amelyet használnunk kell, "persist_box".

2. lépés: Nyissa meg a Selenium IDE alkalmazást, és a Cél mezőbe írja be a "document.getElementById (" persist_box ")" szót, majd kattintson a Keresés gombra. A Selenium IDE-nek képesnek kell lennie a "Tartson bejelentkezve" jelölőnégyzet megtalálására. Bár a Selenium IDE nem tudja kiemelni a jelölőnégyzet belsejét, akkor is élénkzöld szegéllyel veheti körül az elemet, az alábbiak szerint.

Helymeghatározás DOM szerint - getElementsByName

A getElementById metódus egyszerre csak egy elemhez férhet hozzá, és ez az az elem, amelynek a megadott azonosítója van. A getElementsByName módszer más. Olyan elemek tömbjét gyűjti össze, amelyek a megadott névvel rendelkeznek. Az egyes elemeket 0-tól kezdődő index segítségével érheti el.

getElementById

  • Csak egy elemet kap az Ön számára.
  • Ez az elem viseli azt az azonosítót, amelyet a getElementById () zárójelében adott meg.

getElementsByName

  • Elemek gyűjteményét kapja, amelyek neve azonos.
  • Minden elemet 0-tól kezdődő számmal indexelnek, mint egy tömböt
  • Annak megadásához, hogy melyik elemhez kíván hozzáférni, az indexszámát a getElementsByName alábbi szintaxisában lévő szögletes zárójelek közé helyezi.

Szintaxis

Leírás

document.getElementsByName ("név") [index]
  • név = az elem neve, amelyet a „name” attribútum határoz meg
  • index = egész szám, amely jelzi, hogy a getElementsByName tömbben mely elem kerül felhasználásra.

1. lépés: Keresse meg a Mercury Tours honlapját, és jelentkezzen be az "oktatóanyag" felhasználónévként és jelszóként. A Firefoxnak el kell vinnie a Flight Finder képernyőre.

2. lépés: A Firebug használatával ellenőrizze az oldal alsó részén található három választógombot (Gazdasági osztály, Üzleti osztály és Első osztály rádiógombok). Figyelje meg, hogy mindegyiknek ugyanaz a neve, amely a "servClass".

3. lépés: Először nyissa meg a "Gazdasági osztály" választógombot. Mindhárom választógomb közül ez az elem az első, tehát indexe 0. A Selenium IDE mezőbe írja be a "document.getElementsByName (" servClass ") [0]" szót, és kattintson a Keresés gombra. A szelén IDE-nek képesnek kell lennie a Economy osztály választógomb megfelelő azonosítására.

4. lépés: Változtassa az indexszámot 1-re, hogy a Target mostantól dokumentum.getElementsByName ("servClass") legyen [1]. Kattintson a Keresés gombra, és a Selenium IDE képes legyen kiemelni az "Üzleti osztály" választógombot, az alábbiak szerint.

Helykeresés DOM - dom: név szerint

Mint korábban említettük, ez a módszer csak akkor lesz érvényes, ha az elérni kívánt elem egy megnevezett formában található.

Szintaxis

Leírás

document.forms ["az űrlap neve"] .elements ["az elem neve"]
  • űrlap neve = az elérni kívánt elemet tartalmazó űrlapcímke névattribútumának értéke
  • az elem neve = az elérni kívánt elem név attribútumának értéke

1. lépés: Keresse meg a Mercury Tours honlapját (http://demo.guru99.com/test/newtours/), és a Firebug segítségével ellenőrizze a Felhasználónév szövegmezőt. Figyelje meg, hogy a "home" nevű formában található.

2. lépés A Selenium IDE mezőbe írja be a "document.forms [" home "]. Elements [" userName "]" szót, és kattintson a Keresés gombra. A szelén IDE-nek sikeresen hozzáférnie kell az elemhez.

Helykeresés DOM - dom: index szerint

Ez a módszer akkor is alkalmazható, ha az elem nem szerepel egy megnevezett űrlapon belül, mert az űrlap indexét használja, és nem a nevét.

Szintaxis

Leírás

document.forms [a forma indexe] .elements [az elem indexe]
  • űrlap indexe = az űrlap indexszáma (0-tól kezdődően) az egész oldalra vonatkoztatva
  • az elem indexe = az elem indexszáma (0-tól kezdődően) az azt tartalmazó teljes formához képest

Hozzáférünk a "Telefon" szövegmezőhöz a Mercury Tours regisztráció oldalán. Az űrlapon nincs név és azonosító attribútum, így ez jó példa lesz.

1. lépés: Keresse meg a Mercury Tours regisztráció oldalt, és ellenőrizze a Telefon szövegdobozt. Vegye figyelembe, hogy az azt tartalmazó űrlapnak nincs azonosítója és névattribútuma.

2. lépés: Írja be a "document.forms [0] .elements [3]" szót a Selenium IDE Célmezőjébe, majd kattintson a Keresés gombra. A Selenium IDE-nek képesnek kell lennie a Telefon szövegmező megfelelő elérésére.

3. lépés: Alternatív megoldásként használhatja az elem nevét az index helyett, és ugyanazt az eredményt kapja. Írja be a "document.forms [0] .elements [" telefon "]" szót a Selenium IDE Célmezőjébe. A Telefon szövegmezőnek továbbra is kiemeltnek kell lennie.

Helykeresés XPath szerint

Az XPath az XML (Extensible Markup Language) csomópontok felkutatásakor használt nyelv. Mivel a HTML-t az XML megvalósításaként lehet felfogni, ezért az XPath-t is használhatjuk a HTML-elemek felkutatásához.

Előny: Szinte minden elemhez hozzáférhet, még osztály, név vagy azonosító nélküli elemekhez is.

Hátrány: Ez az elemek azonosításának legbonyolultabb módszere a túl sokféle szabály és szempont miatt.

Szerencsére a Firebug automatikusan generál XPath Selenium lokátorokat. A következő példában olyan képhez fogunk hozzáférni, amelyhez a korábban tárgyalt módszerekkel nem lehet hozzáférni.

1. lépés: Keresse meg a Mercury Tours kezdőlapot, és a Firebug segítségével ellenőrizze a sárga "Linkek" mezőtől jobbra található narancssárga téglalapot. Lásd az alábbi képet.

2. lépés . Kattintson jobb gombbal az elem HTML-kódjára, majd válassza az "XPath másolása" lehetőséget.

3. lépés: A Selenium IDE mezőbe írjon be egy előjelet "/" a Cél mezőbe, majd illessze be az előző lépésben másolt XPath-ot. A Cél mezőbe történő bejegyzésnek két előrejelző perccel kell kezdődnie "//".

4. lépés . Kattintson a Keresés gombra. A szelén IDE-nek képesnek kell lennie a narancssárga négyzet kiemelésére az alábbiak szerint.

Összegzés

Szintaxis a lokátor használatához

Módszer

Célszintaxis

Példa
Azonosító szerint id = az elem_azonosítója id = email
Név szerint név = az elem neve név = felhasználónév
Név szerint szűrők használatával név = az elemszűrő neve = a szűrő_értéke név = tripType érték = egyirányú
Linkszöveg szerint link = link_text link = REGISZTRÁL
Címke és azonosító css = tag # id css = input # email
Címke és osztály css = tag. osztály css = input.inputtext
Címke és attribútum css = tag [attribútum = érték] css = input [név = vezetékNév]
Címke, osztály és attribútum css = tag. osztály [attribútum = érték] css = input.inputtext [tabindex = 1]