Esercizio - Eseguire i test dell'interfaccia utente in locale e nella pipeline
Prima che Andy e Amita eseguano i test nella pipeline, vogliono verificare che i nuovi test dell'interfaccia utente eseguano le operazioni da eseguire. In questa sezione verranno fornite le istruzioni per l'esecuzione dei test dell'interfaccia utente di Selenium prima in locale e quindi nella pipeline.
La scrittura di test automatizzati è un processo iterativo, proprio come la scrittura di qualsiasi altro tipo di codice. Per le app personalizzate, è probabile che sia necessario provare alcuni approcci, fare riferimento alla documentazione di riferimento e al codice di esempio e correggere gli errori di compilazione.
Facoltativo: installare il driver Selenium per Microsoft Edge
Seguire questa sezione se si vuole osservare l'esecuzione dei test in locale in Microsoft Edge.
Il pacchetto NuGet per Chrome e Firefox installa il software driver nella directory bin , insieme al codice di test compilato. Per Edge è necessario installare manualmente il driver. A questo scopo:
Installare Microsoft Edge.
Aprire Edge e passare a
edge://settings/help. Annotare il numero di versione. Ecco un esempio:
Passare alla pagina dei download di Microsoft Edge Driver e scaricare il driver corrispondente al numero di versione di Edge. Ecco un esempio:
Estrarre il file con estensione zip nella sottodirectory bin/Release/net6.0 della directory del progetto Tailspin.SpaceGame.Web.UITests. Creare queste directory se non esistono.
In macOS potrebbe essere necessario aggiornare i criteri di sistema per consentire l'esecuzione di msedgedriver. A tale scopo, in Visual Studio Code eseguire il comando seguente spctl dal terminale:
spctl --add Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0/msedgedriver
Esportare le variabili di ambiente
Più avanti in questo modulo verranno eseguiti test Selenium in Windows Server 2019. La documentazione elenca il software preinstallato.
La sezione Selenium Web Drivers elenca le versioni del driver Selenium disponibili per Chrome, Firefox e Edge. Ecco un esempio:
Per ogni driver è disponibile la variabile di ambiente mappata al percorso del driver. Ad esempio, ChromeWebDriver esegue il mapping alla posizione del driver Chrome.
Il codice degli unit test è già configurato per leggere queste variabili di ambiente. Queste variabili indicano a Selenium dove trovare i file eseguibili del driver. Per eseguire gli unit test in locale, è necessario esportare queste stesse variabili di ambiente.
Da Visual Studio Code passare al terminale. Quindi eseguire questi comandi: Sostituire il percorso visualizzato con il percorso completo del progetto mslearn-tailspin-spacegame-web-deploy.
Importante
Assicurarsi di eseguire questi comandi e impostare le variabili di ambiente nella stessa finestra del terminale usata per eseguire i test.
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
Eseguire i test dell'interfaccia utente in locale
Il Setup metodo in HomePageTest.cs passa alla home page di Space Game dopo aver impostato la driver variabile membro.
Anche se è possibile impostare come hardcoded l'URL del sito, qui viene letto l'URL da una variabile di ambiente denominata SITE_URL. In questo modo, è possibile eseguire i test più volte su URL diversi.
// 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 + "/");
Poiché il sito Web Space Game non è ancora stato distribuito nell'ambiente di servizio app, si userà il sito che Microsoft ospita per eseguire i test in locale.
Per eseguire i test in locale:
In Visual Studio Code passare al terminale integrato e aprire una nuova finestra del terminale.
Eseguire i comandi seguenti nella nuova finestra del terminale.
dotnet build --configuration Release dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.WebPrendere nota del collegamento del sito Web locale, che in questo esempio è
http://localhost:5000.Tornare alla finestra del terminale in cui sono state impostate le variabili di ambiente nel passaggio precedente e assicurarsi di essere nella directory radice del progetto. Ecco un esempio:
cd ~/mslearn-tailspin-spacegame-web-deployEsportare la
SITE_URLvariabile di ambiente. Usare il collegamento locale ottenuto nel passaggio precedente.export SITE_URL="http://localhost:5000"Questa variabile punta al sito Web Space Game che Microsoft ospita.
Eseguire i test dell'interfaccia utente.
dotnet test --configuration Release Tailspin.SpaceGame.Web.UITestsQuesto codice esegue i test che si trovano nel progetto Tailspin.SpaceGame.Web.UITests .
Quando vengono eseguiti i test, vengono visualizzati uno o più browser. Selenium controlla ogni browser e segue i passaggi di test definiti.
Nota
Non preoccuparti se non vengono visualizzati tutti e tre i browser. Ad esempio, non vedrai i test eseguiti in Chrome se Chrome non è installato o hai una versione incompatibile. La visualizzazione di un solo browser consentirà di assicurarsi che i test funzionino. In pratica, nell'ambiente di sviluppo locale potrebbe essere necessario configurare tutti i browser su cui si vuole eseguire il test. Questa configurazione consentirà di verificare che i test si comportino come previsto in ogni configurazione prima di eseguire i test nella pipeline.
Dal terminale tracciare l'output di ogni test. Si noti anche il riepilogo dell'esecuzione del test alla fine.
Questo esempio illustra che su nove test tutti hanno avuto esito positivo e zero test sono stati ignorati:
Passed! - Failed: 0, Passed: 9, Skipped: 0, Total: 9, Duration: 5 s
Aggiungere la variabile SITE_URL ad Azure Pipelines
In precedenza, si imposta la SITE_URL variabile di ambiente in locale in modo che i test sappiano dove puntare ogni browser. È possibile aggiungere questa variabile ad Azure Pipelines. Il processo è simile al modo in cui sono state aggiunte variabili per le istanze di servizio app. Quando l'agente viene eseguito, questa variabile viene esportata automaticamente nell'agente come variabile di ambiente.
Aggiungere ora la variabile della pipeline prima di aggiornare la configurazione della pipeline. A questo scopo:
In Azure DevOps passare al progetto Space Game - Web - Test funzionali.
In Pipeline, selezionare Libreria.
Selezionare il gruppo di variabili Versione .
In Variabili, selezionare + Aggiungi.
Per il nome della variabile immettere SITE_URL. Come valore, immettere l'URL dell'istanza del servizio app di Azure che corrisponde all'ambiente di test, ad esempio http://tailspin-space-game-web-test-10529.azurewebsites.net.
Nella parte superiore della pagina selezionare Salva per salvare la variabile nella pipeline.
Il gruppo di variabili sarà simile al seguente:
Modificare la configurazione della pipeline
In questa sezione si modifica la configurazione della pipeline per eseguire i test dell'interfaccia utente Selenium durante la fase test .
In Visual Studio Code aprire il file azure-pipelines.yml . Modificare quindi il file come segue:
Suggerimento
Questo file contiene alcune modifiche, quindi è consigliabile sostituire l'intero file con quello visualizzato qui.
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'Il file include queste tre modifiche:
La
dotnetSdkVersionvariabile viene spostata all'inizio del file in modo che più fasi possano accedervi. In questa fase di compilazione e test è necessaria questa versione di .NET Core.La fase di compilazione pubblica solo il pacchetto del sito Web Space Game come artefatto di compilazione. In precedenza, gli artefatti sono stati pubblicati come segue:
- 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: trueQuesta attività genera due artefatti di compilazione: il pacchetto del sito Web Space Game e i test dell'interfaccia utente compilati. I test dell'interfaccia utente vengono compilati durante la fase di compilazione per assicurarsi che vengano compilati durante la fase di test, ma non è necessario pubblicare il codice di test compilato. Viene compilata di nuovo durante la fase test durante l'esecuzione dei test.
La fase test include un secondo processo che compila ed esegue i test. Questo processo è simile a quello usato nei test di qualità di esecuzione nella pipeline di compilazione usando il modulo Azure Pipelines . In questo modulo sono stati eseguiti test NUnit che hanno verificato la funzionalità di filtro del tabellone punteggi.
Tenere presente che un processo di distribuzione è un tipo speciale di processo che svolge un ruolo importante nelle fasi di distribuzione. Il secondo processo è un processo normale che esegue i test Selenium in un agente Windows Server 2019. Anche se si usa un agente Linux per compilare l'applicazione, in questo caso si usa un agente Windows per eseguire i test dell'interfaccia utente. Usiamo un agente Windows perché Amita esegue test manuali in Windows ed è questo che la maggior parte dei clienti usa.
Il
RunUITestsprocesso dipende dalDeployprocesso per assicurarsi che i processi vengano eseguiti nell'ordine corretto. Si distribuirà il sito Web in servizio app prima di eseguire i test dell'interfaccia utente. Se non si specifica questa dipendenza, i processi all'interno della fase possono essere eseguiti in qualsiasi ordine o esecuzione in parallelo.
Nel terminale integrato aggiungere azure-pipelines.yml all'indice, eseguire il commit delle modifiche ed eseguire il push del ramo in GitHub.
git add azure-pipelines.yml git commit -m "Run Selenium UI tests" git push origin selenium
Osservare l'esecuzione dei test in Azure Pipelines
Qui si può osservare l'esecuzione della pipeline. La pipeline esegue i test dell'interfaccia utente Selenium durante la fase test .
In Azure Pipelines passare alla compilazione e tracciarla durante l'esecuzione.
Durante la compilazione vengono visualizzati i test automatizzati eseguiti dopo la distribuzione del sito Web.
Al termine della compilazione, passare alla pagina di riepilogo.
Si noterà che la distribuzione e i test dell'interfaccia utente sono stati completati correttamente.
Nella parte superiore della pagina prendere nota del riepilogo.
Osservare inoltre che l'artefatto della compilazione per il sito Web Space Game viene pubblicato normalmente. Si noti anche la sezione Test e copertura , che mostra che i test Selenium sono stati superati.
Selezionare il riepilogo del test per visualizzare il report completo.
Il report mostra che tutti e nove i test sono stati superati. Questi test includono tre test in tre browser.
Se un test ha esito negativo, vengono visualizzati i risultati dettagliati dell'errore. Da qui è possibile esaminare l'origine dell'errore, correggerla in locale e quindi eseguire il push delle modifiche necessarie per passare i test nella pipeline.
Amita: Questa automazione è emozionante! Ora ho test dell'interfaccia utente che è possibile eseguire nella pipeline. I test ci consentiranno di risparmiare tempo a lungo termine. Ho anche un modello da seguire per aggiungere altri test. Al meglio, i test dell'interfaccia utente ci danno maggiore fiducia nella qualità del codice.
Andy: Tutto vero. Tenere presente che i test eseguiti ripetutamente manualmente sono buoni candidati per l'automazione. Buona fortuna aggiungendo altro. Se sei bloccato o hai bisogno di un revisore del codice, sai dove trovarmi.