Latihan - Menjalankan pengujian antarmuka pengguna secara lokal dan dalam alur

13 menit

Sebelum Andy dan Amita menjalankan tes mereka di alur, mereka ingin memverifikasi bahwa tes UI baru mereka melakukan apa yang seharusnya. Di bagian ini, Anda akan mengikuti dengan menjalankan pengujian UI Selenium terlebih dahulu secara lokal lalu di alur.

Menulis pengujian otomatis adalah proses berulang, sama seperti menulis jenis kode lainnya. Untuk aplikasi Anda sendiri, Anda mungkin perlu mencoba beberapa pendekatan, merujuk ke dokumentasi referensi dan contoh kode, dan memperbaiki kesalahan build.

Opsional: Instal driver Selenium untuk Microsoft Edge

Ikuti bagian ini jika Anda ingin melihat pengujian berjalan secara lokal di Microsoft Edge.

Paket NuGet untuk Chrome dan Firefox menginstal perangkat lunak driver di bawah direktori bin, bersama dengan kode pengujian yang dikompilasi. Untuk Edge, Anda perlu menginstal driver secara manual. Untuk melakukannya:

Install Microsoft Edge.
Buka Edge dan navigasikan ke edge://settings/help. Perhatikan nomor versinya. Berikut contohnya:
Navigasi ke halaman unduhan driver Microsoft Edge dan unduh driver yang cocok dengan nomor versi Edge. Berikut contohnya:
Ekstrak file .zip ke direktori bin/Release/net6.0 di bawah direktori Tailspin.SpaceGame.Web.UITests proyek Anda. Buat direktori ini jika tidak ada.

Di macOS, Anda mungkin perlu memperbarui kebijakan sistem untuk memungkinkan msedgedriver berjalan. Untuk melakukannya, di Visual Studio Code, jalankan perintah berikut spctl dari terminal:

spctl --add Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0/msedgedriver

Ekspor variabel lingkungan

Nantinya dalam modul ini, Anda akan menjalankan tes Selenium pada Windows Server 2019. Dokumentasi mencantumkan perangkat lunak yang telah diinstal sebelumnya untuk Anda.

Bagian Selenium Web Drivers mencantumkan versi driver Selenium yang tersedia untuk Chrome, Firefox, dan Edge. Berikut contohnya:

A screenshot showing the documentation for the installed Selenium drivers on the build agent.

Untuk setiap driver, Anda memiliki variabel lingkungan yang memetakan ke lokasi driver tersebut. Misalnya, ChromeWebDriver memetakan ke lokasi driver Chrome.

Kode pengujian unit sudah disiapkan untuk membaca variabel lingkungan ini. Variabel-variabel ini memberi tahu Selenium tempat menemukan file yang dapat dieksekusi driver. Untuk menjalankan pengujian unit secara lokal, Anda perlu mengekspor variabel lingkungan yang sama ini.

Dari Visual Studio Code, buka terminal. Kemudian jalankan perintah ini. Ganti jalur yang ditampilkan dengan jalur lengkap ke proyek mslearn-tailspin-spacegame-web-deploy Anda.

Penting

Pastikan untuk menjalankan perintah ini dan mengatur variabel lingkungan di jendela terminal yang sama dengan yang Anda gunakan untuk menjalankan pengujian.

Windows
macOS

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

driverDir="/Users/user/mslearn-tailspin-spacegame-web-deploy/Tailspin.SpaceGame.Web.UITests/bin/Release/net6.0"

export ChromeWebDriver=$driverDir
export EdgeWebDriver=$driverDir
export GeckoWebDriver=$driverDir

Jalankan pengujian antarmuka pengguna secara lokal

Metode Setup di HomePageTest.cs menavigasi ke halaman beranda Space Game setelah mengatur variabel anggota driver.

Meskipun Anda dapat mengodekan URL situs secara permanen, di sini kami membaca URL dari variabel lingkungan bernama SITE_URL. Dengan cara ini, Anda dapat menjalankan pengujian beberapa kali terhadap URL yang berbeda.

// 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 + "/");

Karena Anda belum menyebarkan situs web Space Game ke lingkungan App Service, Anda akan menggunakan situs yang dihosting Microsoft untuk menjalankan pengujian secara lokal.

Untuk menjalankan pengujian secara lokal:

