CSS Selector be Selenium

Mi az a CSS-választó a következőben: Selenium?

A CSS Selector be Selenium egy karakterláncminta, amely HTML-címke, azonosító, osztály és attribútumok kombinációjával azonosít egy webes elemet. A CSS-szelektorok valamivel fejlettebbek, mint az azonosító vagy név szerinti keresés, de a tapasztalt felhasználók körében ez a legnépszerűbb stratégia. Selenium felhasználók, mivel olyan elemeket is elérhetnek, amelyeknek egyáltalán nincs ID vagy Name attribútumuk.

CSS-választók be Selenium sokféle formában létezhetnek, de ez az útmutató az öt leggyakoribb mintára összpontosít, amelyeket a Selenium SDI:

• 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

Amikor ezt a stratégiát alkalmazzuk Selenium IDE, mindig előtaggal kell ellátni Target doboz „css=„ahogy az az alábbi példákban is látható.”

Miért érdemes CSS szelektorokat használni? Selenium?

A CSS-szelektorok sokak számára az előnyben részesített helymeghatározó stratégiát jelentik. Selenium automatizálási mérnökök, mert egyensúlyt teremtenek a sebesség, a rugalmasság és az olvashatóság között. A modern webes alkalmazások gyakran dinamikusan generált azonosítókat használnak, vagy teljesen eltávolítják a névattribútumokat, így a CSS-szelektorok maradnak az egyetlen megbízható módja annak, hogy egy adott elemet megcélozzanak az oldalon.

A CSS-szelektorok használatának fő előnyei a következők:

• Teljesítmény: A CSS-szelektorokat a böngésző natív motorja dolgozza fel, így gyorsabban futnak, mint a hasonló XPath-kifejezések, különösen régebbi böngészőkben, például az Internet Explorerben.
• Rugalmasság: Egyesítik a tag, class, attribute és a parciális egyezés logikáját, lehetővé téve a tesztelők számára, hogy olyan elemeket is megcélozzanak, amelyeknek nincs stabil azonosítójuk.
• Olvashatóság: A szintaxis tükrözi a fejlesztők jelenlegi CSS-szabályírási módszerét, ami lerövidíti mind a minőségbiztosítási mérnökök, mind a front-end csapatok tanulási görbéjét.
• Böngészőfüggetlen stabilitás: A CSS-szelektorok Chrome-ban egységesen viselkednek, Firefox, Edge és Safari böngészőkben, csökkentve a bizonytalan teszthibákat.

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

Ez a példa a Facebook bejelentkezési oldalán található Email szövegmezőt használja. Az elem azonosítója: „email„, és már hozzáfértek az „Azonosító szerinti helymeghatározás” részben. Most ugyanaz az elem van megcélozva egy Selenium CSS-választó az ID attribútummal.

Szintaxis

css=tag#id

• tag = az éppen elért elem HTML-címkéje
• # = kettőskereszt, amelynek mindig jelen kell lennie egy használatakor 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.comA böngésző fejlesztői eszközeivel (vagy egy régebbi eszközzel, például a Firebuggal) vizsgálja meg az „E-mail vagy telefonszám” szövegmezőt.

Figyeljük meg, hogy a HTML-címke a következő: „bemenet” és az azonosítója „email„. A teljes CSS-választó tehát „css=input#email".

Step 2) Belép "css=input#email„bele a Target doboz Selenium IDE, és kattintson a Keresés gombra. Selenium Az IDE kiemeli az egyező elemet az oldalon.

Címke és osztály – CSS-választó

CSS-választó a következőben: Selenium A HTML-címkét és osztálynevet használó `tag` ugyanazt az elvet követi, mint a `tag` és `ID`, de a kettőskeresztet egy pont (.) helyettesíti.

Szintaxis

css=tag.class

• tag = az éppen elért elem HTML-címkéje
• . = a pont jel, amelynek mindig jelen kell lennie, ha CSS szelektort használunk osztállyal
• class = az elérendő elem osztálya

