A felhasználói felületi tesztek megtervezése

  • 6 perc

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:5000hivatkozá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.

Screenshot of a browser showing the Download game modal window on the Space Game website.

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.

Screenshot of a browser showing the game screen modal window on the Space Game website.

A következő Amita a ranglista legjobb játékosára kattint. Megjelenik a játékos profilja.

Screenshot of a browser showing the leaderboard modal window on the Space Game website.

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 vagy h1.
  • 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.

  1. A Google Chrome-ban nyissa meg a Space Game kezdőlapját.

  2. 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.

  3. Vizsgálja meg a kiemelt kódot, és jegyezze fel az id attribútumot. Másolja ki a id későbbi verziót.

    Screenshot of a browser showing the developer tools window and a selected HTML element.

  4. 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.

  5. 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:

  1. 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.
  2. Í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.
  3. 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.
  4. Konfigurálja a teszteket a Chrome, a Firefox és a Microsoft Edge futtatásához. Ez a feladat létrehoz egy tesztmátrixot .
  5. Futtassa a teszteket, és figyelje meg, hogy minden webböngésző automatikusan megjelenik.
  6. Nézze meg, ahogy a szelén automatikusan végigfut az egyes böngészők tesztsorozatán.
  7. 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.