hogyan használjuk a Firebug-ot szelén szkriptek létrehozásához-Selenium Tutorial #4

az előző oktatóanyagban megtanultuk, hogyan lehet automatizált teszt szkripteket létrehozni a Selenium IDE használatával és annak felvételi funkciójával. A Selenium IDE népes jellemzőit is átlapoztuk. Arra törekedtünk, hogy az olvasót a Selenium IDE legfontosabb jellemzőivel és parancsaival lássuk el.

csak egy emlékeztető – ez a mi 4.bemutató Ingyenes szelén képzés sorozat.

most, hogy megszokta és képes automatizált szkriptek létrehozására a Selenium IDE felvételi módjával, lépjünk tovább egy másik eszközzel, amely nagyon fontos szerepet játszik abban, hogy hatékony teszt szkripteket hozzunk létre “Firebug”néven. A Firebug segít nekünk a webes elemek és weboldalak tulajdonságainak ellenőrzésében.

így ez a bemutató a Firebug telepítéséből és használhatóságából áll.

vegye figyelembe, hogy a tartalom a bemutató nem csak alkalmazható összefüggésben Selenium IDE; inkább a Selenium suite minden egyes eszközére alkalmazható. Így előnyösen szelén kifejezést használnék a szelén IDE helyett.

ebben a tutorial, lehetővé teszi, hogy megtanulják, hogyan kell használni Firebug add-on létrehozására szelén szkriptek. A folyamat során megtanuljuk a Firebug telepítését is.

Bevezetés a Firebug-ba

a Firebug egy Mozilla Firefox kiegészítő. Ez az eszköz segít azonosítani vagy pontosabban megvizsgálni a HTML, CSS és JavaScript elemeket egy weboldalon. Ez segít azonosítani az elemeket egyedileg egy weboldalon. Az elemek egyedülállóan megtalálhatók a lokátor típusaik alapján, amelyeket később tárgyalunk ebben az oktatóanyagban.

hogyan kell telepíteni a Firebug-ot?

a könnyebb megértés érdekében a telepítési folyamatot a következő lépésekre bontjuk.

lépés -1: indítsa el a Mozilla Firefox böngészőt, és keresse meg ezt a Firebug kiegészítő letöltési oldalt. Az URL a Firefox kiegészítők szakaszába vezet.

lépés -2: kattintson a weboldalon található” Hozzáadás a Firefoxhoz ” gombra. Lásd az alábbi ábrát.

3. lépés: Amint rákattintunk a” Hozzáadás a Firefoxhoz “gombra, megjelenik egy biztonsági figyelmeztető mező, kattintson most az” Engedélyezés ” gombra.

4. lépés: Most a Firefox letölti a kiegészítőt a háttérben, és megjelenik egy folyamatjelző sáv.

5. lépés: amint a folyamat befejeződik, megjelenik a szoftver telepítési ablaka. Most kattintson a” Telepítés most ” gombra.

6.lépés: amint a telepítés befejeződik, megjelenik egy felugró ablak, amely azt mondja, hogy a firebug sikeresen telepítve van. Most úgy dönt, hogy bezárja ezt a felugró ablakot.

Megjegyzés: A Selenium IDE-vel ellentétben nem kell újraindítanunk a Firefoxot, hogy tükrözze a firebug telepítését, inkább könnyen jön.

7.lépés: a firebug elindításához a következő módok egyikét választhatjuk:

• nyomja meg az F12 billentyűt
• kattintson a Firebug ikonra, amely a Firefox ablak jobb felső sarkában található.
• 
• kattintson a Firefox menüsorára- >Webfejlesztő- >firebug – > nyissa meg a Firebug-ot.

8. lépés: Most a firebug látható a Firefox ablak alján.

most, hogy letöltöttük és telepítettük a firebug-ot, lépjünk előre a Firebug használatával létrehozandó lokátorok típusaival.

Selenium Script létrehozása a Firebug használatával

a Selenium IDE-vel ellentétben a Firebug-ban automatizált teszt szkripteket hozunk létre manuálisan Több tesztlépés hozzáadásával, hogy logikus és következetes teszt szkriptet alkossunk.