Step 1) Nyissa meg a demóoldalt https://demo.guru99.com/test/facebook.html és vizsgálja meg az „E-mail vagy telefon” szövegmezőt. Figyelje meg, hogy a HTML-címke „bemenet” és az osztálya „beviteli szöveg".

Step 2) In Selenium IDE-be írja be a következőt: „css=input.inputtext"A Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE felismeri az Email vagy a Phone szövegmezőt.

Vegye figyelembe, hogy ha több elem ugyanazt a HTML-címkét és osztályt használja, akkor a forráskódban csak az első egyező elemet ismeri fel a rendszer. Vizsgálja meg a Jelszó szövegmezőt ugyanazon az oldalon, és figyelje meg, hogy ugyanabba az osztályba tartozik, mint az E-mail vagy Telefon szövegmező.

Az előző ábrán csak az E-mail vagy Telefon szövegmező volt kiemelve, mert az jelenik meg először a forráskódban.

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

Ez a stratégia egy HTML-címkét kombinál egy adott attribútummal, amely az elérni kívánt elemhez tartozik.

Szintaxis

css=tag[attribute=value]

• tag = az éppen elért elem HTML-címkéje
• [ és ] = szögletes zárójelek, amelyek az attribútumot és a hozzá tartozó értéket tartalmazzák
• attribute = a használandó attribútum. Válasszon egyet, amely egyedi az elemre, például name vagy id.
• érték = a kiválasztott attribútum megfelelő értéke.

Step 1) Navigáljon a Mercury Túrák regisztrációs oldala https://demo.guru99.com/test/newtours/register.php és vizsgálja meg a „Vezetéknév” szövegmezőt. Figyelje meg a HTML-címkéjét („input”) és a név attribútumát („lastName”).

Step 2) In Selenium IDE-be írja be a következőt: „css=input[name=lastName]"A Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE sikeresen megtalálja a Vezetéknév mezőt.

Ha több elem ugyanazt a HTML-címkét és attribútumot használja, akkor csak az elsőt ismeri fel a rendszer. A viselkedés megegyezik az azonos címkével és osztállyal rendelkező elemek megkeresésével.

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

Szintaxis

css=tag.class[attribute=value]

• tag = az éppen elért elem HTML-címkéje
• . = a pont jel, amelynek mindig jelen kell lennie, ha CSS szelektort használunk osztállyal
• class = az elérendő elem osztálya
• [ és ] = szögletes zárójelek, amelyek egy adott attribútumot és annak megfelelő értékét tartalmazzák
• attribute = a használandó attribútum. Válasszon egyet, amely egyedi az elemre, például name vagy id.
• érték = a kiválasztott attribútum megfelelő értéke.

Step 1) Nyissa meg a demóoldalt https://demo.guru99.com/test/facebook.html és vizsgálja meg az „E-mail vagy telefonszám” és a „Jelszó” beviteli mezőket. Figyelje meg a HTML-címkéjüket, osztályukat és attribútumaikat. Ez a példa a „tabindex” attribútum.

Step 2) Először az „E-mail vagy telefon” szövegmezőhöz 1-es tabindex értékkel férhet hozzá. Írja be a következőt: „css=input.inputtext[tabindex=1]”Be Selenium Idus Target mezőbe, és kattintson a Keresés gombra. Az E-mail vagy Telefonszám mező kiemelve jelenik meg.

Step 3) A Jelszó beviteli mező megcélzásához egyszerűen cserélje ki a tabindex értéket. Írja be a „css=input.inputtext[tabindex=2]"A Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE sikeresen megtalálja a Jelszó szövegmezőt.

Belső szöveg – CSS-választó

A HTML címkék ritkán kapnak azonosítót, nevet vagy osztályt. Hogyan érheted el őket a következőben? SeleniumA válasz a belső szövegükben rejlik. 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 látható szöveges tartalma

Step 1) Navigáljon a Mercury A túrák honlapja https://demo.guru99.com/test/newtours/ és vizsgáld meg a „Password” címkét. Figyeld meg a HTML-címkéjét (ebben az esetben „font”), és figyeld meg, hogy az elemnek nincsenek class, id vagy name attribútumai.

