Alıştırma - Ui testlerini yerel olarak ve işlem hattında çalıştırma
Andy ve Amita testlerini işlem hattında çalıştırmadan önce, yeni kullanıcı arabirimi testlerinin gerekenleri yaptığını doğrulamak isterler. Bu bölümde, selenium kullanıcı arabirimi testlerini önce yerel olarak ve ardından işlem hattında çalıştırarak ilerleyeceksiniz.
Otomatikleştirilmiş testler yazmak, aynı diğer kod türleri gibi yinelemeli bir işlemdir. Kendi uygulamalarınız için muhtemelen birkaç yaklaşımı denemeniz, başvuru belgelerine ve örnek koda başvurmanız ve derleme hatalarını düzeltmeniz gerekir.
İsteğe bağlı: Microsoft Edge için Selenium sürücüsünü yükleme
Testleri Microsoft Edge'de yerel olarak çalıştırmak istiyorsanız bu bölümü izleyin.
Chrome ve Firefox için NuGet paketi, derlenen test kodunun yanı sıra bin dizinine sürücü yazılımı yükler. Edge için sürücüyü el ile yüklemeniz gerekir. Yapmak için:
Microsoft Edge'i yükleyin.
Edge'i açın ve adresine
edge://settings/helpgidin. Sürüm numarasını not edin. Bir örnek aşağıda verilmiştir:
Microsoft Edge Sürücüsü indirmeleri sayfasına gidin ve Edge sürüm numarasıyla eşleşen sürücüyü indirin. Bir örnek aşağıda verilmiştir:
.zip dosyasını projenizin Tailspin.SpaceGame.Web.UITests dizininin altındaki bin/Release/net6.0 dizinine ayıklayın. Yoksa bu dizinleri oluşturun.
macOS'ta, msedgedriver'ın çalışmasına izin vermek için sistem ilkenizi güncelleştirmeniz gerekebilir. Bunu yapmak için Visual Studio Code'da terminalden aşağıdaki spctl komutu çalıştırın:
spctl --add Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0/msedgedriver
Ortam değişkenlerini dışarı aktarma
Bu modülün ilerleyen bölümlerinde Windows Server 2019'da Selenium testleri çalıştıracaksınız. Belgelerde sizin için önceden yüklenmiş olan yazılımlar listelenir.
Selenium Web Sürücüleri bölümünde Chrome, Firefox ve Edge için kullanılabilen Selenium sürücü sürümleri listelenir. Bir örnek aşağıda verilmiştir:
Her sürücü için, bu sürücünün konumuna eşleyen ortam değişkenine sahipsiniz. Örneğin, ChromeWebDriver Chrome sürücüsünün konumuna eşler.
Birim testleri kodu, bu ortam değişkenlerini okumak için zaten ayarlanmıştır. Bu değişkenler Selenium'a sürücü yürütülebilir dosyalarını nerede bulacağını söyler. Birim testlerini yerel olarak çalıştırmak için aynı ortam değişkenlerini dışarı aktarmanız gerekir.
Visual Studio Code'dan terminale gidin. Sonra şu komutları çalıştırın. gösterilen yolu, mslearn-tailspin-spacegame-web-deploy projenizin tam yoluyla değiştirin.
Önemli
Bu komutları çalıştırdığınızdan ve ortam değişkenlerini testleri çalıştırmak için kullandığınız terminal penceresinde ayarladığınızdan emin olun.
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
Ui testlerini yerel olarak çalıştırma
Setup HomePageTest.cs dosyasındaki yöntemi, üye değişkenini ayarladıktan driver sonra Space Game giriş sayfasına gider.
Site URL'sini sabit kodlayabilirsiniz ancak burada adlı SITE_URLbir ortam değişkeninden URL'yi okuduk. Bu şekilde testleri farklı URL'lerde birden çok kez çalıştırabilirsiniz.
// 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 + "/");
Space Game web sitesini henüz App Service ortamınıza dağıtmadığınızdan, testleri yerel olarak çalıştırmak için Microsoft'un barındırdığı siteyi kullanacaksınız.
Testleri yerel olarak çalıştırmak için:
Visual Studio Code'da tümleşik terminale gidin ve yeni bir terminal penceresi açın.
Yeni terminal penceresinde aşağıdaki komutları çalıştırın.
dotnet build --configuration Release dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.WebBu örnekte
http://localhost:5000yerel web sitesi bağlantısını not edin.Önceki adımda ortam değişkenlerini ayarladığınız terminal penceresine dönün ve projenizin kök dizininde olduğunuzdan emin olun. Bir örnek aşağıda verilmiştir:
cd ~/mslearn-tailspin-spacegame-web-deployOrtam değişkenini dışarı aktarın
SITE_URL. Önceki adımda aldığınız yerel olarak çalışan bağlantıyı kullanın.export SITE_URL="http://localhost:5000"Bu değişken, Microsoft'un barındırdığını Space Game web sitesine işaret eder.
Kullanıcı arabirimi testlerini çalıştırın.
dotnet test --configuration Release Tailspin.SpaceGame.Web.UITestsBu kod Tailspin.SpaceGame.Web.UITests projesinde bulunan testleri çalıştırır.
Testler çalıştırılırken bir veya daha fazla tarayıcı görüntülenir. Selenium her tarayıcıyı denetler ve tanımladığınız test adımlarını izler.
Dekont
Üç tarayıcı da görünmüyorsa endişelenmeyin. Örneğin, Chrome yüklü değilse veya uyumsuz bir sürüme sahipseniz Testlerin Chrome'da çalıştığını görmezsiniz. Yalnızca bir tarayıcıyı görmek, testlerinizin çalıştığından size güven vermenize yardımcı olur. Uygulamada, yerel geliştirme ortamınızda test etmek istediğiniz tüm tarayıcıları ayarlamak isteyebilirsiniz. Bu kurulum, işlem hattında testlerinizi çalıştırmadan önce testlerinizin her yapılandırmada beklendiği gibi davrandığını doğrulamanıza olanak tanır.
Terminalden her testin çıkışını izleyin. Ayrıca, sonundaki test çalıştırması özetini de not edin.
Bu örnekte dokuz testten dokuzunun da başarılı olduğu ve sıfır testin atlandığı gösterilmektedir:
Passed! - Failed: 0, Passed: 9, Skipped: 0, Total: 9, Duration: 5 s
SITE_URL değişkenini Azure Pipelines'a ekleme
Daha önce, testlerinizin her tarayıcıyı SITE_URL nereye işaret ettiğini bilmesi için ortam değişkenini yerel olarak ayarlarsınız. Bu değişkeni Azure Pipelines'a ekleyebilirsiniz. bu işlem, App Service örnekleriniz için değişken ekleme yönteminize benzer. Aracı çalıştırıldığında, bu değişken otomatik olarak aracıya ortam değişkeni olarak dışarı aktarılır.
İşlem hattı yapılandırmanızı güncelleştirmeden önce şimdi işlem hattı değişkenini ekleyelim. Yapmak için:
Azure DevOps'ta Space Game - web - İşlevsel testler projenize gidin.
İşlem Hatları'nın altında Kitaplık'ı seçin.
Release değişken grubunu seçin.
Değişkenler'in altında + Ekle'yi seçin.
Değişkeninizin adı için SITE_URL girin. Değeri olarak, gibi http://tailspin-space-game-web-test-10529.azurewebsites.nettest ortamınıza karşılık gelen App Service örneğinin URL'sini girin.
Değişkeninizi işlem hattına kaydetmek için sayfanın üst kısmındaki Kaydet'i seçin.
Değişken grubunuz şuna benzemelidir:
İşlem hattı yapılandırmasını değiştirme
Bu bölümde, test aşamasında Selenium ui testlerinizi çalıştırmak için işlem hattı yapılandırmasını değiştireceksiniz.
Visual Studio Code'da azure-pipelines.yml dosyasını açın. Ardından dosyayı şu şekilde değiştirin:
Bahşiş
Bu dosya birkaç değişiklik içerdiğinden, dosyanın tamamını burada gördüklerinizle değiştirmenizi öneririz.
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'Dosya şu üç değişikliği içerir:
Değişken
dotnetSdkVersion, birden çok aşamanın dosyaya erişebilmesi için dosyanın en üstüne taşınır. Burada Derleme aşaması ve Test aşaması bu .NET Core sürümünü gerektirir.Derleme aşaması, derleme yapıtı olarak yalnızca Space Game web sitesi paketini yayımlar. Daha önce yapıtları şu şekilde yayımladığınızda:
- 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: trueBu görev iki derleme yapıtı oluşturur: Space Game web sitesi paketi ve derlenmiş ui testleri. Derleme aşaması sırasında ui testlerini derleyeceğiz ancak derlenmiş test kodunu yayımlamamız gerekmez. Testler çalıştırıldığında Test aşamasında yeniden oluştururuz.
Test aşaması, testleri derleyen ve çalıştıran ikinci bir iş içerir. Bu iş, Azure Pipelines kullanarak derleme işlem hattınızda kalite testlerini çalıştırma modülünde kullandığınız iş gibi görünür. Bu modülde, puan tablosunun filtreleme işlevini doğrulayan NUnit testleri çalıştırmıştınız.
Bir dağıtım işinin, dağıtım aşamalarınızda önemli bir rol oynayan özel bir iş türü olduğunu hatırlayın. İkinci iş, Bir Windows Server 2019 aracısı üzerinde Selenium testlerini çalıştıran normal bir iştir. Uygulamayı derlemek için Bir Linux aracısı kullansak da, burada ui testlerini çalıştırmak için bir Windows aracısı kullanırız. Amita, Windows üzerinde el ile testler çalıştırdığından windows aracısı kullanırız ve çoğu müşteri bunu kullanır.
İş,
RunUITestsişlerin doğru sırada çalıştığından emin olmak için işe bağlıdırDeploy. Kullanıcı arabirimi testlerini çalıştırmadan önce web sitesini App Service'e dağıtacaksınız. Bu bağımlılığı belirtmezseniz, aşama içindeki işler herhangi bir sırada çalıştırılabilir veya paralel olarak çalıştırılabilir.
Tümleşik terminalde azure-pipelines.yml dosyasını dizine ekleyin, değişiklikleri işleyin ve dalı GitHub'a gönderin.
git add azure-pipelines.yml git commit -m "Run Selenium UI tests" git push origin selenium
Azure Pipelines'ın testleri çalıştırmasını izleyin
Burada işlem hattının çalışmasını izlersiniz. İşlem hattı, Test aşaması sırasında Selenium UI testlerini çalıştırır.
Azure Pipelines'da derlemeye gidin ve çalıştırılırken onu takip edin.
Derleme sırasında, web sitesi dağıtıldıktan sonra otomatikleştirilmiş testlerin çalıştığını görürsünüz.
Derleme tamamlandıktan sonra özet sayfasına gidin.
Dağıtım ve kullanıcı arabirimi testlerinin başarıyla tamamlandığını unutmayın.
Sayfanın üst kısmında özete dikkat edin.
Space Game web sitesi için derleme yapıtının her zaman olduğu gibi yayımlandığını unutmayın. Ayrıca Selenium testlerinin geçtiğini gösteren Testler ve kapsam bölümüne de dikkat edin.
Raporun tamamını görmek için test özetini seçin.
Rapor, dokuz testin de geçtiğini gösteriyor. Bu testler üç tarayıcıda üç test içerir.
Herhangi bir test başarısız olursa, hatanın ayrıntılı sonuçlarını alırsınız. Buradan, hatanın kaynağını araştırabilir, yerel olarak düzeltebilir ve ardından testlerin işlem hattından geçmesini sağlamak için gerekli değişiklikleri gönderebilirsiniz.
Amita: Bu otomasyon heyecan verici! Artık işlem hattında çalıştırabildiğim kullanıcı arabirimi testlerim var. Testler uzun vadede bize zaman kazandıracak. Ayrıca daha fazla test eklemek için izlemem gereken bir desen var. Hepsinden de iyisi, kullanıcı arabirimi testleri kod kalitemize daha fazla güven verir.
Hepsi doğru. El ile tekrar tekrar çalıştırdığınız testlerin otomasyon için iyi adaylar olduğunu unutmayın. Daha fazlasını eklerken iyi şanslar. Takılırsanız veya bir kod gözden geçirene ihtiyacınız olursa, beni nerede bulabileceğinizi biliyorsunuz.