Planera användargränssnittstesterna

  • 6 minuter

I det här avsnittet följer du med Amita och Andy när de pratar om hur du införlivar Selenium UI-tester i versionspipelinen. De börjar med att gå igenom de tester som Amita normalt gör manuellt. Sedan mappar de Amitas manuella steg till automatiserade testfall.

Köra användargränssnittstester manuellt

Amita väntar på att Andy ska dyka upp. Andy kommer att hjälpa Amita att skriva ett användargränssnittstest som läggs till i testfasen i pipelinen. När han anländer ser Andy Amita klottra i sin anteckningsbok, korsa ut något, muttra och sedan riva ut sidan.

Andy: Hej. Du ser inte glad ut.

Amita: Jag är inte glad. Jag försöker ta reda på hur man skriver ett automatiserat test, men jag vet inte var jag ska börja. Jag kodar inte. Det känns som om jag är föråldrad.

Jag tror inte att det är så illa. För det första behöver vi alltid någon som har användarens perspektiv i åtanke. Det finns inget sätt att automatisera det. För en annan börjar ingen veta hur man automatiserar tester. Vi var alla nybörjare någon gång. Förhoppningsvis kan jag göra inlärningsprocessen lite enklare.

Jag tror att det bästa sättet att börja är att automatisera något du regelbundet gör manuellt. Välj ett användargränssnittstest. Sedan går vi igenom det och skriver ned stegen. Nu ska vi ta reda på hur du automatiserar dessa steg. Vilket test ska vi välja?

Amita tar ett djupt andetag.

Amita: Nu ska vi automatisera testerna för modala fönster. När jag klickar på vissa saker, till exempel knappen Ladda ned spel , vill jag kontrollera att rätt modal fönster visas. När jag sedan klickar bort från det modala fönstret vill jag kontrollera att det modala fönstret försvinner och att huvudfönstret är aktivt igen.

Andy: Det låter som ett bra ställe att börja på. Du kör testet. Jag skriver ner proceduren.

Amita öppnar en bärbar Windows-dator och lanserar Google Chrome. Hon går till webbappen och verifierar att startsidan öppnas.

Dricks

Om du vill följa med i Amitas manuella tester kan du köra en lokal kopia av Space Game-webbplatsen. I Visual Studio Code-terminalen kör du följande kommandon och klickar sedan på länken som ser ut som 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. Vad ska du kontrollera härnäst?

Amita: Jag kontrollerar att när jag klickar på knappen Ladda ned spel visas rätt modal fönster.

Amita klickar på knappen Ladda ned spel . Det modala fönstret visas.

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

Andy: Bra. Vilka modala fönster kontrollerar du härnäst?

Amita: Nästa jag kontrollera de fyra spel skärmar. Efter det klickar jag på den bästa spelaren på rankningslistan. Jag kontrollerar att spelarens profil visas.

Amita klickar på var och en av de fyra miniatyrbilderna för att visa exempelspelskärmarna.

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

Nästa Amita klickar på den bästa spelaren på rankningslistan. Spelarens profil visas.

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

Amita: Det omfattar modala fönstertester. Jag kör dessa tester på Windows eftersom det är vad de flesta spelare använder för att besöka vår webbplats. Jag kör testerna på Chrome, och när jag har tid kör jag dem också på Firefox och Microsoft Edge.

Om jag hade tid skulle jag köra alla tester igen på macOS och Linux, bara för att säkerställa att vi är kompatibla med alla operativsystem som spelarna använder för att besöka webbplatsen. Men jag måste köra många andra tester.

Vad är positionerare i Selenium?

I ett Selenium-test väljer en positionerare ett HTML-element från DOM (Dokumentobjektmodell) att agera på. Tänk på DOM som en träd- eller grafrepresentation av ett HTML-dokument. Varje nod i DOM representerar en del av dokumentet.

