Plánování testů uživatelského rozhraní

  • 6 min

V této části budete postupovat podle Amity a Andyho, když mluví o tom, jak začlenit testy uživatelského rozhraní Selenium do kanálu verze. Začínají procházením testů, které Amita obvykle dělá ručně. Pak namapují ruční kroky Amity na automatizované testovací případy.

Ruční spouštění testů uživatelského rozhraní

Amita čeká, až se Andy objeví. Andy pomůže Amita napsat test uživatelského rozhraní, který se přidá do testovací fáze kanálu. Když přijde, Andy uvidí Amitu v poznámkovém bloku, přeškrtne něco, mumlá a pak se roztrhá stránku.

Andy: Ahoj. Nevypadáš šťastně.

Amita: Nejsem šťastný. Snažím se zjistit, jak napsat automatizovaný test, ale nevím, kde začít. Nemám kód. Mám pocit, že jsem zastaralá.

Andy: Wow, nemyslím si, že je to špatné. Pro jednu věc budeme vždy potřebovat někoho, kdo má na mysli perspektivu uživatele. Neexistuje způsob, jak to automatizovat. U jiného nikdo nezačíná vědět, jak automatizovat testy. Byli jsme všichni začátečníci v určitém okamžiku. Doufám, že proces učení trochu zjednoduším.

Myslím, že nejlepším způsobem, jak začít, je automatizovat něco, co pravidelně děláte ručně. Vyberte test uživatelského rozhraní. Pak si ho projdeme a zapíšeme si kroky. Dále zjistíme, jak tyto kroky automatizovat. Jaký test bychom měli vybrat?

Amita se zhluboka nadechne.

Amita: Pojďme automatizovat modální testy oken. Když kliknu na určité věci, třeba na tlačítko Stáhnout hru , chci ověřit, že se zobrazí správné modální okno. Když pak kliknem mimo modální okno, chci ověřit, že modální okno zmizí a že hlavní okno je znovu aktivní.

Andy: To zní jako skvělé místo, kde začít. Spustíte test. Zapíšu postup.

Amita otevře přenosný počítač s Windows a spustí Google Chrome. Přejde do webové aplikace a ověří, že se otevře domovská stránka.

Tip

Pokud chcete postupovat podle ručních testů Amity, můžete spustit místní kopii webu Space Game. V terminálu editoru Visual Studio Code spusťte následující příkazy a klikněte na odkaz, který vypadá takto Now listening on: http://localhost:5000.

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. Co zkontrolovat dál?

Amita: Zkontroluji, že když kliknem na tlačítko Stáhnout hru , zobrazí se správné modální okno.

Amita klikne na tlačítko Stáhnout hru . Zobrazí se modální okno.

Snímek obrazovky prohlížeče zobrazující modální okno Pro stažení hry na webu Space Game

Andy: Skvělá. Jaká modální okna zkontrolujete dál?

Amita: Příště zkontroluju čtyři herní obrazovky. Potom kliknu na horního hráče na tabuli výsledků. Ověřím, že se zobrazí profil hráče.

Amita klikne na každý ze čtyř miniatur obrázků a zobrazí ukázkové herní obrazovky.

Snímek obrazovky prohlížeče s modálním oknem herní obrazovky na webu Space Game

V dalším kroku Amita klikne na horního hráče na tabuli výsledků. Zobrazí se profil hráče.

Snímek obrazovky prohlížeče zobrazující modální okno tabulky výsledků na webu Space Game

Amita: To zahrnuje modální testy oken. Spouštím tyto testy ve Windows, protože to je to, co většina hráčů používá k návštěvě našeho webu. Testy spouštím v Chromu a když mám čas je také spustit ve Firefoxu a Microsoft Edgi.

Kdybych měl čas, spustil bych všechny testy znovu v systému macOS a Linux, jen abychom zajistili, že jsme kompatibilní s jakýmkoli operačním systémem, který hráči používají k návštěvě webu. Ale musím spouštět mnoho dalších testů.

Co jsou lokátory v Selenium?

V testu Selenium lokátor vybere element HTML z MODELU DOM (Document Object Model) pro akce. Modelu DOM si můžete představit jako stromovou nebo grafovou reprezentaci dokumentu HTML. Každý uzel v dom představuje část dokumentu.

