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

  • 6 мин

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

Запуск тестов пользовательского интерфейса вручную

Амита ждет Энди, чтобы показаться. Энди поможет Амите написать тест пользовательского интерфейса, который будет добавлен на этап тестирования конвейера. Когда он прибывает, Энди видит Амита расшифровывается в своей записной книжке, перекрещив что-то, бормаясь, а затем разорвать страницу.

Энди: Привет. Вы не выглядите счастливым.

Амита: Я не счастлив. Я пытаюсь выяснить, как написать автоматизированный тест, но я не знаю, где начать. Я не код. Я чувствую, что я устарел.

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

Я думаю, что лучший способ начать — автоматизировать то, что вы регулярно делаете вручную. Выберите тест пользовательского интерфейса. Затем давайте рассмотрим его и напишите шаги. Далее мы посмотрим, как автоматизировать эти шаги. Какой тест следует выбрать?

Амита принимает глубокое дыхание.

Амита: Давайте автоматизируем модальные тесты окна. Щелкнув некоторые вещи, например кнопку "Скачать игру ", я хочу убедиться, что отображается правильное модальное окно. Затем, когда я щелкаю от модального окна, я хочу убедиться, что модальное окно исчезает и что главное окно снова активно.

Энди: Это звучит как отличное место, чтобы начать. Вы запускаете тест. Я запишу процедуру.

Амита открывает ноутбук Windows и запускает Google Chrome. Она переходит в веб-приложение и проверяет, открывается ли домашняя страница.

Совет

Если вы хотите следовать вместе с ручными тестами Амиты, вы можете запустить локальную копию веб-сайта Space Game. В терминале Visual Studio Code выполните следующие команды, а затем щелкните ссылку, которая выглядит следующим Now listening on: http://localhost:5000образом.

git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

Энди: ОК. Что вы проверка далее?

Амита: Я проверка, что при нажатии кнопки "Скачать игру" отображается правильное модальное окно.

Амита нажимает кнопку "Скачать игру ". Появится модальное окно.

Screenshot of a browser showing the Download game modal window on the Space Game website.

Энди: Здорово. Какие модальные окна вы проверка далее?

Амита: Далее я проверка четыре игровых экрана. После этого я щелкаю топ-игрока на панели лидеров. Я проверяю, отображается ли профиль игрока.

Амита щелкает каждый из четырех эскизов изображений, чтобы отобразить пример игровых экранов.

Screenshot of a browser showing the game screen modal window on the Space Game website.

Далее Амита щелкает верхнего игрока на панели лидеров. Появится профиль игрока.

Screenshot of a browser showing the leaderboard modal window on the Space Game website.

Амита: Это охватывает модальные тесты окна. Я запускаю эти тесты в Windows, потому что это то, что большинство игроков используют для посещения нашего сайта. Я запускаю тесты на Chrome, и когда у меня есть время, я также запускаю их на Firefox и Microsoft Edge.

Если бы у меня было время, я бы снова запустить все тесты на macOS и Linux, чтобы убедиться, что мы совместимы с любой операционной системой, которую игроки используют для посещения сайта. Но мне нужно выполнить много других тестов.

Что такое указатели в Selenium?

В тесте Selenium указатель выбирает элемент HTML из модели DOM (объектной модели документа) для выполнения действий. Думайте о DOM как дереве или графическом представлении HTML-документа. Каждый узел в DOM представляет часть документа.

В тесте Selenium можно найти html-элемент, выполнив следующие действия:

  • Атрибут id.
  • Атрибут name.
  • Выражение XPath.
  • Связывание текста или частичного текста ссылки.
  • Имя тега, например body или h1.
  • Имя класса CSS.
  • Селектор CSS.

Указатель, который вы используете, зависит от способа написания HTML-кода и типов запросов, которые требуется выполнить.

В HTML-документе id атрибут задает уникальный идентификатор элемента HTML. Здесь вы будете использовать id атрибут для запроса элементов на странице, так как каждый идентификатор должен быть уникальным. Это делает id атрибут одним из самых простых способов запроса элементов в тесте Selenium.

Получение идентификатора для каждого ЭЛЕМЕНТА HTML

Здесь вы следуете вместе с Амитой и Энди, как они собирают идентификатор для каждой кнопки, которую Амита щелкает и для каждого результирующего модального окна.

Энди: Я вижу, почему эти тесты занимают так много времени и могут быть настолько разочарованы. Вы собираетесь любить автоматизацию их. Обещаю.

Вот что мы сделаем. Мы получим атрибут для каждой id кнопки, которую вы щелкаете, и для отображаемого модального окна. Автоматические тесты, которые мы записываем, могут использовать эти выражения, чтобы узнать, какие кнопки следует щелкать и какие модальные окна ожидать.

Начнем с получения атрибута id для кнопки Download game (Скачать игру).

Примечание.

Эти действия можно выполнить, если вы хотите, или просто прочитать вместе. Следующий раздел содержит все id необходимые атрибуты при выполнении автоматических тестов.

  1. В Google Chrome перейдите на домашнюю страницу space Game .

  2. Щелкните правой кнопкой мыши кнопку "Скачать игру ", а затем выберите " Проверить".

    Откроется окно средств разработчика. Выделен HTML-код для кнопки "Скачать игру ".

  3. Проверьте выделенный код и запишите id атрибут. Скопируйте его id позже.

    Screenshot of a browser showing the developer tools window and a selected HTML element.

  4. Нажмите кнопку "Скачать игру ". Затем повторите шаги 2 и 3, чтобы получить id атрибут для отображаемого модального окна.

  5. Повторите процесс для четырех игровых экранов и топ-игрока на панели лидеров.

Амита открывает Microsoft Word и добавляет таблицу. Таблица содержит id атрибут для каждой ссылки и id атрибут для соответствующего модального окна. Чтобы сохранить таблицу базовой, Амита записывает:

  • Кнопка "Скачать игру".
  • Только один из игровых экранов.
  • Лучший игрок в списке лидеров.

Вот как выглядит таблица Амиты:

Компонент id ссылки Модального id
Кнопка "Скачать игру " download-btn pretend-modal
Экран первой игры screen-01 screen-modal
Игрок верхнего списка лидеров profile-1 profile-modal-1

Планирование автоматизированных тестов

Амита: ОК. У нас есть атрибут для каждой id кнопки, на который я нажимаю. У нас также есть результирующее модальное окно. Дальнейшие действия

Энди: Я думаю, что мы готовы написать наши тесты. Вот что мы сделаем:

  1. Создайте проект NUnit, включающий Selenium. Проект будет храниться в каталоге вместе с исходным кодом приложения.
  2. Напишите тестовый случай, использующий автоматизацию для щелчка указанной ссылки. Тестовый случай проверяет, отображается ли ожидаемое модальное окно.
  3. Используйте атрибут, сохраненный id для указания параметров в методе тестового варианта. Эта задача создает последовательность или ряд тестов.
  4. Настройте тесты для запуска в Chrome, Firefox и Microsoft Edge. Эта задача создает матрицу тестов.
  5. Запустите тесты и просмотрите автоматический просмотр каждого веб-браузера.
  6. Просмотр Selenium автоматически выполняется через ряд тестов для каждого браузера.
  7. В окне консоли убедитесь, что все тесты проходят.

Амита: Я буду рад узнать, насколько быстро выполняются тесты. Можем ли мы попробовать тесты сейчас?

Энди: Абсолютно. Давайте перейдем к моему ноутбуку. У меня есть готовый код приложения.