Di Visual Studio Code, buka terminal terintegrasi dan buka jendela terminal baru.

Jalankan perintah berikut di jendela terminal baru.

dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

Catat tautan situs web lokal, dalam contoh ini adalah http://localhost:5000.
Beralih kembali ke jendela terminal tempat Anda mengatur variabel lingkungan di langkah sebelumnya, dan pastikan Anda berada di direktori akar proyek Anda. Berikut contohnya:
```
cd ~/mslearn-tailspin-spacegame-web-deploy
```
Ekspor variabel lingkungan SITE_URL. Gunakan tautan yang berjalan secara lokal yang Anda dapatkan dari langkah sebelumnya.
```
export SITE_URL="http://localhost:5000"
```
Variabel ini menunjuk ke situs web Space Game yang dihosting Microsoft.
Jalankan pengujian antarmuka pengguna.
```
dotnet test --configuration Release Tailspin.SpaceGame.Web.UITests
```
Kode ini menjalankan pengujian yang terletak di proyek Tailspin.SpaceGame.Web.UITests.

Saat pengujian berjalan, satu atau beberapa browser muncul. Selenium mengontrol setiap browser dan mengikuti langkah-langkah pengujian yang Anda tentukan.

Catatan

Jangan khawatir jika ketiga browser tidak muncul. Misalnya, Anda tidak akan melihat pengujian berjalan di Chrome jika Anda tidak menginstal Chrome atau memiliki versi yang tidak kompatibel. Melihat hanya satu browser akan membantu memberi Anda kepercayaan diri bahwa pengujian Anda berfungsi. Dalam praktiknya, di lingkungan pengembangan lokal, Anda mungkin ingin menyiapkan semua browser yang ingin Anda uji. Penyiapan ini akan memungkinkan Anda memverifikasi bahwa pengujian Anda berperilaku seperti yang diharapkan di setiap konfigurasi sebelum Anda menjalankan pengujian di alur.
Dari terminal, lacak output setiap pengujian. Perhatikan juga ringkasan uji coba di akhir.

Contoh ini menunjukkan bahwa dari sembilan tes, kesembilan tes berhasil dan tidak ada tes yang dilewati:
```
Passed!  - Failed:     0, Passed:     9, Skipped:     0, Total:     9, Duration: 5 s 
```

Menambahkan variabel SITE_URL ke Azure Pipelines

Sebelumnya, Anda mengatur variabel lingkungan SITE_URL secara lokal sehingga pengujian Anda tahu di mana harus mengarahkan setiap browser. Anda dapat menambahkan variabel ini ke Azure Pipelines. Prosesnya mirip dengan cara Anda menambahkan variabel untuk instans App Service Anda. Ketika agen berjalan, variabel ini secara otomatis diekspor ke agen sebagai variabel lingkungan.

Mari kita tambahkan variabel alur sekarang, sebelum Anda memperbarui konfigurasi alur Anda. Untuk melakukannya:

Di Azure DevOps, buka proyek Space Game - web - Pengujian fungsional Anda.
Di bagian Alur, pilih Pustaka.
Pilih grup variabel Rilis.
Di bagian Variabel, pilih + Tambahkan.
Untuk nama variabel, masukkan SITE_URL. Sebagai nilainya, masukkan URL instans App Service yang sesuai dengan lingkungan pengujian Anda, seperti http://tailspin-space-game-web-test-10529.azurewebsites.net.
Di dekat bagian atas halaman, pilih Simpan untuk menyimpan variabel Anda ke alur.

Grup variabel Anda harus menyerupai yang ini:

Mengubah konfigurasi alur

Di bagian ini, Anda memodifikasi konfigurasi alur untuk menjalankan pengujian UI Selenium Anda selama tahap Pengujian.

Di Visual Studio Code, buka file azure-pipelines.yml. Kemudian ubah file seperti ini:

Tip

File ini berisi beberapa perubahan, jadi kami sarankan Anda mengganti seluruh file dengan apa yang Anda lihat di sini.

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'

File ini mencakup ketiga perubahan ini:

