Рубрики
Uncategorized

DevOps Blazor Webassembly Решение: Часть 4 — конец к концу теста пользовательского интерфейса

Развлеченные Blazor Webassembly App. Помечено в DevOps, Blazor, Windassembly, Azurevops.

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

Blazor WebAssembly — это просто другое веб-приложение, поэтому ничего не отличается от обычного тестирования веб-приложения. Я использую Selenium для автоматизации теста. Посмотреть Тест пользовательского интерфейса с селеном Для детализации информации.

Хотя я могу использовать слот для тестирования и замены функции для выпуска, она требует хотя бы стандартного плана. Поэтому добавляю еще одну прикладную службу для тестирования.

Запустите следующую команду из Cloud Shell или используйте GUI, чтобы создать другую службу приложений.

az webapp create --name DevOpsBlazor-E2E-Test -g DevOpsBlazorRG --plan DevOpsBlazorPlan

Добавить проект и первый тест.

Тест пользовательского интерфейса с селеном имеет подробную информацию. Я следую большую часть шагов здесь.

1. От решения, добавьте новый проект и выберите проект XUNIT. Я называю это как DevOpleblezor.endteend.

2. Добавьте ниже пакеты Nuget. Я только тестирую Chrome на этот раз.

  • Селен. WebDriver
  • Селен. WebDriver. Хромедрист
  • Селен. Служба поддержки

3. Переименуйте существующие Unittest1.cs для indexpagee2etests.cs и обновите код, как показано ниже.

  • Утилизируйте диск при тестировании
  • Получить тестовый URL из переменной среды
  • Используйте безголовый браузер для теста
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using Xunit;

namespace DevOpsBlazor.EndToEnd
{
    public class IndexPageE2ETests: IDisposable
    {
        private IWebDriver driver;
        private string appURL;

        public IndexPageE2ETests()
        {
            var options = new ChromeOptions();
            options.AddArgument("--headless");
            driver = new ChromeDriver(options);
            appURL = Environment.GetEnvironmentVariable("TestUrl");
            if (string.IsNullOrEmpty(appURL)) appURL = "http://localhost:59727";
            Console.WriteLine($"appURL is: {appURL}");
        }

        public void Dispose()
        {
            driver.Dispose();
        }
    }
}

4. Добавьте один тест для проверки индекса. Я просто переписку на верхнюю страницу («/») и проверил, хотите ли «Hello World!» существуют.

[Fact]
public void ShouldDisplayHelloWorld()
{
    driver.Navigate().GoToUrl(appURL + "/");
    var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementExists(By.CssSelector("h1")));
    Assert.Equal("Hello, world!", driver.FindElements(By.CssSelector("h1"))[0].Text);
    driver.Quit();
}

5. Создайте решение для подтверждения, я не получаю никаких ошибок.

Запустите тест на интерфейс

После того, как вся сборка преуспела, я могу проверить это сейчас.

1. Нажмите Ctrl + F5, чтобы начать сервер. Он запускает браузер, и я вижу порт 59727, как я устанавливаю в код.

2. Запустите тест от Test Explorer и подтвердите его. Я также могу изменить утверждение, чтобы сделать его неспособным.

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

Добавить E2E тест на счетную страницу

Теперь давайте проверим что-то изменив UI.

1. Добавьте новый файл CS и назовите его как «CourtPagee2etests.cs». Обновите код, как показано ниже. Поскольку стандартный код дубликата по всем тестам, я должен создать базовый класс, который я буду делать в будущем.

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support.UI;
using System;
using Xunit;

namespace DevOpsBlazor.EndToEnd
{
    public class CounterPageE2ETests : IDisposable
    {
        private IWebDriver driver;
        private string appURL;

        public CounterPageE2ETests()
        {
            var options = new ChromeOptions();
            options.AddArgument("--headless");
            driver = new ChromeDriver(options);
            appURL = Environment.GetEnvironmentVariable("TestUrl");
            if (string.IsNullOrEmpty(appURL)) appURL = "http://localhost:59727";
            Console.WriteLine($"appURL is: {appURL}");
        }

        public void Dispose()
        {
            driver.Dispose();
        }       
    }
}

2. Добавьте один тест, который переписывается на счетную страницу и проверьте значение до/после нажатия кнопки.

[Fact]
public void ShouldIncrementCount()
{
    driver.Navigate().GoToUrl(appURL + "/counter");
    var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementExists(By.CssSelector(".btn")));
    Assert.Equal("Current count: 0", driver.FindElements(By.CssSelector("p"))[0].Text);
    driver.FindElement(By.CssSelector(".btn")).Click();
    Assert.Equal("Current count: 1", driver.FindElements(By.CssSelector("p"))[0].Text);
    driver.Quit();
}

3. Запустите тест, чтобы увидеть результат. Обязательно запустите сервер сначала.

Хотя я еще не полностью реализовал весь тест, я обновляю трубопровод Azure DevOps, чтобы я мог запустить тест E2E на облаке.

1. Открытые трубопроводы в Azure Devops и редактируют. Первое, что я обновляю, это vmimage к Windows 2019. Установленный на пакет Nuget использует драйвер Chrome 81.xx и Windows 2019 Hosted Agent — это тот, который имеет предварительно установленный драйвер. Вы можете использовать другое изображение, чтобы соответствовать версии драйвера.

2. Добавьте новый этап после этапа сборки.

  • Создать публикуемый Dotnet Run Опубликовать
  • Опубликовать в недавно добавленную службу приложений
  • Запустить тест. Используйте Task.env, чтобы указать переменную среды.
  • Опубликовать артефакт на следующую работу
- stage: End_To_End_Test
  displayName: E2E Test

  jobs:
  - job: Release
    displayName: Release to E2E
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: DotNetCoreCLI@2
      displayName: Publish the project
      inputs:
        command: 'publish'
        publishWebProjects: true

    - task: AzureRmWebAppDeployment@4
      inputs:
        ConnectionType: 'AzureRM'
        azureSubscription: ''
        appType: 'webApp'
        WebAppName: 'DevOpsBlazor-E2E-Test'
        packageForLinux: '$(System.DefaultWorkingDirectory)/**/*.zip'

    - task: DotNetCoreCLI@2
      env: {'TestUrl':'http://devopsblazor-e2e-test.azurewebsites.net'}
      displayName: Run End to End Tests
      inputs:
        command: 'test'
        projects: '**/DevOpsBlazor.EndToEnd.csproj'

3. Сохраните изменение.

Наконец, синхронизируйте все изменения и нажмите на репозиторий, чтобы вызвать трубопровод.

1. От Visual Studio, совершить все изменения и «синхронизировать» изменение, которое делает тягу/толчок Git.

2. После того, как нажатие было завершено, трубопровод срабатывает автоматически.

3. После завершения см. В журнале детализации, чтобы подтвердить конец, чтобы закончить тестовые прогоны, как и ожидалось.

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

Оригинал: «https://dev.to/kenakamu/devops-blazor-webassembly-solution-part-4-end-to-end-ui-test-1b3g»