Övning – Kör användargränssnittstesterna lokalt och i pipelinen
Innan Andy och Amita kör sina tester i pipelinen vill de verifiera att deras nya användargränssnittstester gör vad de ska. I det här avsnittet följer du med genom att köra Selenium UI-testerna först lokalt och sedan i pipelinen.
Att skriva automatiserade tester är en iterativ process, precis som att skriva andra typer av kod. För dina egna appar behöver du förmodligen prova några metoder, referera till referensdokumentation och exempelkod och åtgärda byggfel.
Valfritt: Installera Selenium-drivrutinen för Microsoft Edge
Följ det här avsnittet om du vill se testerna köras lokalt på Microsoft Edge.
NuGet-paketet för Chrome och Firefox installerar drivrutinsprogramvaran under bin-katalogen , tillsammans med den kompilerade testkoden. För Edge måste du installera drivrutinen manuellt. Så här gör du:
Installera Microsoft Edge.
Öppna Edge och navigera till
edge://settings/help. Anteckna versionsnumret. Här är ett exempel:
Gå till sidan microsoft Edge-drivrutinsnedladdningar och ladda ned drivrutinen som matchar Edge-versionsnumret. Här är ett exempel:
Extrahera zip-filen till katalogen bin/Release/net6.0 under projektets katalog Tailspin.SpaceGame.Web.UITests. Skapa dessa kataloger om de inte finns.
På macOS kan du behöva uppdatera systemprincipen så att msedgedriver kan köras. Det gör du genom att köra följande spctl kommando från terminalen i Visual Studio Code:
spctl --add Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0/msedgedriver
Exportera miljövariabler
Senare i den här modulen kör du Selenium-tester på Windows Server 2019. Dokumentationen visar den programvara som är förinstallerad åt dig.
Avsnittet Selenium Web Drivers listar de Selenium-drivrutinsversioner som är tillgängliga för Chrome, Firefox och Edge. Här är ett exempel:
För varje drivrutin har du miljövariabeln som mappar till platsen för drivrutinen. Till exempel ChromeWebDriver mappar till platsen för Chrome-drivrutinen.
Enhetstestkoden har redan konfigurerats för att läsa dessa miljövariabler. Dessa variabler talar om för Selenium var du hittar körbara filer för drivrutinen. Om du vill köra enhetstesterna lokalt måste du exportera samma miljövariabler.
Från Visual Studio Code går du till terminalen. Kör sedan följande kommandon. Ersätt sökvägen som visas med den fullständiga sökvägen till projektet mslearn-tailspin-spacegame-web-deploy .
Viktigt!
Se till att köra dessa kommandon och ange miljövariablerna i samma terminalfönster som du använder för att köra testerna.
driverDir="C:\Users\user\mslearn-tailspin-spacegame-web-deploy\Tailspin.SpaceGame.Web.UITests\bin\Release\net6.0"
export ChromeWebDriver=$driverDir
export EdgeWebDriver=$driverDir
export GeckoWebDriver=$driverDir
Köra användargränssnittstesterna lokalt
Metoden Setup i HomePageTest.cs navigerar till startsidan för Space Game när den har konfigurerat driver medlemsvariabeln.
Även om du kan hårdkoda webbplats-URL:en läser vi url:en från en miljövariabel med namnet SITE_URL. På så sätt kan du köra testerna flera gånger mot olika URL:er.
// Navigate to the site.
// The site name is stored in the SITE_URL environment variable to make
// the tests more flexible.
string url = Environment.GetEnvironmentVariable("SITE_URL");
driver.Navigate().GoToUrl(url + "/");
Eftersom du ännu inte har distribuerat webbplatsen Space Game till din App Service-miljö använder du den webbplats som Microsoft är värd för för att köra testerna lokalt.
Så här kör du testerna lokalt:
I Visual Studio Code går du till den integrerade terminalen och öppnar ett nytt terminalfönster.
Kör följande kommandon i det nya terminalfönstret.
dotnet build --configuration Release dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.WebAnteckna länken för den lokala webbplatsen. I det här exemplet är
http://localhost:5000den .Växla tillbaka till terminalfönstret där du anger miljövariablerna i föregående steg och se till att du är i projektets rotkatalog. Här är ett exempel:
cd ~/mslearn-tailspin-spacegame-web-deploySITE_URLExportera miljövariabeln. Använd länken som körs lokalt från föregående steg.export SITE_URL="http://localhost:5000"Den här variabeln pekar på webbplatsen Space Game som Microsoft är värd för.
Kör användargränssnittstesterna.
dotnet test --configuration Release Tailspin.SpaceGame.Web.UITestsDen här koden kör de tester som finns i projektet Tailspin.SpaceGame.Web.UITests .
När testerna körs visas en eller flera webbläsare. Selenium styr varje webbläsare och följer de teststeg som du har definierat.
Kommentar
Oroa dig inte om alla tre webbläsarna inte visas. Du ser till exempel inte att testerna körs i Chrome om du inte har Chrome installerat eller har en inkompatibel version. Om du bara ser en webbläsare kan du vara säker på att dina tester fungerar. I praktiken kanske du i din lokala utvecklingsmiljö vill konfigurera alla webbläsare som du vill testa mot. Med den här konfigurationen kan du kontrollera att dina tester fungerar som förväntat i varje konfiguration innan du kör testerna i pipelinen.
Spåra utdata från terminalen för varje test. Observera även testkörningssammanfattningen i slutet.
Det här exemplet visar att av nio tester lyckades alla nio testerna och noll tester hoppades över:
Passed! - Failed: 0, Passed: 9, Skipped: 0, Total: 9, Duration: 5 s
Lägg till variabeln SITE_URL i Azure Pipelines
Tidigare angav SITE_URL du miljövariabeln lokalt så att dina tester vet var varje webbläsare ska pekas. Du kan lägga till den här variabeln i Azure Pipelines. Processen liknar hur du lade till variabler för dina App Service-instanser. När agenten körs exporteras den här variabeln automatiskt till agenten som en miljövariabel.
Nu ska vi lägga till pipelinevariabeln innan du uppdaterar pipelinekonfigurationen. Så här gör du:
I Azure DevOps går du till projektet Space Game – web – Funktionella tester .
Under Pipelines väljer du Bibliotek.
Välj gruppen Versionsvariabel .
Under Variabler väljer du + Lägg till.
Ange SITE_URL som namn på variabeln. Som värde anger du URL:en för App Service-instansen som motsvarar din testmiljö , till exempel http://tailspin-space-game-web-test-10529.azurewebsites.net.
Längst upp på sidan väljer du Spara för att spara variabeln i pipelinen.
Din variabelgrupp bör likna den här:
Ändra pipelinekonfigurationen
I det här avsnittet ändrar du pipelinekonfigurationen för att köra dina Selenium UI-tester under testfasen .
Öppna filen azure-pipelines.yml i Visual Studio Code. Ändra sedan filen så här:
Dricks
Den här filen innehåller några ändringar, så vi rekommenderar att du ersätter hela filen med det du ser här.
trigger: - '*' variables: buildConfiguration: 'Release' dotnetSdkVersion: '6.x' stages: - stage: 'Build' displayName: 'Build the web application' jobs: - job: 'Build' displayName: 'Build job' pool: vmImage: 'ubuntu-20.04' demands: - npm variables: wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot' dotnetSdkVersion: '6.x' steps: - task: UseDotNet@2 displayName: 'Use .NET SDK $(dotnetSdkVersion)' inputs: version: '$(dotnetSdkVersion)' - task: Npm@1 displayName: 'Run npm install' inputs: verbose: false - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)' displayName: 'Compile Sass assets' - task: gulp@1 displayName: 'Run gulp tasks' - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt' displayName: 'Write build info' workingDirectory: $(wwwrootDir) - task: DotNetCoreCLI@2 displayName: 'Restore project dependencies' inputs: command: 'restore' projects: '**/*.csproj' - task: DotNetCoreCLI@2 displayName: 'Build the project - $(buildConfiguration)' inputs: command: 'build' arguments: '--no-restore --configuration $(buildConfiguration)' projects: '**/*.csproj' - task: DotNetCoreCLI@2 displayName: 'Publish the project - $(buildConfiguration)' inputs: command: 'publish' projects: '$(System.DefaultWorkingDirectory)/**/Tailspin.SpaceGame.Web.csproj' publishWebProjects: false arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)' zipAfterPublish: true - publish: '$(Build.ArtifactStagingDirectory)' artifact: drop - stage: 'Dev' displayName: 'Deploy to the dev environment' dependsOn: Build jobs: - deployment: Deploy pool: vmImage: 'ubuntu-20.04' environment: dev variables: - group: Release strategy: runOnce: deploy: steps: - download: current artifact: drop - task: AzureWebApp@1 displayName: 'Azure App Service Deploy: website' inputs: azureSubscription: 'Resource Manager - Tailspin - Space Game' appName: '$(WebAppNameDev)' package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip' - stage: 'Test' displayName: 'Deploy to the test environment' dependsOn: Dev jobs: - deployment: Deploy pool: vmImage: 'ubuntu-20.04' environment: test variables: - group: 'Release' strategy: runOnce: deploy: steps: - download: current artifact: drop - task: AzureWebApp@1 displayName: 'Azure App Service Deploy: website' inputs: azureSubscription: 'Resource Manager - Tailspin - Space Game' appName: '$(WebAppNameTest)' package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip' - job: RunUITests dependsOn: Deploy displayName: 'Run UI tests' pool: vmImage: 'windows-2019' variables: - group: 'Release' steps: - task: UseDotNet@2 displayName: 'Use .NET SDK $(dotnetSdkVersion)' inputs: version: '$(dotnetSdkVersion)' - task: DotNetCoreCLI@2 displayName: 'Build the project - $(buildConfiguration)' inputs: command: 'build' arguments: '--configuration $(buildConfiguration)' projects: '$(System.DefaultWorkingDirectory)/**/*UITests.csproj' - task: DotNetCoreCLI@2 displayName: 'Run unit tests - $(buildConfiguration)' inputs: command: 'test' arguments: '--no-build --configuration $(buildConfiguration)' publishTestResults: true projects: '$(System.DefaultWorkingDirectory)/**/*UITests.csproj' - stage: 'Staging' displayName: 'Deploy to the staging environment' dependsOn: Test jobs: - deployment: Deploy pool: vmImage: 'ubuntu-20.04' environment: staging variables: - group: 'Release' strategy: runOnce: deploy: steps: - download: current artifact: drop - task: AzureWebApp@1 displayName: 'Azure App Service Deploy: website' inputs: azureSubscription: 'Resource Manager - Tailspin - Space Game' appName: '$(WebAppNameStaging)' package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'Filen innehåller följande tre ändringar:
Variabeln
dotnetSdkVersionflyttas överst i filen så att flera steg kan komma åt den. Här kräver byggsteget och teststeget den här versionen av .NET Core.Build-fasen publicerar endast Space Game-webbplatspaketet som byggartefakt. Tidigare publicerade du artefakterna så här:
- task: DotNetCoreCLI@2 displayName: 'Publish the project - $(buildConfiguration)' inputs: command: 'publish' projects: '**/*.csproj' publishWebProjects: false arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)' zipAfterPublish: trueDen här uppgiften genererar två byggartefakter: Space Game-webbplatspaketet och de kompilerade användargränssnittstesterna. Vi skapar användargränssnittstesterna under byggfasen för att säkerställa att de kompileras under testfasen , men vi behöver inte publicera den kompilerade testkoden. Vi skapar den igen under testfasen när testerna körs.
Teststeget innehåller ett andra jobb som skapar och kör testerna. Det här jobbet liknar det som du använde i modulen Kör kvalitetstester i bygg-pipelinen med hjälp av Azure Pipelines . I den modulen körde du NUnit-tester som verifierade rankningslistans filtreringsfunktioner.
Kom ihåg att ett distributionsjobb är en särskild typ av jobb som spelar en viktig roll i distributionsstegen. Det andra jobbet är ett normalt jobb som kör Selenium-testerna på en Windows Server 2019-agent. Även om vi använder en Linux-agent för att skapa programmet använder vi här en Windows-agent för att köra användargränssnittstesterna. Vi använder en Windows-agent eftersom Amita kör manuella tester på Windows, och det är vad de flesta kunder använder.
Jobbet
RunUITestsär beroende avDeployjobbet för att säkerställa att jobben körs i rätt ordning. Du distribuerar webbplatsen till App Service innan du kör användargränssnittstesterna. Om du inte anger det här beroendet kan jobb i fasen köras i valfri ordning eller köras parallellt.
I den integrerade terminalen lägger du till azure-pipelines.yml i indexet, checkar in ändringarna och push-överför grenen till GitHub.
git add azure-pipelines.yml git commit -m "Run Selenium UI tests" git push origin selenium
Se hur Azure Pipelines kör testerna
Här ser du pipelinekörningen. Pipelinen kör Selenium UI-testerna under testfasen .
I Azure Pipelines går du till versionen och spårar den när den körs.
Under bygget ser du att de automatiserade testerna körs när webbplatsen har distribuerats.
När bygget är klart går du till sammanfattningssidan.
Observera att distributions- och användargränssnittstesterna har slutförts.
Anteckna sammanfattningen längst upp på sidan.
Observera att kompileringsartefakten för Space Game-webbplatsen publiceras precis som alltid. Observera även avsnittet Tester och täckning , som visar att Selenium-testerna har godkänts.
Välj testsammanfattningen för att se den fullständiga rapporten.
Rapporten visar att alla nio testerna har godkänts. Dessa tester omfattar tre tester i tre webbläsare.
Om ett test misslyckas får du detaljerade resultat av felet. Därifrån kan du undersöka orsaken till felet, åtgärda det lokalt och sedan push-överföra de nödvändiga ändringarna för att få testerna att passera i pipelinen.
Amita: Den här automatiseringen är spännande! Jag har nu användargränssnittstester som jag kan köra i pipelinen. Testerna sparar verkligen tid på lång sikt. Jag har också ett mönster att följa för att lägga till fler tester. Bäst av allt är att användargränssnittstesterna ger oss ytterligare förtroende för vår kodkvalitet.
Andy: Allt är sant. Kom ihåg att tester som du upprepade gånger kör manuellt är bra kandidater för automatisering. Lycka till med att lägga till mer. Om du fastnar eller behöver en kodgranskare vet du var jag finns.