Variabel dotnetSdkVersion dipindahkan ke bagian atas file sehingga beberapa tahap dapat mengaksesnya. Di sini tahap Build dan tahap Pengujian memerlukan versi .NET Core ini.
Tahap Build hanya menerbitkan paket situs web Space Game sebagai artefak build. Sebelumnya, Anda menerbitkan artefak seperti ini:
```
- 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: true
```
Tugas ini menghasilkan dua artefak build: paket situs web Space Game dan pengujian antarmuka pengguna yang dikompilasi. Kami membangun pengujian UI selama tahap Build untuk memastikan bahwa pengujian akan dikompilasi selama tahap Pengujian , tetapi kami tidak perlu menerbitkan kode pengujian yang dikompilasi. Kami membangunnya lagi selama tahap Pengujian saat pengujian berjalan.
Tahap Pengujian mencakup pekerjaan kedua yang membangun dan menjalankan pengujian. Pekerjaan ini menyerupai yang Anda gunakan dalam menjalankan pengujian kualitas di alur build Anda dengan menggunakan modul Azure Pipelines. Dalam modul itu, Anda menjalankan pengujian NUnit yang memverifikasi fungsionalitas pemfilteran papan peringkat.

Ingat bahwa pekerjaan penyebaran adalah jenis pekerjaan khusus yang memainkan peran penting dalam tahap penyebaran Anda. Pekerjaan kedua adalah pekerjaan normal yang menjalankan tes Selenium pada agen Windows Server 2019. Meskipun kami menggunakan agen Linux untuk membangun aplikasi, di sini kami menggunakan agen Windows untuk menjalankan pengujian antarmuka pengguna. Kami menggunakan agen Windows karena Amita menjalankan pengujian manual pada Windows, dan itulah yang digunakan sebagian besar pelanggan.

Pekerjaan RunUITests bergantung pada pekerjaan Deploy untuk memastikan bahwa pekerjaan berjalan dengan urutan yang benar. Anda akan menyebarkan situs web untuk App Service sebelum menjalankan pengujian UI. Jika Anda tidak menentukan dependensi ini, pekerjaan dalam tahap dapat berjalan dalam urutan apa pun atau berjalan secara paralel.

Di terminal terintegrasi, tambahkan azure-pipelines.yml ke indeks, terapkan perubahan, dan dorong cabang hingga GitHub.
```
git add azure-pipelines.yml
git commit -m "Run Selenium UI tests"
git push origin selenium
```

Tonton Azure Pipelines menjalankan pengujian

Di sini, Anda menonton eksekusi alur. Alur menjalankan tes antarmuka pengguna Selenium selama tahap Uji.

Di Azure Pipelines, buka build dan lacak saat berjalan.

Selama build, Anda akan melihat pengujian otomatis berjalan setelah situs web disebarkan.
Setelah build selesai, buka halaman ringkasan.

Anda perhatikan bahwa penyebaran dan pengujian UI berhasil diselesaikan.
Di dekat bagian atas halaman, perhatikan ringkasannya.

Anda perhatikan bahwa artefak build untuk situs web Space Game diterbitkan seperti biasa. Perhatikan juga bagian Pengujian dan cakupan, yang menunjukkan bahwa tes Selenium telah lulus.
Pilih ringkasan pengujian untuk melihat laporan lengkap.

Laporan menunjukkan bahwa kesembilan tes telah lulus. Pengujian ini mencakup tiga pengujian di tiga browser.

Jika ada pengujian yang gagal, Anda mendapatkan hasil terperinci dari kegagalan tersebut. Dari sana, Anda dapat menyelidiki sumber kegagalan, memperbaikinya secara lokal, dan kemudian mendorong perubahan yang diperlukan untuk membuat pengujian lulus dalam alur.

Amita: Otomatisasi ini menarik! Saya sekarang memiliki tes antarmuka pengguna yang dapat saya jalankan di alur. Tes akan benar-benar menghemat waktu kita dalam jangka panjang. Saya juga memiliki pola yang harus diikuti untuk menambahkan lebih banyak tes. Yang terbaik dari semuanya, tes UI memberi kami kepercayaan tambahan pada kualitas kode kami.

Andy: Semua benar. Ingat, pengujian yang berulang kali Anda jalankan secara manual adalah kandidat yang baik untuk otomatisasi. Semoga beruntung menambahkan lebih banyak. Jika Anda terjebak atau membutuhkan peninjau kode, Anda tahu di mana menemukan saya.

Lanjutkan