Упражнение. Выполнение тестов пользовательского интерфейса локально и в конвейере

Завершено

Прежде чем Энди и Амита выполняют свои тесты в конвейере, они хотят убедиться, что их новые тесты пользовательского интерфейса делают то, что они должны. В этом разделе описано, как выполнить тесты пользовательского интерфейса Selenium локально, а затем в конвейере.

Написание автоматизированных тестов — это итеративный процесс, как и написание любого другого типа кода. Для собственных приложений, скорее всего, вам потребуется попробовать несколько подходов, обратиться к справочной документации и примеру кода, а также устранить ошибки сборки.

Необязательно. Установка драйвера Selenium для Microsoft Edge

Следуйте этому разделу, если вы хотите, чтобы тесты выполнялись локально в Microsoft Edge.

Пакет NuGet для Chrome и Firefox устанавливает программное обеспечение драйвера в каталоге bin вместе с скомпилированным тест-кодом. Для Edge необходимо вручную установить драйвер. Для этого:

  1. Установите Microsoft Edge.

  2. Откройте Edge и перейдите к ней edge://settings/help. Запишите номер версии. Приведем пример:

    Снимок экрана: страница параметров Microsoft Edge с номером версии.

  3. Перейдите на страницу загрузки драйверов Microsoft Edge и скачайте драйвер, соответствующий номеру версии Edge. Приведем пример:

    Снимок экрана: раздел скачивания на странице драйвера Microsoft Edge, где указана соответствующая версия драйвера.

  4. Извлеките содержимое ZIP-файла в каталог bin/Release/net6.0, находящийся в каталоге Tailspin.SpaceGame.Web.UITests проекта. Создайте эти каталоги, если они не существуют.

В macOS может потребоваться обновить системную политику, чтобы разрешить запуск msedgedriver . Для этого в Visual Studio Code выполните следующую spctl команду из терминала:

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

Экспорт переменных среды

Далее в этом модуле вы запустите тесты Selenium в Windows Server 2019. В документации перечислены программное обеспечение, предварительно установленное для вас.

В разделе Selenium Web Driver перечислены версии драйверов Selenium, доступные для Chrome, Firefox и Edge. Приведем пример:

Снимок экрана: документация по установленным драйверам Selenium в агенте сборки.

Для каждого драйвера есть переменная среды, которая сопоставляется с расположением этого драйвера. Например, ChromeWebDriver сопоставляется с расположением драйвера Chrome.

Код модульных тестов уже настроен для чтения этих переменных среды. Эти переменные сообщают Selenium, где найти исполняемые файлы драйвера. Чтобы выполнить модульные тесты локально, необходимо экспортировать эти же переменные среды.

В Visual Studio Code перейдите в терминал. Затем выполните следующие команды. Замените путь, показанный полным путем к проекту mslearn-tailspin-spacegame-web-deploy .

Внимание

Обязательно выполните эти команды и задайте переменные среды в том же окне терминала, которое используется для выполнения тестов.

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

Локальное выполнение тестов пользовательского интерфейса

Метод Setup в файле HomePageTest.cs выполняет переход на домашнюю страницу Space Game после задания переменной-члена driver.

Хотя URL-адрес сайта можно жестко закодить, здесь мы считываем URL-адрес из переменной среды с именем SITE_URL. Таким образом можно выполнять тесты несколько раз в разных URL-адресах.

// 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 в вашей среде Служба приложений, вы будете использовать сайт, на котором размещена корпорация Майкрософт для локального выполнения тестов.

Чтобы выполнить тесты локально, выполните следующие действия:

  1. В Visual Studio Code перейдите в интегрированный терминал и откройте новое окно терминала.

  2. Выполните следующие команды в новом окне терминала.

    dotnet build --configuration Release
    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
    
  3. Запишите ссылку на локальный веб-сайт в этом примере http://localhost:5000.

  4. Вернитесь в окно терминала, в котором вы задали переменные среды на предыдущем шаге и убедитесь, что вы находитесь в корневом каталоге проекта. Приведем пример:

    cd ~/mslearn-tailspin-spacegame-web-deploy
    
  5. Экспорт переменной SITE_URL среды. Используйте локальную ссылку, полученную на предыдущем шаге.

    export SITE_URL="http://localhost:5000"
    

    Эта переменная указывает на веб-сайт Space Game , на котором размещается Корпорация Майкрософт.

  6. Запустите тесты пользовательского интерфейса.

    dotnet test --configuration Release Tailspin.SpaceGame.Web.UITests
    

    Этот код выполняет тесты, расположенные в проекте Tailspin.SpaceGame.Web.UITests .

    По мере выполнения тестов появляется один или несколько браузеров. Selenium управляет каждым браузером и выполняет определенные тестовые действия.

    Примечание.

    Не волнуйтесь, если все три браузера не отображаются. Например, вы не увидите тесты, выполняемые в Chrome, если у вас нет Chrome или несовместимая версия. Просмотр только одного браузера поможет вам убедиться, что тесты работают. На практике в локальной среде разработки может потребоваться настроить все браузеры, на которые вы хотите протестировать. Эта настройка позволит проверить, что тесты работают должным образом в каждой конфигурации перед выполнением тестов в конвейере.

  7. В терминале выполните трассировку выходных данных каждого теста. Кроме того, обратите внимание на сводку по выполнению тестов в конце.

    В этом примере показано, что все девять тестов были выполнены успешно, а пропущенных тестов нет.

    Passed!  - Failed:     0, Passed:     9, Skipped:     0, Total:     9, Duration: 5 s 
    

Добавление переменной SITE_URL в Azure Pipelines

