A felhasználói felületi tesztek megtervezése
Ebben a szakaszban azt fogja követni, hogy Mita és Andy hogyan építhetők be a Selenium felhasználói felületi tesztjei a kiadási folyamatba. Először végigjárják azOkat a teszteket, amelyeket Amita általában manuálisan végez. Ezután leképezették Amita manuális lépéseit az automatizált tesztelési esetekre.
Felhasználói felületi tesztek manuális futtatása
Amita arra vár, hogy Andy megjelenjen. Andy segít Amita-nak egy felhasználói felületi teszt írásában, amelyet hozzáadunk a folyamat tesztelési szakaszához. Amikor megérkezik, Andy azt látja, hogy Amita firkál a jegyzetfüzetében, átküld valamit, felkavarja, majd széttöri az oldalt.
Andy: Szia. Nem tűnsz boldognak.
Amita: Nem vagyok boldog. Próbálom kitalálni, hogyan kell automatizált tesztet írni, de nem tudom, hol kezdjem. Én nem kódot. Úgy érzem, elavult vagyok.
Andy: Wow, nem hiszem, hogy ez olyan rossz. Egy dolog, mindig szükségünk lesz valakire, aki szem előtt tartva a felhasználó szemszögéből. Ezt nem lehet automatizálni. Egy másik esetben senki sem kezdi el tudni, hogyan automatizálja a teszteket. Mindannyian kezdők voltunk egy bizonyos ponton. Remélhetőleg, tudom, hogy a tanulási folyamat egy kicsit könnyebb.
Azt hiszem, a legjobb módja annak, hogy elkezdi automatizálni valamit, amit rendszeresen csinál manuálisan. Válasszon felhasználói felületi tesztet. Ezután haladjunk végig rajta, és írjuk le a lépéseket. A következő lépésben megtudhatja, hogyan automatizálhatja ezeket a lépéseket. Milyen tesztet válasszunk?
Amita mély lélegzetet vesz.
Amita: Automatizáljuk a modális ablak tesztjeit. Amikor rákattintok bizonyos dolgokra, például a Játék letöltése gombra, ellenőrizni szeretném, hogy megjelenik-e a megfelelő modális ablak. Ezután, amikor a modális ablaktól távolra kattintok, ellenőrizni szeretném, hogy a modális ablak eltűnik-e, és hogy a fő ablak ismét aktív-e.
Andy: Ez úgy hangzik, mint egy jó hely kezdeni. Ön futtatja a tesztet. Leírom az eljárást.
Amita megnyit egy Windows laptopot, és elindítja a Google Chrome-ot. Megnyitja a webalkalmazást, és ellenőrzi, hogy megnyílik-e a kezdőlap.
Tipp.
Ha követni szeretné Amita manuális tesztjeit, futtathatja a Space Game webhelyének egy helyi példányát. A Visual Studio Code terminálon futtassa az alábbi parancsokat, majd kattintson a hasonló Now listening on: http://localhost:5000
hivatkozásra.
git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
Andy: OK. Mit ellenőriz a következő lépésben?
Amita: Megnézem, hogy amikor a Letöltés gombra kattintok, megjelenik a megfelelő modális ablak.
Amita a Játék letöltése gombra kattint. Megjelenik a modális ablak.
Andy: Nagyszerű. Milyen modális ablakokat ellenőriz legközelebb?
Amita: Következő én ellenőrizze a négy játék képernyők. Ezután a ranglistán a legjobb játékosra kattintok. Ellenőrizem, hogy megjelenik-e a játékos profilja.
Amita a négy miniatűr kép mindegyikére kattint a példajáték képernyőinek megjelenítéséhez.
A következő Amita a ranglista legjobb játékosára kattint. Megjelenik a játékos profilja.
Amita: Ez lefedi a modális ablak teszteket. Futtatom ezeket a teszteket a Windowson, mert a legtöbb játékos ezt használja a webhely meglátogatásához. Futtatom a teszteket a Chrome-on, és ha van időm, a Firefoxon és a Microsoft Edge-en is futtatom őket.
Ha lenne időm, újra futtatnám az összes tesztet macOS-en és Linuxon, csak azért, hogy minden olyan operációs rendszerrel kompatibilisek lehessek, amelyet a játékosok használnak a webhely felkereséséhez. De sok más tesztet is le kell futtatnom.
Mik azok a lokátorok a szelénben?
A szeléntesztben a lokátor kiválaszt egy HTML-elemet a DOM -ból (Document Object Model), hogy működjön. Gondoljon a DOM-ra egy HTML-dokumentum fa- vagy gráfábrázolásaként. A DOM minden csomópontja a dokumentum egy részét jelöli.
A szeléntesztben a következő módon talál egy HTML-elemet:
id
Attribútum.name
Attribútum.- XPath-kifejezés.
- Szöveg vagy részleges hivatkozásszöveg csatolása.
- Címke neve, például
body
vagyh1
. - CSS-osztály neve.
- CSS-választó.
A használt kereső a HTML-kód írási módjától és a végrehajtandó lekérdezések típusától függ.
Egy HTML-dokumentumban az id
attribútum egy HTML-elem egyedi azonosítóját adja meg. Itt az attribútumot fogja használni a id
lap elemeinek lekérdezéséhez, mivel minden azonosítónak egyedinek kell lennie. Így az attribútum az id
egyik legegyszerűbb módja annak, hogy a szelénteszt elemeit lekérdezhesse.
Az egyes HTML-elemek azonosítójának lekérése
Itt Azt és Andyt követve gyűjti össze az Egyes gombok azonosítóját, amelyekre Amita kattint, és minden eredményül kapott modális ablakhoz.
Andy: Látom, miért tart ilyen sokáig ezek a tesztek, és milyen frusztráló lehet. Szeretni fogja automatizálni őket. Ígérem.
Ezt fogjuk tenni. Minden egyes kattintásra és a megjelenő modális ablakhoz lekérjük id
az attribútumot. Az automatizált tesztek, amelyeket írunk, ezekkel a kifejezésekkel megtudhatja, hogy mely gombokra kell kattintania, és mely modális ablakokat kell használnia.
Kezdjük a Letöltés gomb attribútumának lekérésévelid
.
Megjegyzés:
Ha szeretné, vagy csak elolvassa az alábbi lépéseket, kövesse az alábbi lépéseket. A következő szakasz az id
automatikus tesztek futtatásakor szükséges összes attribútumot tartalmazza.
A Google Chrome-ban nyissa meg a Space Game kezdőlapját.
Kattintson a jobb gombbal a Játék letöltése gombra, majd válassza a Vizsgálat lehetőséget.
Megnyílik a fejlesztői eszközök ablaka. A Játék letöltése gomb HTML-kódja ki van emelve.
Vizsgálja meg a kiemelt kódot, és jegyezze fel az
id
attribútumot. Másolja ki aid
későbbi verziót.Válassza a Játék letöltése gombot. Ezután ismételje meg a 2. és a 3. lépést a
id
megjelenő modális ablak attribútumának lekéréséhez.Ismételje meg a folyamatot a négy játék képernyő és a felső játékos a ranglistán.
Amita megnyitja a Microsoft Wordet, és hozzáad egy táblát. A táblázat tartalmazza az id
egyes hivatkozások attribútumát és a id
megfelelő modális ablak attribútumát. A tábla alapszintű megőrzéséhez Amita rekordok:
- A Játék letöltése gomb.
- Csak egy játékképernyő.
- A ranglista legjobb játékosa.
Így néz ki Amita táblázata:
Funkció | Hivatkozás id |
Modális id |
---|---|---|
Játék letöltése gomb | download-btn |
pretend-modal |
Első játékképernyő | screen-01 |
screen-modal |
Legjobb ranglista-lejátszó | profile-1 |
profile-modal-1 |
Az automatizált tesztek megtervezése
Amita: OK. Minden egyes gombra kattintva rendelkezünk az id
attribútummal. Az eredményként kapott modális ablak is meg van adva. A következő lépések
Andy: Azt hiszem, készen állunk a tesztek megírására. A következőt fogjuk tenni:
- Hozzon létre egy Seleniumot tartalmazó NUnit-projektet. A projekt az alkalmazás forráskódjával együtt a könyvtárban lesz tárolva.
- Írjon egy tesztesetet, amely automatizálással kattint a megadott hivatkozásra. A teszteset ellenőrzi, hogy megjelenik-e a várt modális ablak.
- Használja a
id
mentett attribútumot a teszteset metódus paramétereinek megadásához. Ez a feladat tesztek sorozatát vagy sorozatát hozza létre. - Konfigurálja a teszteket a Chrome, a Firefox és a Microsoft Edge futtatásához. Ez a feladat létrehoz egy tesztmátrixot .
- Futtassa a teszteket, és figyelje meg, hogy minden webböngésző automatikusan megjelenik.
- Nézze meg, ahogy a szelén automatikusan végigfut az egyes böngészők tesztsorozatán.
- A konzolablakban ellenőrizze, hogy minden teszt sikeres-e.
Amita: Izgatott leszek, hogy milyen gyorsan futnak a tesztek. Kipróbálhatjuk a teszteket?
Andy: Abszolút. Menjünk át a laptopomra. Készen áll az alkalmazáskód.