kövessünk egy progresszív megközelítést, és lépésről lépésre értsük meg a folyamatot.

forgatókönyv:

• Open “https://accounts.google.com”.
• érvényesítse az alkalmazás címét
• adjon meg egy érvénytelen felhasználónevet és érvénytelen jelszót, majd küldje el a részleteket a bejelentkezéshez.

1.lépés – Indítsa el a Firefoxot, és nyissa meg a Selenium IDE-t a menüsorból.

2. lépés-Írja be a teszt alatt lévő alkalmazás címét (“https://accounts.google.com”) az alap URL szövegmezőbe.

3.lépés – alapértelmezés szerint a Felvétel gomb be állapotban van. Ne felejtse el kikapcsolni az állapotot, hogy letiltsa a felvételi módot. Figyelem ha a felvételi mód be állapotban van, ez a webböngészővel folytatott interakcióink rögzítését eredményezheti.

4.lépés – Nyissa meg a vizsgált alkalmazást (https://accounts.google.com) a Firefoxban.

5. lépés-Indítsa el a Firebug-ot a webböngészőben.

6.lépés – Válassza ki az üres tesztlépést a szerkesztőben.

7.lépés – Írja be az” open ” szót a szerkesztő ablaktáblában található parancs szövegmezőbe. Az “open” parancs megnyitja a megadott URL-t a webböngészőben.

ajánlás: A parancsok beírása közben a parancs szövegmezőbe a felhasználó kihasználhatja az automatikus kiválasztás funkcióját. Így, amint a felhasználó beír egy karaktersorozatot, a megfelelő javaslatok automatikusan feltöltődnek.

a felhasználó rákattinthat a parancs szövegmezőben elérhető legördülő menüre is, hogy megnézze a Selenium IDE által biztosított összes parancsot.

8. lépés-Most, mozgás a webböngésző Firebug szakasza felé, bontsa ki a HTML kód” head ” szakaszát. Figyeljük meg a HTML tag <title>. Így a weboldal címének érvényesítéséhez szükségünk lenne a <title> címke értékére.

másolja a weboldal címét, amely esetünkben” Bejelentkezés – Google fiókok”.

9. lépés-Válassza ki a szerkesztőben a második üres tesztlépést.

10. lépés-Írja be az “assertTitle” szót a szerkesztő ablaktáblában található parancs szövegmezőbe. Az “assertTitle” parancs visszaadja az aktuális oldal címét, és összehasonlítja a megadott címmel.

11.lépés – illessze be a 8. lépésben másolt címet a második Célmezőjébe.

12.lépés – Most válassza ki a harmadik üres tesztlépést a szerkesztő ablaktáblában

13. Lépés – írja be a” type ” parancsot a parancs szövegmezőbe. A “típus” parancs beírja a megadott webelem értékét a GUI-ba.

14.lépés – Most váltson a webböngészőre, vigye az egérmutatót a bejelentkezési űrlap” E-Mail ” szövegmezőjébe, majd nyomja meg a jobb egérgombbal.

válassza ki a” Vizsgálja elem Firebug ” opciót. Vegye figyelembe, hogy a Firebug automatikusan kiemeli a webes elem megfelelő HTML-kódját, azaz az “e-mail szövegdobozt”.

15.lépés – a fenti ábrán látható HTML-kód az” e-mail ” szövegmezőbe tartozó különálló tulajdonságattribútumokat jeleníti meg. Vegye figyelembe, hogy négy tulajdonság (ID, típus, helyőrző és név) egyedileg azonosítja a webelemet a weboldalon. Így a felhasználó feladata, hogy válasszon egy vagy több tulajdonságot a webes elem azonosításához.

így ebben az esetben az ID-t választjuk lokátorként. Másolja az ID értéket, majd illessze be a harmadik tesztlépés Célmezőjébe az “id=” előtaggal, hogy jelezze a Selenium IDE-t, hogy megtalálja az ID-vel rendelkező webelemet “e-mail” – ként.

(kattintson a nagyított kép megtekintéséhez)

jegyezze fel, hogy a Selenium IDE nagybetűérzékeny, ezért írja be az attribútum értékét gondosan és pontosan ugyanúgy, mint a HTML kódban.

16. lépés-Kattintson a Keresés gombra annak ellenőrzéséhez, hogy a kiválasztott lokátor megtalálja-e a kijelölt UI elemet a weboldalon.

17. lépés-Most a következő lépés a tesztadatok beírása a harmadik tesztlépés érték szövegmezőjébe a szerkesztő ablaktáblán belül. Írja be az” InvalidEmailID ” értéket az Érték mezőbe. A felhasználó megváltoztathatja a teszt adatait, amikor szükséges.

18.lépés – Most válassza ki a negyedik üres tesztlépést a szerkesztő ablaktáblában

19. lépés – Írja be a” type ” parancsot a parancs szövegmezőbe.

20. lépés-Most váltson a webböngészőre, vigye az egérmutatót a bejelentkezési űrlap “jelszó” szövegmezőjébe, majd nyomja meg a jobb kattintást.

válassza ki az “elem ellenőrzése Firebug” opciót.

21.lépés – az alábbi HTML-kód a” jelszó ” szövegmezőhöz tartozó különálló tulajdonságattribútumokat jeleníti meg. Vegye figyelembe, hogy négy tulajdonság (ID, típus, helyőrző és név) egyedileg azonosítja a webelemet a weboldalon. Így a felhasználó feladata, hogy válasszon egy vagy több tulajdonságot a webes elem azonosításához.

így ebben az esetben az ID-t választjuk lokátorként. Másolja az ID értéket, majd illessze be a harmadik tesztlépés Célmezőjébe, az “id=”előtaggal.

(kattintson a nagyított kép megtekintéséhez)

22.lépés – Kattintson a Keresés gombra annak ellenőrzéséhez, hogy a lokátor füles megtalálja-e a kijelölt UI elemet a weboldalon.

23. lépés-Most a következő lépés a tesztadatok beírása a negyedik tesztlépés érték szövegmezőjébe a szerkesztő ablaktáblán belül. Írja be az” InvalidPassword ” szót az érték szövegmezőbe. A felhasználó megváltoztathatja a teszt adatait, amikor szükséges.

24.lépés – Most válassza ki az ötödik üres tesztlépést a szerkesztő ablaktáblában

25. lépés – Írja be a “click” parancsot a parancs szövegmezőbe. A” click ” parancs egy megadott web elemre kattint a weboldalon belül.

26. lépés-Most váltson a webböngészőre, vigye az egérmutatót a bejelentkezési űrlap “Bejelentkezés” gombjára, majd nyomja meg a jobb kattintást.

válassza ki az “elem ellenőrzése Firebug” opciót.

27.lépés – az alábbi HTML-kód a” Bejelentkezés ” gombhoz tartozó különálló tulajdonságattribútumokat jeleníti meg.

válassza ki az ID-t lokátorként. Másolja az ID értéket, majd illessze be a harmadik tesztlépés Célmezőjébe, az “id=”előtaggal.

(kattintson a nagyított kép megtekintéséhez)

28.lépés – Kattintson a Keresés gombra annak ellenőrzéséhez, hogy a kiválasztott lokátor megtalálja-e a kijelölt UI elemet a weboldalon.

a teszt szkript befejeződött. A kész teszt szkript megtekintéséhez olvassa el az alábbi ábrát.

29.lépés – játssza le a létrehozott teszt szkriptet, és mentse el ugyanúgy, mint az előző bemutatóban.

következtetés

ebben az oktatóanyagban bemutattunk egy újabb szkriptkészítő eszközt, vagy inkább egy olyan eszközt, amely segíti a szkript létrehozását.

a Firebug meglepő módon nagy potenciállal rendelkezik a webes elemek megtalálására egy weboldalon. Így a felhasználó kihasználhatja az eszköz képességeit a hatékony és hatékony automatizálási teszt szkriptek kézi létrehozásában.

következő Tutorial # 5: haladunk előre a következő tutorial, mi lenne egy pillantást a különböző típusú lokátorok Selenium és a hozzáférhetőség technika építeni teszt szkriptek. Időközben a reader elkezdheti építeni automatizálási teszt szkriptjeit a Firebug segítségével.