Ранее вы устанавливаете SITE_URL переменную среды локально, чтобы тесты знали, где следует указывать каждый браузер. Эту переменную можно добавить в Azure Pipelines. Процесс аналогичен добавлению переменных для Служба приложений экземпляров. При запуске агента эта переменная автоматически экспортируется в агент в качестве переменной среды.

Давайте добавим переменную конвейера, прежде чем обновить конфигурацию конвейера. Для этого:

  1. В Azure DevOps перейдите в проект Space Game — веб-функциональные тесты .

  2. В разделе "Конвейеры" выберите библиотеку.

  3. Выберите группу переменных выпуска .

  4. В разделе "Переменные" нажмите кнопку +Добавить.

  5. Введите имя переменной SITE_URL. В качестве значения введите URL-адрес экземпляра Службы приложений, соответствующего тестовой среде, например http://tailspin-space-game-web-test-10529.azurewebsites.net.

  6. В верхней части страницы нажмите кнопку "Сохранить ", чтобы сохранить переменную в конвейере.

    Ваша группа переменных должна выглядеть следующим образом:

    Снимок экрана: группа из четырех переменных в Azure Pipelines.

Изменение конфигурации конвейера

В этом разделе описано, как изменить конфигурацию конвейера для выполнения тестов пользовательского интерфейса Selenium на этапе тестирования .

  1. В Visual Studio Code откройте файл azure-pipelines.yml . Затем измените файл следующим образом:

    Совет

    Этот файл содержит несколько изменений, поэтому мы рекомендуем заменить весь файл на то, что вы видите здесь.

    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'
    

    Файл включает следующие три изменения:

    • Переменная dotnetSdkVersion перемещается в верхнюю часть файла, чтобы получить к нему доступ несколько этапов. Здесь этап сборки и этап тестирования требуют этой версии .NET Core.

    • Этап сборки публикует только пакет веб-сайта Space Game в качестве артефакта сборки. Ранее вы опубликовали артефакты следующим образом:

      - 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
      

      Эта задача создает два артефакта сборки: пакет веб-сайта Space Game и скомпилированные тесты пользовательского интерфейса. Мы создадим тесты пользовательского интерфейса на этапе сборки , чтобы они компилировались на этапе тестирования , но не нужно публиковать скомпилированный код теста. Мы снова создадим его на этапе тестирования при выполнении тестов.

    • Этап тестирования включает в себя второе задание, которое создает и запускает тесты. Это задание напоминает тот, который вы использовали в тестах качества выполнения в конвейере сборки с помощью модуля Azure Pipelines . В этом модуле вы выполнили тесты NUnit, которые проверили функциональность фильтрации в области лидеров.

      Помните, что задание развертывания — это особый тип задания , который играет важную роль на этапах развертывания. Второе задание — это обычное задание, которое запускает тесты Selenium в агенте Windows Server 2019. Хотя мы используем агент Linux для создания приложения, здесь мы используем агент Windows для выполнения тестов пользовательского интерфейса. Мы используем агент Windows, так как Амита выполняет ручные тесты в Windows, и это то, что большинство клиентов используют.

      Задание RunUITests зависит от Deploy задания, чтобы задания выполнялись в правильном порядке. Вы развернете веб-сайт для Служба приложений перед запуском тестов пользовательского интерфейса. Если эта зависимость не указана, задания на этапе могут выполняться в любом порядке или параллельно выполняться.

  2. В интегрированном терминале добавьте azure-pipelines.yml в индекс, зафиксируйте изменения и отправьте ветвь до GitHub.

    git add azure-pipelines.yml
    git commit -m "Run Selenium UI tests"
    git push origin selenium
    

Просмотр выполнения тестов в Azure Pipelines

Здесь вы наблюдаете запуск конвейера. Конвейер выполняет тесты пользовательского интерфейса Selenium на этапе тестирования .

  1. В Azure Pipelines перейдите к сборке и трассировке ее при выполнении.

    Во время сборки вы увидите автоматические тесты после развертывания веб-сайта.

    Снимок экрана: выполняемые этапы в Azure Pipelines.

  2. После завершения сборки перейдите на страницу сводки.

    Снимок экрана: завершенные этапы в Azure Pipelines.

    Обратите внимание, что развертывание и тесты пользовательского интерфейса успешно завершены.

  3. В верхней части страницы обратите внимание на сводку.

    Обратите внимание, что артефакт сборки для веб-сайта Space Game публикуется так же, как всегда. Также обратите внимание на раздел "Тесты и покрытие ", в котором показано, что тесты Selenium прошли.

    Снимок экрана: сводка теста в Azure Pipelines.

  4. Выберите сводку теста, чтобы просмотреть полный отчет.

    В отчете показано, что все девять тестов прошли. Эти тесты включают три теста в трех браузерах.

    Снимок экрана: полный отчет тестирования в Azure Pipelines.

    Если какой-либо тест завершается ошибкой, вы получите подробные результаты сбоя. Оттуда можно исследовать источник сбоя, исправить его локально, а затем отправить необходимые изменения, чтобы выполнить тесты, проходящие в конвейере.

Амита: Это автоматизация захватывающая! Теперь у меня есть тесты пользовательского интерфейса, которые можно запустить в конвейере. Тесты действительно сэкономят нам время в долгосрочной перспективе. У меня также есть шаблон, чтобы добавить дополнительные тесты. Лучше всего тесты пользовательского интерфейса дают нам дополнительную уверенность в нашем качестве кода.

Энди: Все верно. Помните, что тесты, которые многократно выполняются вручную, являются хорошими кандидатами для автоматизации. Удачи, добавляя больше. Если вы застряли или нуждаетесь в рецензенте кода, вы знаете, где найти меня.