I ett Selenium-test kan du hitta ett HTML-element efter dess:

  • id attribut.
  • name attribut.
  • XPath-uttryck.
  • Länka text eller partiell länktext.
  • Taggnamn, till exempel body eller h1.
  • CSS-klassnamn.
  • CSS-väljare.

Vilken positionerare du använder beror på hur HTML-koden skrivs och vilka typer av frågor du vill utföra.

I ett HTML-dokument id anger attributet en unik identifierare för ett HTML-element. Här använder id du attributet för att fråga efter element på sidan eftersom varje identifierare måste vara unik. Detta gör id attributet till ett av de enklaste sätten att fråga efter element i ett Selenium-test.

Hämta ID:t för varje HTML-element

Här följer du med Amita och Andy när de samlar in ID:t för varje knapp som Amita klickar på och för varje resulterande modalfönster.

Andy: Jag kan se varför dessa tester tar så lång tid och kan vara så frustrerande. Du kommer att älska att automatisera dem. Jag lovar.

Här är vad vi ska göra. Vi hämtar id attributet för varje knapp du klickar på och för det modala fönstret som visas. De automatiserade tester som vi skriver kan använda dessa uttryck för att veta vilka knappar som ska klickas och vilka modala fönster som ska förväntas.

Vi börjar med att hämta id attributet för knappen Ladda ned spel .

Kommentar

Du kan följa de här stegen om du vill eller bara läsa med. Nästa avsnitt innehåller alla id attribut som du behöver när du kör de automatiserade testerna.

  1. Gå till startsidan för Space Game i Google Chrome.

  2. Högerklicka på knappen Ladda ned spel och välj sedan Inspektera.

    Fönstret Utvecklarverktyg öppnas. HTML-koden för knappen Ladda ned spel är markerad.

  3. Granska den markerade koden och notera attributet id . Kopiera för id senare.

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

  4. Välj knappen Ladda ned spel. Upprepa sedan steg 2 och 3 för att hämta id attributet för det modala fönstret som visas.

  5. Upprepa processen för de fyra spelskärmarna och den bästa spelaren på rankningslistan.

Amita öppnar Microsoft Word och lägger till en tabell. Tabellen innehåller id attributet för varje länk och id attributet för motsvarande modalfönster. Amita-poster för att hålla tabellen grundläggande:

  • Knappen Ladda ned spel .
  • Bara en av spelskärmarna.
  • Den bästa spelaren på rankningslistan.

Så här ser Amitas tabell ut:

Funktion Länk id Modala id
Ladda ned spelknapp download-btn pretend-modal
Första spelskärmen screen-01 screen-modal
Topplistespelare profile-1 profile-modal-1

Planera de automatiserade testerna

Amita: OK. Vi har attributet id för varje knapp jag klickar på. Vi har också det resulterande modalfönstret. Vad händer härnäst?

Andy: Jag tror att vi är redo att skriva våra tester. Så här gör vi:

  1. Skapa ett NUnit-projekt som innehåller Selenium. Projektet lagras i katalogen tillsammans med appens källkod.
  2. Skriv ett testfall som använder automatisering för att klicka på den angivna länken. Testfallet verifierar att det förväntade modala fönstret visas.
  3. Använd attributet id som vi sparade för att ange parametrarna till testfallsmetoden. Den här uppgiften skapar en sekvens eller serie med tester.
  4. Konfigurera testerna så att de körs på Chrome, Firefox och Microsoft Edge. Den här uppgiften skapar en matris med tester.
  5. Kör testerna och titta på när varje webbläsare kommer upp automatiskt.
  6. Se hur Selenium automatiskt går igenom serien med tester för varje webbläsare.
  7. Kontrollera att alla tester har godkänts i konsolfönstret.

Amita: Det ska bli spännande att se hur snabbt testerna körs. Kan vi prova testerna nu?

Andy: Absolut. Låt oss gå över till min bärbara dator. Jag har appkoden klar.