CSS Selector be Selenium

By: Krishna Rungta Krishna Rungta
Hours korszerűsített

Mi az a CSS Selector?

CSS-választók be Selenium olyan karakterlánc-minták, amelyek egy elem azonosítására szolgálnak HTML címke, azonosító, osztály és attribútumok kombinációja alapján. Helymeghatározás CSS-választókkal Selenium bonyolultabb, mint az előző módszerek, de ez a haladó legelterjedtebb helymeghatározási stratégiája Selenium felhasználók számára, mert még azokat az elemeket is elérheti, amelyeknek nincs azonosítója vagy neve.

CSS-választók be Selenium sok formátuma van, de mi csak a leggyakoribbakra koncentrálunk. A különböző típusú CSS-keresők Selenium IDE

  • 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

Ha ezt a stratégiát használjuk, mindig előtagozzuk a Target mezőbe a „css=” karakterláncot, amint az a következő példákban látható.

címke és azonosító – CSS Selector

Ebben a példában ismét a Facebook E-mail szövegdobozát fogjuk használni. Amint emlékszik, „e-mail” azonosítója van, és már elértük a „Helymeghatározás azonosító alapján” részben. Ezúttal a Selenium CSS-választó azonosítóval ugyanazon elem eléréséhez.

Szintaxis

css=tag#id

  • tag = az éppen elért elem HTML-címkéje
  • # = a hash jel. Ennek mindig jelen kell lennie, amikor a Selenium CSS-választó azonosítóval
  • id = az elérendő elem azonosítója

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

Step 1) navigáljon www.facebook.com. A Firebug segítségével vizsgálja meg az „E-mail vagy telefon” szövegmezőt.

Ezen a ponton vegye figyelembe, hogy a HTML-címke „input”, az azonosítója pedig „e-mail”. Tehát a szintaxisunk „css=input#email” lesz.

Címke és azonosító – CSS-választó

Step 2) Írja be a „css=input#email” kifejezést a Target doboz Selenium IDE, és kattintson a Keresés gombra. Selenium Az IDE-nek képesnek kell lennie arra, hogy kiemelje ezt az elemet.

Címke és azonosító – CSS-választó

címke és osztály – CSS Selector

CSS Selector be Selenium HTML címke és osztálynév használata hasonló a címke és azonosító használatához, de ebben az esetben a hash jel helyett egy pontot (.) használunk.

Szintaxis

css=tag.class

  • tag = az éppen elért elem HTML-címkéje
  • . = a pontjel. Ennek mindig jelen kell lennie, ha CSS Selectort használunk osztályokkal
  • class = az elérendő elem osztálya

Step 1) Menjen a bemutató oldalra https://demo.guru99.com/test/facebook.html és a Firebug segítségével ellenőrizze az „E-mail vagy Telefon” szövegmezőt. Figyelje meg, hogy a HTML-címkéje „input”, az osztálya pedig „inputtext”.

Címke és osztály – CSS Selector

Step 2) In Selenium IDE, írja be a „css=input.inputtext” kifejezést a Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE-nek fel kell tudnia ismerni az E-mail vagy Telefon szövegmezőt.

Címke és osztály – CSS Selector

Vegye figyelembe, hogy ha több elemnek ugyanaz a HTML-címkéje és neve, akkor a rendszer csak a forráskód első elemét ismeri fel. A Firebug segítségével ellenőrizze a Jelszó szövegmezőt a Facebookon, és vegye észre, hogy a neve megegyezik az E-mail vagy Telefon szövegmezővel.

Címke és osztály – CSS Selector

Az ok, amiért csak az E-mail vagy Telefon szövegmező volt kiemelve az előző ábrán, az az oka, hogy a Facebook oldalának forrásában az első helyen szerepel.

Címke és osztály – CSS Selector

KAPCSOLÓDÓ CIKKEK

címke és attribútum – CSS Selector

Ez a stratégia a HTML-címkét és az elérni kívánt elem egy adott attribútumait használja.

Szintaxis

css=tag[attribute=value]

  • tag = az éppen elért elem HTML-címkéje
  • [ és ] = szögletes zárójel, amelybe egy adott attribútum és a hozzá tartozó érték kerül
  • attribútum = a használandó attribútum. Célszerű olyan attribútumot használni, amely egyedi az elemre, például név vagy azonosító.
  • érték = a kiválasztott attribútum megfelelő értéke.