Step 2) típus css=font:contains(“Jelszó:”) bele Selenium Idus Target mezőbe, és kattintson a Keresés gombra. Selenium Az IDE az alább látható módon megkeresi a jelszó címkét.

Step 3) Ezúttal cserélje ki a belső szöveget „Boston”-ra, hogy a Target válik „css=font:contains(„Boston”)„. Kattintson a Keresés gombra. A „Boston–San Francisco” címke kiemelve jelenik meg, jelezve, hogy Selenium Az IDE akkor is képes megtalálni a hosszú címkéket, ha a belső szövegnek csak az első szavát adjuk meg.

CSS választó vs. XPath a Selenium

Mind a CSS-szelektorokat, mind az XPath-ot használják a webes elemek azonosítására Selenium, mégis eltérő erősségekkel rendelkeznek. Az alábbi táblázat összehasonlítja a két helymeghatározási stratégiát a főbb dimenziók tekintetében:

Kritériumai	CSS-választó	XPath
Sebesség	Gyorsabb, a böngésző natív motorján fut	Lassabb, különösen régebbi böngészőkben
Irány	Csak előre (szülőtől gyermeknek)	Előre és hátra (gyermektől szülőig)
Szintaxis	Rövidebb és hasonló a CSS szabályokhoz	Hosszabb, hierarchikus elérési út kifejezések
Szövegegyeztetés	A :contains() pszeudoosztályra korlátozva	Strong text() és contains() függvények
A legjobb	Statikus elrendezések és modern webalkalmazások	Komplex DOM bejárás és szövegalapú lokátorok

CSS-szelektorok írásának bevált gyakorlatai Selenium

A megbízható CSS-szelektorok írása túlmutat a szintaxis ismeretén. A következő gyakorlatok segítenek a tesztelőknek stabil, karbantartható elemeket létrehozni Selenium szkriptek, amelyek túlélik a felhasználói felület változásait:

1. Az egyedi tulajdonságokat részesítsd előnyben: Mindig olyan id, data-test-id vagy name attribútumokat válasszon, amelyeket kifejezetten az automatizáláshoz adtak hozzá. Ezek akkor is stabilak maradnak, ha a vizuális elrendezés megváltozik.
2. Kerüld a túlságosan egymásba ágyazott szelektorokat: Hosszú láncok, mint pl. div > div > ul > li > a könnyen elromolhat, ha a fejlesztők újragondolják a jelölést. Tartsa a szelektorokat a lehető legrövidebbre.
3. Használd bölcsen a részleges egyezéseket: Mintázatok, mint például [class*="btn-primary"] tolerálják az osztálynév apró változtatásait, de nem kívánt elemekkel is megegyezhetnek.
4. Kerülje az index alapú helymeghatározókat: Választók, mint például nth-child(3) törékenyek, mert egy testvér elem hozzáadása minden pozíciót megváltoztat.
5. Választók validálása a DevTools-ban: Futás előtt a Selenium szkriptet, illessze be a szelektort a Chrome DevTools konzolba a következővel: document.querySelector() annak megerősítésére, hogy pontosan egy elemet ad vissza.
6. Az egyediség érdekében kombináld az attribútumokat: Ha egy osztályt sok elem megoszt, adj hozzá egy attribútumszűrőt, például input.form-control[name="email"] hogy egyértelművé tegye a célpontot.
7. Dokumentálás és újrafelhasználás: Központosítsd a szelektorokat egy Page Object osztályon belül, hogy egyetlen frissítés kijavítson minden olyan tesztet, amely ugyanarra az elemre hivatkozik.

Ezen irányelvek betartása csökkenti a bizonytalanságot, javítja a tesztek végrehajtásának sebességét, és megkönnyíti a Selenium a lakosztályok idővel könnyebben karbantarthatók.

Összefoglalás: CSS választó szintaxis gyorsreferencia

Az alábbi táblázat összesíti az összes Selenium Az útmutatóban tárgyalt CSS választóminta:

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]
Belső szöveg	css=tag:tartalmaz(„szöveg”)	css=font:contains(“Jelszó:”)

GYIK