В предыдущей статье я говорил о модульных тестах NG. Сегодня я расскажу о тестировании E2E (сквозного).
Когда мы тестируем одну функциональную точку определенного модуля, модульное тестирование является наиболее подходящим. Однако, когда возникает ошибка, когда пользователь взаимодействует с несколькими страницами, модульное тестирование не будет работать. В настоящее время E2E должен использоваться для моделирования операций пользователей и восстановления проблемного сайта. Конечно, использование теста E2E также может проверить надежность программы. Многие вещи, которые модульное тестирование не может быть сделано с помощью тестов E2E.
Раньше NG использовал «Агольный сценарий» для запуска тестов E2E, и теперь он был заменен вытянителем для запуска E2E.
Транспортир
Продетчик - это структура, используемая в AngularJS для тестирования E2E. Сам он является модулем NPM и построен на Webdriverjs. Protractor может действительно позволить вашим тестовым случаям работать в браузере и полностью имитировать реальное поведение пользователей.
Вот некоторые из его адресов ресурсов:
1. Тест API, предоставленный Proctor
2. Простое использование примера транспорта
3.
Принцип работы транспортировки
Продюсер зависит от следующих вещей, чтобы запустить тесты E2E:
1. API Webdriver, которые являются Webdriverjs, упомянутыми выше, являются связанными JS API, предоставленными Selenium, с тестированием Front-End.
2. Selenium Server, бэкэнд -пакет, используется для связи с драйвером браузера
3. Драйверы браузера Webdriver используются для отображения реального контента веб -сайта и общения с Selenium Server. Это место, где можно передать реальные операции браузера.
Весь процесс работы заключается в следующем
Если вы хотите узнать больше о предыдущих взаимодействиях этих компонентов, пожалуйста, нажмите здесь
Используйте NG Seed Project, чтобы объяснить E2E
Мы используем Seed Project, предоставленный NG, для объяснения реального примера E2E. Сначала используйте следующую команду для получения начального проекта
Кода -копия выглядит следующим образом:
git clone https://github.com/angular/angular-seed.git
Затем беги
Кода -копия выглядит следующим образом:
NPM Установка
Установить все зависимости, связанные с
Здесь мы сначала поговорим о файле конфигурации, необходимым для запуска теста E2E. Вы можете видеть, что файл Test/Protractor-conf.js используется для настройки связанных функций. Давайте сосредоточимся на нескольких атрибутах
1.specs представляет путь для запуска тестового файла, а написанный здесь e2e/*. JS
2. Baseurl представляет корневой адрес перехода страницы между браузерами в тестовом файле
3. Возможности представляют, какой браузер использовать для запуска тестовых примеров, таких как использование Chrome, вы можете установить его так
Кода -копия выглядит следующим образом:
Возможности: {
'BrowserName': 'Chrome'
}
структура представляет какую тестовую структуру использовать, вот жасмин
Если вы хотите узнать больше об этом файле конфигурации, нажмите здесь, чтобы просмотреть его.
После разговора о файле конфигурации, давайте посмотрим на то, как писать тестовые примеры и сначала опубликуем пример на официальном веб -сайте.
Кода -копия выглядит следующим образом:
«Использовать строго»;
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
описать ('my app', function () {
browser.get ('index.html');
Это ('должен автоматически перенаправить на /view1, когда местоположение хэш /фрагмент пуст', function () {
weals (browser.getlocationabsurl ()). Tomatch ("/view1");
});
описать ('view1', function () {
oopeach (function () {
browser.get ('index.html#/view1');
});
это ('должен рендеринг VIEW1, когда пользователь перемещается в /view1', function () {
Ожидайте (element.all (by.css ('[ng-view] p')). First (). getText ()).
томатч (/частично для просмотра 1/);
});
});
описать ('view2', function () {
oopeach (function () {
browser.get ('index.html#/view2');
});
It ('должен рендеринг View2, когда пользователь перемещается в /view2', function () {
Ожидайте (element.all (by.css ('[ng-view] p')). First (). getText ()).
томатч (/частично для просмотра 2/);
});
});
});
Прежде всего, синтаксис выше - это метод написания, поддерживаемый рамкой жасмин. Если вы не понимаете его использования, вы можете нажать здесь
Здесь мы поговорим только о некоторых общих методах и свойствах, предоставленных Proctor в приведенном выше примере
1.Browser, глобальный объект, представляет собой экземпляр текущего браузера. Обычно используемый метод GET используется для реализации изменения адреса браузера.
2. Элемент, Global Object, предоставляет такие функции, как jQuery, которые отвечают за поиск элементов документа, и часто используются в совместном использовании объектами.
3. By, Global Object, предоставляет тип селектора, например, вы можете найти элемент через CSS, модель, привязку и другие функции.
Для метода элемента и BY, пожалуйста, обратитесь к документации API выше.
Сказав так много, пришло время запустить вышеуказанные тестовые примеры, команда относительно проста
Кода -копия выглядит следующим образом:
NPM запустить обновление-Webdriver
Это отвечает за загрузку соответствующих драйверов браузеров и пакетов локальных банков Selenium. Как правило, это не удастся, потому что оба ресурса находятся на сервере Google, поэтому вы можете использовать браузер для просмотра стены, чтобы загрузить ее отдельно. Адрес следующего:
1. Адрес драйвера Chrome, как правило, загружайте файл Chromedriver_2.9.zip.
2. Загрузите локальный пакет JAR Selenium-Server, как правило, загружайте файл Selenium-server-standalone-2.40.0.jar.
Затем скопируйте селен-сервер в папку Selenium в пакете Proctor. Если вышеупомянутая команда будет включена, файл появится здесь, но он будет пустым, просто замените его напрямую. Вам также необходимо скопировать файл после декомпрессии Chromedriver_2.9.zip здесь.
Наконец, запустите следующую команду, чтобы увидеть результаты теста
Кода -копия выглядит следующим образом:
NPM запустите выстой
Если вы хотите узнать больше о командной строке в проекте NG Seed, вы можете нажать здесь, чтобы просмотреть ее
Суммировать
Тест NG E2E намного сложнее, чем конфигурация модульного теста, но он может сделать много вещей. Если вы очень стоите, вы также можете попробовать это. Если у вас есть какие -либо вопросы, вы можете ответить на комментарии.