Step 1) navigáljon Mercury Tours regisztrációs oldala https://demo.guru99.com/test/newtours/register.php és ellenőrizze a „Vezetéknév” szövegmezőt. Vegye figyelembe a HTML címkéjét (ebben az esetben „input”) és nevét („lastName”).

Címke és attribútum – CSS Selector

Step 2) In Selenium IDE, írja be a „css=input[name=lastName]” kifejezést a Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE-nek sikeresen hozzá kell férnie a Vezetéknév mezőhöz.

Címke és attribútum – CSS Selector

Ha több elemnek ugyanaz a HTML-címkéje és attribútuma, csak az elsőt ismeri fel a rendszer. Ez a viselkedés hasonló az elemek helymeghatározásához ugyanazzal a címkével és osztályú CSS-szelektorok használatával.

címke, osztály és attribútum – CSS Selector

Szintaxis

css=tag.class[attribute=value]

  • tag = az éppen elért elem HTML-címkéje
  • . = a pontjel. Ennek mindig jelen kell lennie, ha CSS Selectort használunk osztályokkal
  • class = az elérendő elem osztálya
  • [ és ] = szögletes zárójel, amelybe egy adott attribútum és a hozzá tartozó érték kerül
  • attribútum = a használandó attribútum. Célszerű olyan attribútumot használni, amely egyedi az elemre, például név vagy azonosító.
  • érték = a kiválasztott attribútum megfelelő értéke.

Step 1) Menjen a bemutató oldalra https://demo.guru99.com/test/facebook.html é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éket, osztályokat és attribútumokat. Ebben a példában kiválasztjuk a „tabindex” attribútumaikat.

Címke, osztály és attribútum – CSS-választó

Step 2) Először az „E-mail vagy telefon” szövegmezőt fogjuk elérni. Így a tabindex értéke 1. Írja be a „css=input.inputtext[tabindex=1]” értéket Selenium Idus Target mezőbe, és kattintson a Keresés gombra. Az „E-mail vagy Phone” beviteli mezőt ki kell jelölni.

Címke, osztály és attribútum – CSS-választó

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

Címke, osztály és attribútum – CSS-választó

belső szöveg – CSS Selector

Amint azt bizonyára észrevette, a HTML-címkék ritkán kapnak azonosítót, nevet vagy osztályattribútumot. Szóval, hogyan érhetjük el őket? A válasz a belső szövegeik felhasználása. A belső szövegek azok a tényleges karakterlánc-minták, amelyeket a HTML-címke megjelenít az oldalon.

Szintaxis

css=tag:contains("inner text")

  • tag = az éppen elért elem HTML-címkéje
  • belső szöveg = az elem belső szövege

Step 1) navigáljon Mercury Tours honlapja https://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éjét (amely ebben az esetben „font”), és vegye figyelembe, hogy nincs osztály-, azonosító- vagy névattribútuma.

Belső szöveg – CSS Selector

Step 2) típus css=font:contains(“Jelszó:”) bele Selenium Idus Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE-nek hozzá kell férnie a Jelszó címkéhez, az alábbi képen látható módon.

Belső szöveg – CSS Selector

Step 3) Ezúttal cserélje ki a belső szöveget a „Boston” szövegre, hogy a Target mostantól „css=font:contains(“Boston”) lesz. Kattintson a Keresés gombra. Észre kell vennie, hogy a „Boston to San Francisco” címke kiemelésre kerül. Ez azt mutatja neked Selenium Az IDE akkor is hozzáférhet egy hosszú címkéhez, ha csak a belső szövegének első szavát jelölte meg.

Belső szöveg – CSS Selector

Összegzésként

Szintaxis helymeghatározáshoz CSS-választó használatával

Módszer Target Szintaxis Példa
Címke és azonosító css=tag#id css=input#email
Címke és osztály css=tag.class css=input.inputtext
Címke és attribútum css=tag[attribútum=érték] css=input[name=lastName]
Címke, osztály és attribútum css=tag.class[attribute=value] css=input.inputtext[tabindex=1]