V testu Selenium můžete vyhledat element HTML podle jeho:

  • Atribut id.
  • Atribut name.
  • Výraz XPath.
  • Text odkazu nebo částečný text odkazu
  • Název značky, například body nebo h1.
  • Název třídy CSS.
  • Selektor šablon stylů CSS.

Lokátor, který použijete, závisí na způsobu psaní kódu HTML a na typech dotazů, které chcete provést.

V dokumentu id HTML atribut určuje jedinečný identifikátor elementu HTML. V této části id použijete atribut k dotazování prvků na stránce, protože každý identifikátor musí být jedinečný. Díky tomu id je atribut jedním z nejjednodušších způsobů dotazování prvků v testu Selenium.

Získání ID pro každý element HTML

V této části budete postupovat společně s Amitou a Andy, když shromáždí ID pro každé tlačítko, které Amita klikne, a pro každé výsledné modální okno.

Andy: Vidím, proč tyto testy trvá tak dlouho a mohou být tak frustrující. Budeš je milovat automatizaci. Slibuji.

Tady je to, co uděláme. id Získáme atribut pro každé tlačítko, na které kliknete, a pro modální okno, které se zobrazí. Automatizované testy, které napíšeme, můžou pomocí těchto výrazů zjistit, která tlačítka se mají kliknout a která modální okna se mají očekávat.

Začněme získáním atributu id pro tlačítko Stáhnout hru .

Poznámka:

Pokud chcete, nebo si ho můžete přečíst, můžete postupovat podle těchto kroků. V další části najdete všechny id atributy, které potřebujete při spuštění automatizovaných testů.

  1. V Google Chrome přejděte na domovskou stránku Space Game .

  2. Klikněte pravým tlačítkem myši na tlačítko Stáhnout hru a pak vyberte Zkontrolovat.

    Otevře se okno vývojářských nástrojů. Kód HTML pro tlačítko Stáhnout hru je zvýrazněný.

  3. Prozkoumejte zvýrazněný kód a poznamenejte si id atribut. Zkopírujte ho id pro pozdější použití.

    Snímek obrazovky prohlížeče s oknem vývojářských nástrojů a vybraným prvkem HTML

  4. Vyberte tlačítko Stáhnout hru. Potom zopakujte kroky 2 a 3 a získejte id atribut pro modální okno, které se zobrazí.

  5. Opakujte postup pro čtyři herní obrazovky a nejlepšího hráče na tabuli výsledků.

Amita otevře Microsoft Word a přidá tabulku. Tabulka obsahuje id atribut pro každý odkaz a id atribut pro odpovídající modální okno. Pokud chcete zachovat základní tabulku, záznamy Amita:

  • Tlačítko Stáhnout hru .
  • Jen jedna z herních obrazovek.
  • Nejlepší hráč na tabuli výsledků.

Tabulka Amita vypadá takto:

Funkce Odkaz: id Modální id
Tlačítko Stáhnout hru download-btn pretend-modal
První obrazovka hry screen-01 screen-modal
Top leaderboard player profile-1 profile-modal-1

Plánování automatizovaných testů

Amita: OK. Máme id atribut pro každé tlačítko, na které kliknu. Máme také výsledné modální okno. Co dále?

Andy: Myslím, že jsme připraveni napsat naše testy. Tady je postup:

  1. Vytvořte projekt NUnit, který obsahuje Selenium. Projekt se uloží do adresáře spolu se zdrojovým kódem aplikace.
  2. Napište testovací případ, který používá automatizaci pro kliknutí na zadaný odkaz. Testovací případ ověří, že se zobrazí očekávané modální okno.
  3. Pomocí atributu id , který jsme uložili, zadejte parametry metody testovacího případu. Tato úloha vytvoří sekvenci nebo řadu testů.
  4. Nakonfigurujte testy tak, aby běžely v Prohlížeči Chrome, Firefox a Microsoft Edge. Tento úkol vytvoří matici testů.
  5. Spusťte testy a sledujte, jak se každý webový prohlížeč automaticky objeví.
  6. Sledujte, jak Selenium automaticky prochází řadou testů pro každý prohlížeč.
  7. V okně konzoly ověřte, že všechny testy projdou.

Amita: S radostí zjistím, jak rychle se testy spustí. Můžeme vyzkoušet testy?

Andy: Naprosto. Pojďme se přesunout na můj přenosný počítač. Mám připravený kód aplikace.