Oefening: de UI-tests lokaal en in de pijplijn uitvoeren
Voordat Andy en Amita hun tests in de pijplijn uitvoeren, willen ze controleren of hun nieuwe UI-tests doen wat ze moeten doen. In deze sectie voert u de Selenium UI-tests eerst lokaal uit en vervolgens in de pijplijn.
Het schrijven van geautomatiseerde tests is een iteratief proces, net als bij het schrijven van elk ander type code. Voor uw eigen apps moet u waarschijnlijk een aantal benaderingen proberen, verwijzen naar documentatie en voorbeeldcode en buildfouten oplossen.
Optioneel: Het Selenium-stuurprogramma voor Microsoft Edge installeren
Volg deze sectie als u wilt dat de tests lokaal worden uitgevoerd op Microsoft Edge.
Het NuGet-pakket voor Chrome en Firefox installeert stuurprogrammasoftware in de bin-map , naast de gecompileerde testcode. Voor Edge moet u het stuurprogramma handmatig installeren. Hiervoor doet u het volgende:
Installeer Microsoft Edge.
Open Edge en navigeer naar
edge://settings/help. Noteer het versienummer. Hier volgt een voorbeeld:
Ga naar de downloadpagina van het Microsoft Edge-stuurprogramma en download het stuurprogramma dat overeenkomt met het Edge-versienummer. Hier volgt een voorbeeld:
Pak het bestand .zip uit naar de map bin/Release/net6.0 in de map Tailspin.SpaceGame.Web.UITests van uw project. Maak deze mappen als ze niet bestaan.
In macOS moet u mogelijk uw systeembeleid bijwerken zodat msedgedriver kan worden uitgevoerd. Voer hiervoor in Visual Studio Code de volgende spctl opdracht uit vanuit de terminal:
spctl --add Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0/msedgedriver
Omgevingsvariabelen exporteren
Verderop in deze module voert u Selenium-tests uit op Windows Server 2019. De documentatie bevat de software die vooraf voor u is geïnstalleerd.
De sectie Selenium Web Drivers bevat de Selenium-stuurprogrammaversies die beschikbaar zijn voor Chrome, Firefox en Edge. Hier volgt een voorbeeld:
Voor elk stuurprogramma hebt u de omgevingsvariabele die is toegewezen aan de locatie van dat stuurprogramma. Hiermee wordt bijvoorbeeld ChromeWebDriver de locatie van het Chrome-stuurprogramma toegewezen.
De code voor eenheidstests is al ingesteld om deze omgevingsvariabelen te lezen. Deze variabelen vertellen Selenium waar de uitvoerbare bestanden van het stuurprogramma moeten worden gevonden. Als u de eenheidstests lokaal wilt uitvoeren, moet u dezelfde omgevingsvariabelen exporteren.
Ga vanuit Visual Studio Code naar de terminal. Voer daarna deze opdrachten uit. Vervang het pad dat wordt weergegeven door het volledige pad naar uw project mslearn-tailspin-spacegame-web-deploy .
Belangrijk
Zorg ervoor dat u deze opdrachten uitvoert en stel de omgevingsvariabelen in hetzelfde terminalvenster in dat u gebruikt om de tests uit te voeren.
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
De UI-tests lokaal uitvoeren
De Setup methode in HomePageTest.cs gaat naar de startpagina van Space Game nadat de driver lidvariabele is ingesteld.
Hoewel u de site-URL kunt coden, lezen we hier de URL van een omgevingsvariabele met de naam SITE_URL. Op deze manier kunt u de tests meerdere keren uitvoeren op verschillende URL's.
// 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 + "/");
Omdat u de Space Game-website nog niet hebt geïmplementeerd in uw App Service-omgeving, gebruikt u de site die Door Microsoft wordt gehost om de tests lokaal uit te voeren.
De tests lokaal uitvoeren:
Ga in Visual Studio Code naar de geïntegreerde terminal en open een nieuw terminalvenster.
Voer de volgende opdrachten uit in het nieuwe terminalvenster.
dotnet build --configuration Release dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.WebNoteer de koppeling naar de lokale website in dit voorbeeld
http://localhost:5000.Ga terug naar het terminalvenster waarin u de omgevingsvariabelen in de vorige stap instelt en zorg ervoor dat u zich in de hoofdmap van uw project bevindt. Hier volgt een voorbeeld:
cd ~/mslearn-tailspin-spacegame-web-deployExporteer de
SITE_URLomgevingsvariabele. Gebruik de lokaal actieve koppeling die u hebt verkregen uit de vorige stap.export SITE_URL="http://localhost:5000"Deze variabele verwijst naar de Space Game-website die door Microsoft wordt gehost.
Voer de UI-tests uit.
dotnet test --configuration Release Tailspin.SpaceGame.Web.UITestsMet deze code worden de tests uitgevoerd die zich in het project Tailspin.SpaceGame.Web.UITests bevinden.
Wanneer de tests worden uitgevoerd, worden een of meer browsers weergegeven. Selenium bepaalt elke browser en volgt de teststappen die u hebt gedefinieerd.
Notitie
Maak u geen zorgen als alle drie de browsers niet worden weergegeven. U ziet bijvoorbeeld niet dat de tests worden uitgevoerd op Chrome als u Chrome niet hebt geïnstalleerd of als u een niet-compatibele versie hebt. Als u slechts één browser ziet, kunt u erop vertrouwen dat uw tests werken. In de praktijk kunt u in uw lokale ontwikkelomgeving alle browsers instellen waarop u wilt testen. Met deze installatie kunt u controleren of uw tests zich gedragen zoals verwacht in elke configuratie voordat u uw tests in de pijplijn uitvoert.
Traceer vanuit de terminal de uitvoer van elke test. Noteer ook de samenvatting van de testuitvoering aan het einde.
In dit voorbeeld ziet u dat uit negen tests alle negen tests zijn geslaagd en nul tests zijn overgeslagen:
Passed! - Failed: 0, Passed: 9, Skipped: 0, Total: 9, Duration: 5 s
De SITE_URL-variabele toevoegen aan Azure Pipelines
Eerder stelt u de SITE_URL omgevingsvariabele lokaal in, zodat uw tests weten waar elke browser moet worden aangegeven. U kunt deze variabele toevoegen aan Azure Pipelines. Het proces is vergelijkbaar met de manier waarop u variabelen voor uw App Service-exemplaren hebt toegevoegd. Wanneer de agent wordt uitgevoerd, wordt deze variabele automatisch als omgevingsvariabele naar de agent geëxporteerd.
We gaan nu de pijplijnvariabele toevoegen voordat u de pijplijnconfiguratie bijwerkt. Hiervoor doet u het volgende:
Ga in Azure DevOps naar uw Space Game - web - Functioneel testproject .
Selecteer Bibliotheek onder Pijplijnen.
Selecteer de groep Releasevariabele .
Selecteer + Toevoegen onder Variabelen.
Voer SITE_URL in als naam van de variabele. Voer als waarde de URL in van het App Service-exemplaar dat overeenkomt met uw testomgeving , zoals http://tailspin-space-game-web-test-10529.azurewebsites.net.
Selecteer boven aan de pagina Opslaan om de variabele op te slaan in de pijplijn.
Uw variabelegroep moet er ongeveer als volgt uitzien:
De pijplijnconfiguratie wijzigen
In deze sectie wijzigt u de pijplijnconfiguratie om uw Selenium UI-tests uit te voeren tijdens de testfase .
Open in Visual Studio Code het bestand azure-pipelines.yml . Wijzig vervolgens het bestand als volgt:
Tip
Dit bestand bevat enkele wijzigingen, dus we raden u aan het hele bestand te vervangen door wat u hier ziet.
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'Het bestand bevat de volgende drie wijzigingen:
De
dotnetSdkVersionvariabele wordt naar het begin van het bestand verplaatst, zodat er meerdere fasen toegang tot hebben. Hier is voor de buildfase en testfase deze versie van .NET Core vereist.De buildfase publiceert alleen het Space Game-websitepakket als het buildartefact. Eerder hebt u de artefacten als volgt gepubliceerd:
- 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: trueMet deze taak worden twee buildartefacten gegenereerd: het Space Game-websitepakket en de gecompileerde UI-tests. We bouwen de UI-tests tijdens de buildfase om ervoor te zorgen dat ze worden gecompileerd tijdens de testfase , maar we hoeven de gecompileerde testcode niet te publiceren. We bouwen het opnieuw tijdens de testfase wanneer de tests worden uitgevoerd.
De testfase bevat een tweede taak waarmee de tests worden gebouwd en uitgevoerd. Deze taak lijkt op de taak die u hebt gebruikt in de kwaliteitstests uitvoeren in uw build-pijplijn met behulp van de Azure Pipelines-module . In die module hebt u NUnit-tests uitgevoerd waarmee de filterfunctionaliteit van het leaderboard is geverifieerd.
Zoals u weet, is een implementatietaak een speciaal type taak dat een belangrijke rol speelt in uw implementatiefasen. De tweede taak is een normale taak die de Selenium-tests uitvoert op een Windows Server 2019-agent. Hoewel we een Linux-agent gebruiken om de toepassing te bouwen, gebruiken we hier een Windows-agent om de UI-tests uit te voeren. We gebruiken een Windows-agent omdat Amita handmatige tests uitvoert op Windows en dat is wat de meeste klanten gebruiken.
De
RunUITeststaak is afhankelijk van deDeploytaak om ervoor te zorgen dat de taken in de juiste volgorde worden uitgevoerd. U implementeert de website in App Service voordat u de UI-tests uitvoert. Als u deze afhankelijkheid niet opgeeft, kunnen taken in de fase in elke willekeurige volgorde worden uitgevoerd of parallel worden uitgevoerd.
Voeg in de geïntegreerde terminal azure-pipelines.yml toe aan de index, voer de wijzigingen door en push de vertakking naar GitHub.
git add azure-pipelines.yml git commit -m "Run Selenium UI tests" git push origin selenium
Bekijk hoe Azure Pipelines de tests uitvoert
Hier bekijkt u de pijplijnuitvoering. De pijplijn voert de Selenium UI-tests uit tijdens de testfase .
Ga in Azure Pipelines naar de build en traceer deze terwijl deze wordt uitgevoerd.
Tijdens de build ziet u dat de geautomatiseerde tests worden uitgevoerd nadat de website is geïmplementeerd.
Nadat de build is voltooid, gaat u naar de overzichtspagina.
U ziet dat de implementatie en de UI-tests zijn voltooid.
Noteer de samenvatting aan de bovenkant van de pagina.
U ziet dat het buildartefact voor de Space Game-website net als altijd wordt gepubliceerd. Let ook op de sectie Tests en dekking , die laat zien dat de Selenium-tests zijn geslaagd.
Selecteer de testsamenvatting om het volledige rapport weer te geven.
In het rapport ziet u dat alle negen tests zijn geslaagd. Deze tests omvatten drie tests in drie browsers.
Als een test mislukt, krijgt u gedetailleerde resultaten van de fout. Van daaruit kunt u de bron van de fout onderzoeken, deze lokaal oplossen en vervolgens de benodigde wijzigingen pushen om de tests door te geven in de pijplijn.
Amita: Deze automatisering is spannend! Ik heb nu UI-tests die ik in de pijplijn kan uitvoeren. De tests besparen ons echt tijd in de lange termijn. Ik heb ook een patroon om meer tests toe te voegen. Het beste van alles, de UI-tests geven ons vertrouwen in onze codekwaliteit.
Andy: Allemaal waar. Vergeet niet dat tests die u herhaaldelijk handmatig uitvoert, goede kandidaten zijn voor automatisering. Succes met het toevoegen van meer. Als u vastloopt of een coderevisor nodig hebt, weet u waar u mij kunt vinden.