Угловой | Селен

Как настроить Selenium в проекте Angular

Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha.

В этой статье мы рассмотрим, как настроить Selenium в Angular. В частности, мы собираемся сделать следующее:

  • настройте Selenium, используя npm для установки Selenium WebDriver и необходимых драйверов браузера
  • создайте второй проект, чтобы тесты находились в той же рабочей области, что и тестируемое приложение.
  • создайте рабочую команду для запуска тестов селена с помощью Mocha
  • создать и запустить пример теста селена для демонстрационного приложения
  • просмотреть сгенерированный отчет

Итак, приступим!

Отказ от ответственности. В этой статье основное внимание уделяется настройке и использованию Selenium в проекте Angular. Некоторое знакомство с Selenium и его терминологией желательно, но не обязательно.

Настройка Selenium в Angular

Во-первых, нам нужно установить необходимые зависимости для Selenium, запустив:

npm install --save-dev selenium-webdriver @types/selenium-webdriver mocha @types/mocha mochawesome @types/mochawesome mochawesome-report-generator chai @types/chai chromedriver

Это установит следующие зависимости разработчика в нашем проекте:

Есть и другие способы установки драйверов, но в нашем случае npm самый простой.

Все эти пакеты устанавливаются как зависимости разработки и отображаются как часть devDependencies в файле package.json. Тесты не будут включены в производственный пакет. Поэтому эти пакеты необходимы только на этапе разработки.

Создание проекта E2E

Затем мы создаем новый проект TypeScript, в котором будут размещаться наши тесты. Мы создаем следующую базовую структуру каталогов.

А пока давайте объясним иерархию проекта.

  • e2e/tsconfig.json — это файл, указывающий, что текущий каталог является корневым каталогом проекта TypeScript. Это делает e2e корневой папкой.
  • src содержит весь исходный код.
  • src/common содержит общие служебные классы.
  • src/pages содержит .page.ts файлов, представляющих собой классы объектной модели страницы, основанные на Шаблоне проектирования объектов страницы. Мы создаем классы, которые представляют разные страницы приложения. Затем мы определяем повторно используемые методы, которые представляют действия пользователя на соответствующей странице.
  • src/tests содержит .spec.ts файлов, которые являются настоящими тестами Selenium.

Создание рабочей команды

Наш следующий шаг — добавить пользовательский скрипт в свойство scripts в файле package.json.

Большой! Теперь мы можем запустить наши тесты, набрав npm run e2e.

Не пугайтесь длины этой команды. Давайте разберем его и объясним по частям.

  • tsc -p e2e компилирует файлы TypeScript в JavaScript. Это необходимо, потому что Mocha — это среда тестирования JavaScript. Следовательно, он понимает только JavaScript.
  • && можно перевести как «выполнить первую команду и только в случае успеха выполнить вторую команду».
  • mocha dist/e2e/tests запустит тесты с использованием Mocha (при условии, что компиляция завершена успешно).
  • --reporter mochawesome предназначен для настройки репортера, который мы хотим использовать. Мы также можем использовать --reporter-options для предоставления некоторых опций репортера.

Создание и запуск нашего первого теста

Мы оставили лучшее напоследок. Настало время примера!

Мы воспользуемся демонстрационным приложением из нашей предыдущей статьи. Вот как выглядит приложение:

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

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

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

1. Составьте сценарий

Во-первых, нам нужно составить сценарий в нашей голове. Selenium-тесты — это сквозные (e2e) тесты. Как будто с приложением взаимодействует реальный пользователь. Вместо этого мы программируем «робота» для автоматического выполнения этих взаимодействий.

Чтобы придумать сценарий, подумайте, что бы вы, как человек, сделали, чтобы протестировать функцию под рукой. В нашем примере, учитывая наличие журналов, мы просто нажмем кнопку очистки и после этого убедимся, что журналы не видны.

Обратите внимание, что это всего лишь демонстрация. Итак, мы собираемся создать необходимые данные в нашем тесте. В реальных приложениях мы бы никогда этого не сделали. E2e-тесты «дорогие» с точки зрения времени выполнения. Поэтому в идеале мы бы по-другому настроили требуемые данные перед выполнением теста.

2. Сделайте элементы узнаваемыми

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

Человек может сказать, где щелкнуть, потому что он/она может видеть элементы. Точно так же Selenium использует идентификаторы, классы, атрибуты и другие вещи для поиска элементов.

Мы просто присваиваем идентификатор уникальным элементам, таким как кнопка очистки истории. Для повторяющихся элементов, таких как журналы, мы прикрепляем атрибуты data-*.

3. Создайте класс Page Object

Наконец, нам нужно создать класс Page Object, о котором мы говорили ранее. Методы соответствуют многократно используемым действиям, которые можно выполнять на этой странице.

4. Напишите тест

Все в порядке! Теперь мы готовы написать наш тест.

Согласно документации Mocha, describe() определяет набор тестов, а it() определяет тест в нашем наборе тестов. this.timeout(0) отключает тайм-аут мокко по умолчанию, который составляет две секунды. before, beforeEach и after являются методами ловушек.

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

Перед запуском наших тестов мы запускаем приложение с npm run start. После запуска приложения выполняем npm run e2e.

Еще одна вещь, которую следует помнить, это то, что если вы запускаете свои тесты в контейнере, вы не сможете увидеть их выполнение вживую. Контейнеры поддерживают только режим headless, и в этом случае вам нужно раскомментировать параметр в файле custom-driver.ts.

После завершения выполнения теста должны быть напечатаны следующие консольные сообщения.

Просмотр созданного отчета

Все наши тесты прошли успешно. Ура!

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

Каждый раз, когда вы запускаете свои тесты, для вас создается «потрясающий» отчет. Отчет сохраняется в каталоге mochawesome-report, расположенном на том же уровне, что и ваше приложение и проекты e2e.

Вот как обычно выглядит отчет:

Вы можете найти исходный код в этом репозитории GitHub.

Наконец, не забудьте подписаться на мою рассылку, чтобы следить за дополнительным контентом, подобным этому.

Заключение

В этой статье было показано, как мы можем настроить Selenium в Angular.

Мы начали с установки всех необходимых зависимостей. Затем создал отдельный проект для размещения наших тестов в той же рабочей области, что и приложение Angular. Затем мы добавили команду запуска для нашего удобства. Мы набросали тестовый сценарий, реализовали его и увидели, как запустить его с помощью Mocha. Наконец, мы представили сгенерированный отчет о выполнении теста.

Надеюсь, вам понравилась эта статья и вы узнали что-то новое.

Спасибо, что прочитали. Следите за новостями.