E2E-тестирование


Содержание

JavascriptTuts

Become a mobile application expert with my comprehensive Ionic 4 book

Dear future Masters of Angular 2 E2E Testing.
This is it. At the end of this lesson you will finally have every tools to create functional tests for your Angular 2 applications. No more excuses: You’ve got the power!

We will first get familiar with Locators then we will see how awesome Page Objects can be, followed by how to handle asynchronousness and finally the easiest part that is triggering Actions.

If you don’t have the basics right, head there otherwise you will be a little bit lost.

Locators

One if not the most important thing in E2E testing is finding the elements that you want to test in your view. Most of the time, you will ask yourself the question «why can’t I find this **** element?» followed by a «oooohhhhh».

You have many ways to do this. Most of them depend of your application. In order to get your elements, you will use a range of Locators. Most of the time, you can find your elements by:

For the upcoming tests, we will use this template.html:

Let’s focus on nested-class and nested-id.

By Class:

We grab here our element using element(by.css(selector)) then we test if it’s present or not.

By Id:

We grab here our element using element(by.id(elem-id)) then we test if it’s present or not.

The following locators a very useful in AngularJS but not yet implemented in Angular 2 so just keep them on the side for now.

By Model:

By Bindings:

In order to debug your tests, you can just add «browser.pause()» in your test, you will be able to run all the previous instructions and stop wherever you want.

Once it reaches your pause, you will have a screen similar to this one:

As you can see in this image, in order to get into the driver’s seat you need to type repl.

Now let’s say you don’t have any test and you just want to play around with Protractor. You can just type in your terminal:

If you have some issues with your path, you can type:

No need to type repl this time, just use the browser object and you are ready to sail!

Page Objects

What if you have tests that share the same scenario? Are you going to copy paste your code everywhere? What if this scenario changes? Now you have to go through every files and make the modifications.

That’s where Pages Objects become very useful. Write Once, Share Everywhere!

A Page Object is an object that contains the elements and scenarios concerning a page.

First a very simple Page Object:

Then we use it in our test:

We import the Page Object, create an instance then use it’s property.

Asynchronous Adventures

Now my friends, you can access any elements on your page! I mean almost :).

There will be some special cases.

If you were (un)lucky enough to work with jQuery, you must be familiar with document.ready().

By the asynchronous nature of JavaScript, there will be cases where you will try to access an element before it has yet appeared on the page.

In order to handle that, you will have to use a feature of Protractor in order to wait for your element to be ready before looking for it.

Here is an example displaying a button after a timeout expiration.

First the class that contains the timeout:

Then the template.html:

We have here a button that will trigger our timeout, once the timeout expires, the text is displayed.

Here are the tests.

We find our button, click on it, try to find our text BUT we expect it not to be present.

And here is the way we handle this case ;).

We use «browser.wait» combined with «browser.isElementPresent» testing our Locator. After 5 seconds the rest of the code is executed. Don’t forget to put a timer here otherwise your tests will be blocked forever!

So if one of your element is supposed to be here but you can’t get it, your gut instinct should tell you to remember what you have just read here.

Actions

Now that you have your precious element, you have done 90% of the work!


If you can’t find it, it’s either that your application doesn’t work as it should (that’s why we do tests) or you need to get better at testing and spend less time on Pokemon GO hunting dratinis near a river at 1am (we have all been there . ).

Let’s keep going with the actions that you can use on an element. Here they are:

  • elem.sendKeys: Type something in an input.
  • elem.click: Click.
  • elem.clear: Erase everything in an input.
  • elem.getAttribute(‘attrName’): Return a specific attribute of the element.
  • elem.submit: Submit a form.
  • elem.isPresent: Test if the element is present.

We are using Protractor which relies on WebDriver. If you need more fancy actions, you can have a look at what is available here.

Let’s test some of them.

For the template.html:

We will play a bit with the text input. Quick quiz, what does this test do (don’t read the description)?

Solution: We get our input, type “Some text” inside, test that we got the value set, clear it and finally test that the value is empty.

Legitimately we can ask ourself what is the best way to trigger actions? This link here shows one of the flaw of using JavaScript instead of WebDriver.
Sure writing in JavaScript is way more compact but it comes with some risks!

You can do anything that you want with an element. The best way to test it is to use the matchers that are available. Why? Because they are elegant and close to the human language, example:

Conclusion

This was the final post of this series, right now you have 90% of the skills to test your Angular 2 applications. You will get the other 10% by experience. Remember, first getting your elements using Locators, then putting the one that might be replicated in a Page Object, if you can’t find your element and you are sure that it is here, it might be might because it hasn’t appeared yet and you need to handle the asynchronousness. Finally test the **** out of your elements with Actions.

E2E-тестирование

Понятия B2B и B2C всем давно известны. А вот значение аббревиатуры E2E, как показывает практика, знают далеко не все. Если вы нашли себя в числе этих «не всех», предлагаем разбираться вместе.

Итак, E2E сокращение с английского «End-to-end»*.

*Стоит упомянуть о том, что в мире информационных технологий существует и другое значение аббревиатуры, также имеющее расшифровку «end-to-end», однако связанное со сквозной передачей данных. Говоря об IT решениях, важно знать контекст, чтобы не перепутать одно с другим.

В обиход введено несколько лет назад Джеймсом Славетом, партнером Greylock Partners, который является инвестором компаний Airbnb и Redfin.

И обозначает собственно направление бизнеса, когда некий товар/услуга/ценность предоставляемый некоторым количеством продавцов доносится до конечного потребителя с помощью специального софтверного продукта (web-площадки, приложения) агрегирующей первых со вторыми. Такая площадка и будет представлять E2E бизнес. Употребляя термин «ценность», имеем в виду то, что объектом обмена могут быть не только товар или услуга, но также и отношения между людьми (сайты знакомств, к примеру).

Теперь о главном, откуда же собственно берутся деньги? Путей несколько, вот они:

  1. % взимаемый с конечных пользователей, как например, в случае с такси-сервисами, где доход получаемый от поездки таксист делит с компанией-агрегатором;
  2. может также существовать некая фиксированная абонентская плата для одной из заинтересованных сторон (например, как Avito, Pomogatel.ru);
  3. компания может зарабатывать с помощью дополнительных платных опций (вышеупомянутые сайты знакомств, функция выделения поднять объявление на авито и пр.);
  4. ну, и традиционную продажу рекламного пространства также никто не отменял.

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

Несмотря на то, что сейчас принято говорить о Uber и Airbnb, как о флагманах E2E, все-таки само явление в бизнесе появилось гораздо раньше. Предлагаем вспомнить о том, что booking.com был основан почти за десятилетие до нашумевшего Uber.

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

Своим стремительным ростом E2E компании сильно обязаны росту и распространению смартфонов. Телефон – кнопка, с помощью которой можно управлять жизнью. Мы вызываем такси, заказываем еду, обмениваемся информацией, перекидываем деньги на счетах в банках, общаемся. Почти весь наш офлайн управляем в онлайн. Просто представьте, что Вам будет обиднее потерять кошелек или телефон?

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

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

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

Итак, первый очевидный вывод, на котором не буду останавливаться долго: разработчики, которых уже дефицит, будут востребованы еще больше. IT рекрутмент будет самой быстро оборачиваемой частью рынка человеческих ресурсов. Хорошие IT рекрутеры будут наиболее высокооплачиваемыми специалистами нашей отрасли.

А вот, что же будет с рынком подбора персонала? Логика и интуиция кричат примерно о следующем: сейчас в Москве более 1000 зарегистрированных кадровых агентств и несметное количество фрилансеров. Несомненно, есть крупные игроки, но большинство агентств очень маленькие. А вот теперь давайте представим, что появляется агрегатор, который собирает в себе все эти агентства с одной стороны и компании, готовые обратиться за помощью с другой. Теперь HR менеджеру или руководителю компании не надо тратить время на встречи с представителями агентств, чтобы понять экспертизу, не надо затевать скачки, заключая договора с 5 провайдерами одновременно. Он просто набирает в приложении отрасль, название вакансии, и программа выдает агентство, которое успешно закрывало похожий проект. Вот так, одним кликом.

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

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

  • Компания Uber известная своим феноменальным взлетом, а также неоднозначной репутацией.

«Однажды вечером, в 2008 году, в Париже во время снегопада Трэвис Каланик и Гэррет Кэмп не могли поймать такси. Тогда им и пришла в голову простая идея — нажал кнопку и поехал».

Так красиво историю о себе начинает сама компания.

А вот информация про компанию с сайта ХабраХабр.ру

В 2008 году Каланик встретился на одной из конференций с основателем сервиса StumbleUpon Гарретом Кэмпом. Тот рассказал, как в Новый год нанял с друзьями лимузин с водителем за $800. Кэмпу цена показалась грабительской. Ему в голову пришла идея разработать приложение, которое позволит делить машину с другими желающими из Кремниевой долины.

В 2009 году они вместе с Калаником создали Ubercab — мобильное приложение, позволявшее одним кликом вызывать личного водителя. Тогда сервисом пользовались друзья в Сан-Франциско, мало кто относился к нему серьёзно. Когда Камп спросил Каланика, будет ли он заниматься им постоянно, тот ответил отрицательно — полностью посвящать себя такой авантюре было рискованно.

Год назад основателя Трэвиса Каланика обвинили в краже идеи и технологий. Якобы Кевин Халперн из Калифорнии создал прототип сервиса для заказа такси через мобильное приложение много лет назад. Предприниматель требовал возместить ущерб на сумму в один миллиард долларов.

Халперн утверждал, что свой прототип он разработал еще в 2002 году, в своей компании Celluride Wireless. Они познакомились с Калаником в 2006 году. Тогда Халперн и продемонстрировал ему свои наработки. Каланик якобы воспользовался ими для создания собственного проекта. Заслуживает внимания упоминание об их повторной встрече в 2008 году. Именно тогда он раскрыл Каланику детали проекта. А через год после этого был запущен сервис Uber. Представители компании убеждены, что претензии безосновательны.

О будущем Ubercab много спорили. Одни говорили, что сервис нужно сфокусировать на сегменте люкс, добавив функции заказа вертолётов и самолётов. Другие предлагали делать Ubercab массовым, позволяющим ездить на дорогих чёрных машинах дешевле, чем в целом по рынку. Так считал и Каланик. Он рассуждал: «Чем больше людей захотят этим пользоваться, тем больше водителей будет готово предоставить такие услуги. Конкуренция вырастет, стоимость снизится, а время подачи машины уменьшится».

Родители Трэвиса Каланика были первыми пассажирами Uber, запустившегося в Лос-Анджелесе.

В октябре 2011-го Каланик привлёк к проекту внимание ведущих венчурных инвесторов, включая сооснователя Netscape Марка Андриссена, который вошёл в совет директоров сервиса. Шервин Пишевар из Menlo Ventures купил долю и инвестировал $20 миллионов. В сервис вложился Джефф Безос, глава Amazon. Uber стали пользоваться голливудские звёзды, с которыми Каланик был знаком: Эштон Катчер, Jay Z, Эдвард Нортон и другие.

Благодаря этому Uber стал известным. За пять лет компания получила $8,21 миллиарда от ведущих венчурных фондов, наняла 3000 сотрудников и открыла офисы в десятках стран. Каланику удалось то, что не удавалось Facebook и Google, — выйти на китайский рынок и завоевать аудиторию, несмотря на сопротивление местных игроков.


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

Еще одна всемирно известная компания AirBnB, (изначально AirBed&Breakfast — «надувной матрас и завтрак»).

Пользователи Airbnb имеют возможность сдавать путешественникам в аренду своё жильё целиком или частично. Сайт предоставляет платформу для установления контакта между хозяином и гостем, а также отвечает за обработку транзакций. Airbnb предлагает жильё в 65 000 городов 191 страны мира. С момента основания в августе 2008 года и до апреля 2020 года через сайт Airbnb нашли жильё более 150 млн человек. За свою деятельность Airbnb взимает определённый процент — с хозяев апартаментов 3 % от суммы бронирования, с арендатора — от 6 % до 12 % (по данным на апрель 2020 года).

Airbnb был основан в августе 2008 года в Сан-Франциско. Его основателями являются Брайан Чески, Джо Геббиа и Нейтан Блечарчик. Первоначальное финансирование было получено от бизнес-инкубатора Y Combinator. Позднее Greylock Partners, Sequoia Capital и Эштон Кутчер также инвестировали в компанию.

Цукерберг рекомендует:  C# - Можно ли совмещать разработку сразу в двух и более областях

Всего с момента основания компании и до апреля 2020 года в проект было инвестировано около $3,4 млрд. Одним из инвесторов стал фонд DST Global российского предпринимателя Юрия Мильнера.

Кроме штаб-квартиры в Сан-Франциско, компания имеет 10 региональных офисов: в Барселоне, Берлине, Гамбурге, Копенгагене, Лондоне, Милане, Париже, Сан-Паулу, Сингапуре и Сиднее.

Перед Гран-при Канады компания стала спонсором команды Manor Marussia F1 Team.

Хочется сказать о ней, как о компании появившейся значительно раньше понятия E2E.

В 1996-м компания Microsoft запустила сайт для бронирования отелей и авиабилетов Expedia.com. Основатель корпорации Билл Гейтс впоследствии сказал, что предвидел: интернет-пользователи захотят самостоятельно, безо всяких посредников планировать и подготавливать путешествия.

В то же самое время в Голландии выпускник факультета технического администрирования Университета Твенте Герт-Ян Бруинсма обзванивал гостиницы в европейских городах и просил их прислать ему по обычной почте рекламные буклеты с фотографиями номеров. Отсканированные изображения он выкладывал на сайт Bookings.nl. Через несколько лет ресурс стал недосягаемым лидером онлайн-рынка туризма.

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

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

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

Е2Е тестирование Койна

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

Сейчас в нём три важных сценария: вход в приложение , создание бюджета и запись траты или дохода. Логика покрыта юнит‑тестами , но этого мало. Хочется быть уверенным , что если сценарии где‑то сломаются , то я об этом узнаю сразу. Поэтому для Койна я пишу ещё и Е2Е тесты.

Инструменты

End‑to‑end ( Е2Е ) тесты — это интеграционные тесты , которые взаимодействуют с интерфейсом так , как это делал бы пользователь. Для них я попробовал несколько инструментов , но больше всего мне понравился Сайпрес.

После его установки и запуска в корне проекта появляется папка cypress/. Внутри неё: integration/ — там находятся сами тесты , и support/ — там вспомогательные функции ( об этом подробнее дальше).

Вход в приложение

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

Исхода у сценария два: успешный и неуспешный вход. Пишем тест на первый случай.

Нам надо зайти в приложение и попасть на страницу логина. На страницу мы зайдём с помощью команды visit, передав аргументом адрес:

Проверим , существует ли форма логина , и пустое ли поле ввода. Проверяем наличие нужных блоков и то , что поле пустое:

Выборка элементов в Сайпресе работает похоже на Джейквери. Например , здесь мы выбираем элементы по классам. Метод should проверит , что на странице только 1 элемент с классом login, а элемент с классом login‑code пустой.

Набор текста в настоящих полях ввода в Сайпресе делается через метод type. Но в Койне клавиатура ненативная и настоящих полей ввода там тоже нет. Вместо них — блоки , в которых отображается « набранная» последовательность. Чтобы набрать какой‑то код на нашей клавиатуре , надо « нажать» клавишу с нужной цифрой. Мы будем разбивать код на символы и нажимать на клавиши с указанными символами.

Метод contains ищет элемент , который содержит переданный в аргументе текст , в нашем случае — символ. Метод closest находит ближайшего родителя с указанным селектором , в нашем случае — классом button.

Когда код набран , можно нажать на красную кнопку , чтобы « отправить» код.

Код теста целиком будет выглядеть так:

После запуска Сайпрес запустит браузер , прогонит сценарий и покажет , прошёл тест или нет. Выглядит это так:

Рефакторинг и второй сценарий

Теперь перейдём к тесту с неправильным кодом. Он будет таким же , только код будет другой , и результат будет отличаться. Чтобы не дублировать код , мы можем вынести повторяющиеся действия в функции. Но у Сайпреса есть более изящное решение — команды.

Команды похожи на плагины. Вы описываете функцию‑команду , и она становится доступной глобально через cy. Команды хранятся в папке support/, их можно как угодно разделять по файлам. Главное — импортировать их в support/index.js, чтобы Сайпрес их увидел.

Адрес страницы‑приложения меняться не будет , поэтому вход в приложение вынесем в команду enterApp, а сам адрес запишем в fixtures/common.json:

Проверка формы тоже будет повторяться , поэтому вынесем её в команду appContainsEmptyLoginForm.

Я предпочитаю называть команды либо:

  • глаголом с действием , которое надо выполнить: enterApp;
  • предикатом для проверок: appContainsEmptyLoginForm.

Первые ничего не проверяют , а лишь выполняют какое‑то побочное действие. Вторые проверяют то , что описано в названии.

Ввод чисел на клавиатуре нам тоже понадобится в других тестах приложения. Поэтому его мы превратим в команду keyboardType.

Нажатие на « энтер» нам тоже пригодится в других местах:

В итоге код теста станет таким:

Теперь напишем тест на неправильный код:

Как мы видим , первые две строки повторяются , поэтому их можно вынести к сетап теста:

После запуска увидим такую картину:


Если какой‑то тест свалится , то в логах будет описано , что не совпало. Сайпрес офигительно описывает ошибку: показывает , какой узел её вызвал , что не совпало , и сохраняет снапшот состояния. То есть можно ткнуть мышью в этот баг , и справа отобразится состояние страницы в это время!

Сценарий создания бюджета

Второй сценарий — создание бюджета. Чтобы заполнить новый бюджет , нужно открыть его настройки , ввести сумму , срок и сохранить. Проверим каждый шаг.

Заведём бюджет из 10000 попугаев на 10 дней. Приложение запишет в бюджет только 95% от той суммы , которую вводим , чтобы план не оказался впритык. Значит , после сохранения бюджет будет содержать 9500 попугаев.

Дальше выбираем срок. Мы выберем 10 дней , поэтому нам надо выделить 10‑й пункт в крутилке с датами. Проверяем , что даты до выбранной включительно стали красными и что в бюджете появилась строка с суммой на день.

После сохранения проверяем , правильно ли посчиталась сумма на день. Проверять содержимое счётчиков нам понадобится и в других тестах , поэтому создадим команду:

И что сохранилась запись в истории о создании бюджета:

После запуска увидим такую картину:

Основной сценарий трат

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

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

И функцию , которая будет проверять , сохранилась ли трата:

Тогда тестирование трат в категориях будет выглядеть следующим образом:

Траты из заполненного бюджета

Теперь протестируем трату , когда бюджет задан. У меня описано много сценариев , но здесь я покажу два. В первом трата меньше дневного лимита , и сумма на день остаётся такой же , во втором — трата больше , и сумма на день уменьшается.

Функция testSpendWithActiveBudget берёт на себя алгоритм проверки. Она совершает трату , проверяет , что трата записалась , затем проверяет , должна ли была сумма на день пересчитаться. Если да , то проверяет новую сумму на день. Если нет , то проверяет остаток на сегодня — разницу между дневным лимитом и суммой трат за сегодня.

Меняем даты в браузере

Осталось протестировать , как себя ведёт бюджет и история , если приложение запускают через день или несколько дней.

Сперва проверим , что непотраченные деньги попадают в копилку:

Затем , что сумма на день осталась той же , если пользователь не вышел за вчерашний лимит

И что сумма уменьшится , если пользователь вышел за лимит:

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

Вначале я создаю базовую команду skipDays, которая будет принимать количество дней для пропуска и момент времени , от которого отсчитывать. Внутри команды работает cy.clock, который описывает изменение времени.

Первым агументом ему передаём таймштамп момента , в который надо перевести часы. Вторым — функции и объекты , которые будут изменены во время выполнения. Нам достаточно подменить только объект Date.

Между тестами сбрасывать настройки времени через restore необязательно , потому что Сайпрес делает это сам. Но если мы запускаем skipDays внутри одного теста несколько раз , то чтобы перетереть предыдущие настройки , надо вызвать restore.

Метод reload перезагружает страницу — будто пользователь заходит в приложение спустя указанное время.

Результат

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

E2e тестирование api

Как проверить api через phpunit У меня есть api http://test/testApi/apiScanTest Она должна принимать данные

Если данные коректные и данные пришли то должно принять данные и выдать ответ. Если данные не коректные то должно выдать ошибку. Как мне проверить данное api через phpunit ?

1 ответ 1

Для unit-тестирования Вам хватит собственно phpunit. Напишите тесты для всех предполагаемых вариантов набора данных для каждого класса, реализующего Ваш API, и выполните их.

Для «внешнего» тестирования посредством http-запросов используйте связку phpunit+Guzzle. Это уже не юнит-тесты, это функциональное тестирование. Примеров работы такой связки в нете превеликое множество. При поиске не обращайте внимание на то, что тестироваться могут API, написанные на Symfony или Laravel. В Вашем случае не важно, как и на чем написаны API, — при тестировани они все равно представляются в виде черного ящика. Есть запрос к API, есть его ответ. Ожидаемый ответ должен совпасть с реальным. Для начала предлагаю ознакомиться с этой статьей и этим простым примером теста.

What Is End to End Testing: E2E Testing Framework with Examples

What Is End to End Testing: E2E Testing Framework with Examples

End-to-end testing is a Software testing methodology to test an application flow from start to end. The purpose of End to end testing is to simulate the real user scenario and validate the system under test and its components for integration and data integrity.

Nobody wants to be known for their mistakes and their negligence, and same is the case with the Testers. When the Testers are assigned an application to test, from that moment, they take the responsibility and the application also acts as a platform to show their practical and technical testing knowledge.

So, to describe it technically, to ensure that testing is done completely, it is necessary to perform “End to End testing.

In this tutorial, we will learn what is End to End Testing, how it’s done, why it’s necessary, what are the matrices used, how to create an end to end specific test cases and some few other important aspects also. We will also learn about System testing and compare it with End to End test..

What You Will Learn:

What is End to End Testing?

End-to-end testing is a Software testing methodology to test an application flow from start to end. The purpose of this testing is to simulate the real user scenario and validate the system under test and its components for integration and data integrity.

It is performed from start to finish under real-world scenarios like communication of the application with hardware, network, database and other applications.

The main reason for carrying out this testing is to determine various dependencies of an application as well as ensuring that accurate information is communicated between various system components. It is usually performed after the completion of functional and system testing of any application.

Let us take an example of Gmail:


End to End Verification of a Gmail account will include the following steps:

  1. Launching a Gmail login page through URL.
  2. Logging into Gmail account by using val >End-To-End Testing Tools

Recommended Tools:

#1) TestCraft

We recommend using an end-to-end test automation tool like TestCraft.

TestCraft is a codeless Selenium test automation platform. Its revolutionary AI technology and unique visual modeling allow for faster test creation and execution while eliminating test maintenance overhead.

The testers create fully automated test scenarios without coding. Customers find bugs faster, release more frequently, integrate with the CI/CD approach and improve the overall quality of their digital products. This all is creating a complete end to end testing experience.

#2) Ranorex Studio

Ranorex Studio is a complete end-to-end test automation tool for desktop, web, and mobile applications. Create reliable tests fast without any coding at all, or using the full IDE. Use external CSV or Excel files or a SQL database as inputs to your tests. Run tests in parallel or on a Selenium Grid with built-in Selenium WebDriver. Ranorex Studio integrates with your CI/CD process to shorten your release cycles without sacrificing quality.

#3) Katalon Studio

Katalon Studio is an excellent end-to-end automation solution for web, API, mobile, and desktop testing with DevOps support.

With Katalon Studio, automated testing can be easily integrated into any CI/CD pipeline to release products faster while guaranteeing high quality. Katalon Studio customizes for users from beginners to experts. Robust functions such as Spying, Recording, Dual-editor interface and Custom Keywords make setting up, creating and maintaining tests possible for users.

Built on top of Selenium and Appium, Katalon Studio helps standardize your end-to-end tests standardized. It also complies with the most popular frameworks to work seamlessly with other tools in the automated testing ecosystem.

Katalon is endorsed by Gartner, IT professionals, and a large testing community.

How End-To-End Test Work?

To understand a bit more, let us find out How it works?

Take an example of Banking Industry. Few of us must have tried out Stocks. When a Demat account holder, purchases any share, a particular percentage of an amount is to be given to the broker. When the shareholder sells that share, whether he gets profit or loss, a particular percentage of the amount is then again given to the broker. All these transactions are reflected and managed in accounts. The whole process involves Risk Management.

When we look at the above example, keeping the End-to-End test in mind, we will find that the whole process includes multiple numbers as well as different levels of transactions. The whole process involves many systems that can be difficult to test.

E2E Testing Methods

#1) Horizontal Test:

This method is used very commonly. It occurs horizontally across the context of multiple applications. This method can easily occur in a single ERP (Enterprise Resource Planning) application. Take an example of a web-based application of an online ordering system. The whole process will include accounts, inventory status of the products as well as shipping details.

#2) Vertical Test:

In this method, all the transactions of any application are verified and evaluated right from the start to finish. Each individual layer of the application is tested starting from top to bottom. Take an example of a web-based application that Uses HTML codes for reaching web servers. In such cases, API is required to generate SQL codes against the database. All these complex computing scenarios will require proper validation and dedicated testing. Thus this method is much more difficult.

White Box testing as well as Black Box Testing both are associated with this testing. Or in other words, we can say, this is the combination of benefits of both white box testing and black-box testing. Depending on the type of software being developed, at different levels, both the testing techniques i.e. white box and black box testing are used as and when required. Basically, End to End test performs functional as well as the architectural approach for any software or programs to validate system functions.

The Testers like End to End verification because writing test cases from users perspective and in a real-world scenario, can avoid the two common mistakes .i.e. missing a bug and writing test cases that do not verify real-world scenarios. This provides testers, an immense sense of accomplishment.

Below enlisted are few guidelines that should be kept in mind while designing the test cases for performing this type of testing:

  • Test cases should be designed from the end user’s perspective.
  • Should focus on testing some existing features of the system.
  • Multiple scenarios should be considered for creating multiple test cases.
  • Different sets of test cases should be created to focus on multiple scenarios of the system.

As we execute any test cases, similar is the case with this testing. If the test cases are ‘Pass’ i.e. we get the expected output, it is said that the system has successfully passed End to End test. Likewise, if the system does not produce the desired output, then a retest of a test case is required keeping in mind the areas of failure.

Why Do We Perform E2E Testing?

In the present scenario, as also shown in the diagram above, a modern software system comprises of its interconnection with multiple sub-systems. This has made modern software systems as a very complicated one.

These sub-systems we are talking about can be within the same organization or in many cases can be of different organizations also. Also, these sub-systems can be somewhat similar or different from the current system. As a result, if there is any failure or fault in any sub-system, it can adversely affect the whole Software system leading to its collapse.

These major risks can be avoided and can be controlled by this type of testing:

  • Keep a check and perform system flow verification.
  • Increase the test coverage areas of all the subsystems involved with the software system.
  • Detects issues, if any with the subsystems and thus increase the productivity of the whole software system.

Below mentioned are the few activities that are included in the end to end process:

  • A thorough study of requirements to perform this testing.
  • Proper set up of test environments.
  • A thorough study of Hardware and Software requirements.
  • Descriptions of all subsystems as well as main software system involved.
  • Enlist the roles and responsibilities for all the systems and subsystems involved.
  • Testing methods used under this testing as well as standards that are followed, its description.
  • Test cases designing as well as tracing requirement matrix.
  • Record or save the input and output data for each system.

E2E Testing Design Framework

We will look into all the 3 categories one by one:

#1) User Functions: Following actions should be performed as a part of building User Functions:

  • Listing features of the software systems and their interconnected sub-systems.
  • For any function, keep track of the actions performed as well as Input and Output data.
  • Find the relations, if any between different Users functions.
  • Find out the nature of different user functions .i.e. if they are independent or are reusable.

#2) Conditions: Following activities should be performed as a part of building conditions based on user functions:

  • For each and every user functions, a set of conditions should be prepared.
  • Timing, Data conditions and other factors that affect user functions can be considered as parameters.


#3) Test Cases: Following factors should be considered for building test cases:

  • For every scenario, one or more test cases should be created to test each and every functionality of the user functions.
  • Every single condition should be enlisted as a separate test case.

Metrics Involved

Moving to the next important activities or metrics involved in this testing:

  1. Status of Test case preparation: This can be tracked in the form of a graph to represent the progress of the planned test cases that are under preparation.
  2. Weekly tracking of Test progress: This includes week wise representation of the test cases execution progress. It can be reflected through percentage representation for a pass, fail, executed, not executed, invalid, etc cases.
  3. Status and detailed report for Defects: The Status report should be prepared on a daily basis to show the test case execution status as well as defects found and logged as per their severity. Weekly, the percentage of the open and closed defects should be calculated. Also, based on defect severity and priority, defects status should be tracked on a weekly basis.
  4. Test environment: This keeps a track of the test environment time duration allotted as well as the test environment time actually used while performing this testing.

We have almost seen all aspects of this testing. Now let us differentiate System Testing and End to End testing. But before that let me give you a basic idea of “System testing” so that we can easily differentiate between the two forms of software testing.

System testing is the form of testing which includes a series of different tests whose purpose is to perform the complete testing of the integrated system. System testing is basically a form of black-box testing where the focus is on the external working of the software systems from the user’s point of view keeping real-world conditions as consideration.

System testing involves:

  • Testing a fully integrated application including the main system.
  • Determine the components interact with one another and within the system.
  • Verify the desired output on the basis of the input provided.
  • Analyzing the user’s experience while using various aspects of the application.

Above we have seen the basic description of System testing to understand it. Now, we will look out the differences between “System Testing” and “End to End testing”.

S.No. End to End Testing System Testing
1 Validates both the main Software system as well as all the interconnected Sub-Systems. As per the specifications provided in Requirement document, it just validates the software system.
2 The main emphasis is on verifying the end to end testing process flow. The main emphasis is on verifying and checking features and functionalities of the software system.
3 While performing testing, all the interfaces including the backend processes of the software system is taken under consideration. While performing testing, only the functional and the non- functional areas and their features are considered for testing.
4 End to End testing is executed /performed after the completion of System testing of any software system. System testing is basically performed after the completion of integration testing of software system.
5 Manual testing is mostly preferred for performing end to End testing as these form of testing involves testing of external interfaces also which can be very difficult to automate at times. And will make the whole process very complex. Both manual and automation testing can be performed as a part of System testing.

Conclusion

Hope you learned various aspects of End to End tests like its processes, metrics, and the difference between System testing and End to End testing.

For any commercial release of the software, End to End verification plays an important role as it tests the entire application in an environment that exactly imitates real-world users like network communication, database interaction, etc.

Mostly, the end to End test is performed manually as the cost of automating such test cases is too high to be afforded by every organization. This is not only beneficial for system validation but can be also considered useful for testing external integration.

Let us know if you have questions about the end-to-end test.

Блог Makeomatic: разработка сайтов и мобильных приложений

Эффективное сквозное тестирование с Protractor

С AngularJS действительно удобно работать, поскольку тестам изначально придаётся большое значение — каждое изменение, внесённое в исходники, тестируется перед сохранением в ядро.

Тестирование крайне важно, особенно в Javascript — языке с динамической проверкой типов. Тесты позволяют отловить ошибки до того, как они попадут в продакшн. Уже не говоря о том, что они повышают качество кода.

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

Тестирование — неотъемлемая часть работы, если мы хотим понимать, что происходит в приложении.

В данной статье мы рассмотрим сквозное (e2e) тестирование приложений. Сквозное тестирование — это поведенческое тестирование по методу «чёрного ящика» (проверка выполнения приложением заданных функциональных требований, при которой не используются знания о внутренней структуре тестируемого объекта). То есть мы тестируем, что система работает, как планировалось, с точки зрения конечного пользователя.

Пользователю всё равно, работает ли приложение «как планировалось», ему важно, чтобы функционал работал в соответствии с его собственными ожиданиями. Тестирование по сути это автоматизированный запуск приложения в браузере и последовательные действия, проверяющие весь функционал пользовательского интерфейса. Совершать все эти действия вручную было бы крайне неэффективно, поэтому создадим автоматические тесты.

Автоматизация с помощью Protractor

Protractor – рекомендуемый фреймворк для сквозного тестирования. В отличие от стандартного исполнителя сценариев Angular, Protractor сделан на основе Selenium WebDriver — инструмента для автоматизированного тестирования веб-приложений, с API и набором расширений, позволяющих управлять поведением браузера. Расширения WebDriver есть для всех типов браузеров, включая наиболее популярные. Таким образом, мы получаем быстрое и стабильное тестирование в реальной браузерной среде.

К счастью, Protractor работает в связке с Jasmine, так что тем, кто знаком с этим фреймворком, не придётся изучать новый. Но можно установить его и как самостоятельный исполнитель тестов или использовать как библиотеку.

Установка

В отличие от стандартного исполнителя сценариев, для работы Protractor нужно запустить отдельный сервер по адресу http://location:4444 (можно перенастроить). К счастью, в дистрибутиве Protractor имеется утилита, упрощающая процесс установки Selenium Server. Чтобы воспользоваться скриптом, необходимо установить Protractor локально в корневой каталог тестируемого Angular приложения.

$ npm install protractor

Далее запускаем скрипт-загрузчик Selenium (расположен в локальном каталоге node_modules/ ) командой:

Этот скрипт загружает файлы, необходимые для запуска Selenium, и создаёт соответствующий каталог. Когда всё загружено, запускаем Selenium с драйвером Chrome командой старт:

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

Теперь можем работать с Protractor, подключившись к серверу Selenium, который работает в фоновом режиме.

Настройка

Наподобие таск-раннера Karma, для запуска и работы с Selenium нужен конфигурационный файл. Наиболее простой способ создания конфигурационного файла Protractor — скопировать базовую конфигурацию из каталога установки.

$ cp ./node_modules/protractor/example/chromeOnlyConf.js protractor_conf.js

Для старта Protractor в файле необходимо сделать несколько изменений. Во-первых, по умолчанию конфигурационный файл использует драйвер Chrome, которого нет в текущей директории. Поэтому мы должны указать путь к драйверу в локальной папке ./node_modules .

Далее нужно изменить путь массива specs, указав на наши локальные тесты.

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

Есть два варианта запуска тестов. Первый, автономный режим — использовать Protractor для запуска Selenium, когда запускаем наши тесты. Пример файла конфигурации в данной статье использует этот метод.

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

В этом случае нужно удалить указанные выше настройки (chromeOnly и chromeDriver), и добавить параметр seleniumAddress, указывающий путь к запущенному серверу Selenium:


Написание тестов

При написании тестов в Protractor используется фреймворк Jasmine. То есть мы пишем тесты точно так же, как для Karma. Пример простого теста в Protractor:

В примере приведён не полный код, но структура узнаваема — синтаксис Jasmine. Для создания структуры тестов используем функции beforeEach() , afterEach() и вложенные блоки describe() . Для выполнения тестов используем синтаксис Jasmine – expect() .
При написании тестов в Protractor нам понабодятся некоторые его глобальные переменные. Ниже приведены некоторые из них.
browser – оболочка вебдрайвера, используется для навигации и получения информации о странице.

Browser

Можем использовать переменную browser для перехода на страницу с помощью функции get() :

Для использования этого теста в отладчике node, запускаем его в режиме отладки:

$ protractor debug conf.js

Запуская Protractor в режиме отладки, мы получаем бонус — выполнение в браузере останавливается, и теперь все клиентские скрипты Protractor доступны нам из консоли. Чтобы получить к ним доступ, нужно вызвать объект Protractor – window.clientSideScripts.

Начнём тестировать!

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

Наше приложение

Давайте для примера возьмём приложение, реализующее свой вариант просмотра Github issues. Простое приложение, у которого всего несколько функций:

  • Оно позволяет указывать владельца репозитория и URL через окно ввода;
  • В нём имеется главная страница и страница About;
  • issues упорядочены друг под другом;
  • используется Gravatar пользователя.

Наше конечное приложение выглядит вот так (картинка 1 a, b — из статьи):

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

Стратегия тестирования

По опыту, наилучший баланс между написанием тестов и написанием кода достигается тогда, когда вы чётко понимаете, что тестировать и как именно тестировать. Когда мы пишем тест, важно, чтобы он проверял именно то поведение, которое задумано. То есть, мы не должны писать тест, чтобы проверить, меняется ли содержание тэга h1 , потому что мы вводим текст в поле . А вот проверить фильтрацию нашей фичи «поиск в режиме реального времени» (Live Search) нужно.

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

Наконец, нужно структурировать тесты так, чтобы каждый блок проверял какую-то свою, очень маленькую задачу. В идеале тест должен проверять не более 1 ожидаемого события.

Ну, хватит теории, применим стратегию на практике.

Во-первых, нужно проверить, что наше приложение добавляет название репозитория, с которым мы будем работать. Используя функционал Angular, приложение делает http запрос к github.com . Этот запрос возвращается, и мы заполняем оставшиеся поля главной страницы.

Во-вторых, необходимо протестировать изменение навигации и содержания страницы. Этот тест предполагает нажатие навигационной кнопки для изменения местоположения $location .

Создаём первые тесты

Наш файл конфигурации Protractor довольно прост и почти не отличается от базового конфига, который поставляется при установке:

Будем писать тесты в папке test/e2e , как и указали в конфигурационном файле в виде [name].spec.js . Создадим наш первый тест под названием main.spec.js .

Набросаем простую «рыбу»:

Тк мы пишем тесты на фреймворке Jasmine, воспользуемся блоком beforeEach() . Также необходимо отслеживать экземпляр Protractor, создадим для этого переменную ptor . Для каждого теста будем использовать объект browser для перехода на главную страницу.

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

Вместо того, чтобы указывать полный URL каждый раз, когда хотим протестировать страницу, можем добавить параметр baseUrl в конфигурационный файл Protractor. Далее будем считать, что этот параметр в конфиге у нас выглядит так:

Первый тест убедится, что главная страница загружается: проверим наличие элемента на странице. Поскольку на главной странице есть идентификатор #home, создадим ожидание, проверяющее наше условие.

Получив нужный элемент, с помощью Protractor метода isElementPresent() : зададим ожидание, проверяющее присутствие элемента на странице:

Для тестирования необходимо запустить сервер Selenium. К счастью, webdriver-manager облегчает нам жизнь (эта утилита автоматически включена в Protractor). Итак, запускаем webdriver-manager :

Запускаем Protractor в новом терминале. Двоичный файл Protractor принимает один аргумент — конфигурационный файл:

Тестируем поле ввода

Приступим к тестированию . Главная страница загружает одну форму с одним полем ввода, которое отображается, если пользователь сам не выбрал репозиторий для поиска issues. input type=»text» привязан к модели repoName . После заполнения, форма исчезает и появляется нужный список issues.

HTML выглядит так:

Нам важно протестировать, что заполненная форма исчезает, и на её месте появляется нужный список issues. Поэтому в следующем тесте выбираем элемент и заполняем его, для этого применим к нему метод sendKeys() . Для выделения самого элемента input воспользуемся методом by.input() , который найдёт элементы , содержащие привязку к ng-model :

При прогоне этого теста увидим, что поле заполняется. Никаких ожиданий нет, тк мы их ещё не написали, но видим, что в поле ввода появляется angular/angular.js .

Чтобы поле ввода исчезло, нужно отправить заполненную форму. Наиболее просто это сделать, сымитировав нажатие клавиши enter. Поэтому в методе sendKeys() добавили сочетание \n , которое имитирует нажатие enter в элементе .

Теперь осталось написать ожидание, что элемент repoForm более не существует на странице (тк мы прячем его с помощью ng-if ).

Используем для этого упомянутый ранее метод:

В части 2 мы протестируем список и навигацию. Держите руку на пульсе!

Знакомство с комплексным тестированием в Angular с помощью Protractor

Дата публикации: 2020-10-25

От автора: Protractor – популярный фреймворк комплексного тестирования. С помощью Protractor Angular приложение можно тестировать в реальном браузере, имитируя взаимодействия, как с реальным пользователем. Комплексное тестирование проверяет, чтобы приложение вело себя ровно так, как ожидает пользователь. Помимо этого, тесты напрямую не относятся к коду.


Protractor запускается поверх популярного Selenium WebDriver (API для автоматизации браузера и тестирования). Помимо функций Selenium WebDriver Protractor предлагает локаторы и методы для захвата UI компонентов приложения Angular. В этом уроке вы узнаете о:

Установке, настройке и запуске Protractor

Написании базовых тестов для Protractor

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Объектах страниц и о том, как их использовать

Руководствах для написания тестов

Написании E2E тестов для приложения с нуля и до самого конца

Звучит круто? Но сначала о главном.

Нужно ли мне использовать Protractor?

Если вы работали с Angular CLI, то вы должны знать, что по умолчанию с ним идет 2 фреймворка для тестирования. И это:

Юнит тесты на Jasmine и Karma

Комплексные тесты на Protractor

Основное различие – первый используется для тестирования логики компонентов и сервисов, а второй используется для проверки функциональности высокого уровня приложения (в том числе и UI элементы).

Если вы ни разу не тестировали в Angular, рекомендую почитать серию статей «тестирование компонентов в Angular на Jasmine», чтобы лучше понять принцип.

В первом случае можно использовать мощь тестовых утилит Angular и Jasmine для написания не просто юнит тестов для компонентов и сервисов, а также для написания базовых UI тестов. Однако если необходимо протестировать front end функционал приложения полностью, Protractor вам в руки. Protractor API совмещен с шаблонами проектирования, такими как объекты страниц, что упрощает написание тестов и делает их более читаемыми. Пример.

Настройка Protractor

Если для генерации проекта вы используете Angular CLI, настройка Protractor не вызовет затруднений. Команду ng new создает следующую структуру папок.

Стандартный шаблон проекта, созданный Protractor, зависит от двух файлов для запуска тестов: специальные файлы из папки e2e и файл конфигураций (protractor.conf.js). Давайте посмотрим, как настраивается файл protractor.conf.js:

Если вы умеете запускать тесты в Chrome, то можете оставить все, как есть и пропустить оставшуюся часть раздела.

Настройка Protractor с Selenium Standalone Server

Запись directConnect: true подключает Protractor напрямую к драйверам браузера. Однако на момент написания этого урока Chrome – единственный поддерживаемый браузер. Если нужна поддержка нескольких браузеров или другой браузер, вам понадобится установить Selenium standalone server. Что для этого нужно сделать.

Установите Protractor глобально с помощью npm:

Это установит инструмент командной строки для вебдрайвер менеджера вместе с Protractor. Теперь обновите вебдрайвер менеджер на использование последних дистрибутивов и запустите Selenium standalone server.

Установите directConnect: false и добавьте свойство seleniumAddress:

Конфиг файл на GitHub дает больше информации о вариантах настройки в Protractor. Я в уроке буду использовать стандартные опции.

Запуск тестов

Если вы работаете в Angular CLI, то для запуска тестов вам нужна команда ng e2e. Если кажется, что тесты медленные, это потому что Angular должен компилировать код при каждом запуске e2e. Если хотите немного ускорить их, вам нужно сделать следующее. Запустите ng serve. Откройте новую вкладку в консоли и запустите:

Теперь тесты должны грузиться быстрее.

Наша цель

Мы будем писать E2E тесты для стандартного приложения Pastebin. Клонируйте объект из репозитория GitHub. Обе версии (стартовая без тестов и финальная с тестами) доступны в отдельных ветках. Клонируйте ветку starter. Можете пробежаться по коду, чтобы вручную ознакомиться с приложением.

Давайте кратко опишем наше приложение Pastebin. Приложение сначала будет загружать список вставок (полученных с ложного сервера) в таблицу. У каждой строки в таблице будет кнопка View Paste, по клику на которую будет открываться модальное окно первичной загрузки. Модальное окно отображает данные вставки с опциями редактирования и удаления. В конце таблицы есть кнопка Create Paste, с помощью которой можно добавить новые вставки.

Оставшаяся часть урока посвящена написанию Protractor тестов в Angular.

Основы Protractor

В файле спецификации, который оканчивается на .e2e-spec.ts, будут храниться реальные тесты приложения. Все тестовые спецификации будут помещаться в папку e2e, так как мы настроили, чтобы Protractor искал спецификации именно в этом месте. При написании тестов на Protractor необходимо учесть 2 вещи:

Синтаксис Jasmine

Создайте новый файл test.e2e-spec.ts с кодом.

Здесь описывается, как наши тесты будут организованы в файле спецификации с помощью синтаксиса Jasmine. describe(), beforeEach() и it() – глобальные функции Jasmine.

У Jasmine хороший синтаксис для написания тестов, и он отлично работает с Protractor. Если вы не знакомы с Jasmine, рекомендую сначала зайти на страницу Jasmine на GitHub.

Блок describe разбивает тесты на логические сьюты. В каждом блоке describe (или тест сьюте) может быть несколько блоков it (тестовых спецификаций). Сами тесты пишутся в тестовых спецификациях.

Вы спросите: «зачем мне делать такую структуру в тестах?». Тест сьют логически описывает отдельную функцию приложения. Например, все тестовые спецификации по компоненту Pastebin должны, в идеале, быть покрыты в блоке describe с заголовком Pastebin Page. Однако это может привести к избыточности тестов, но сделает их более читаемыми и обслуживаемыми.

В блоке describe может быть метод beforeEach(), который запускается один раз перед каждой спецификацией в этом блоке. То есть если вам перед каждым тестом необходимо редиректить браузер на заданный URL, разместите редирект внутри beforeEach().

Выражения expect, принимающие значение, сцеплены с функциями поиска. Реальное и ожидаемое значение сравниваются, и возвращается булево значение, показывающее, провалился тест или нет.

E2E-тестирование фронтенда c Hermione

Add to favorites


  • Description
  • Discussion

About speaker

About talk

Все мы знаем, что тесты — это хорошо. Чем выгодны e2e-тесты если на проекте пока вообще нет авто-тестов? Как быстро начать писать тесты на своем проекте и улучшать стабильность системы? Куда встроить тесты в CI процесс? Я отвечу на все эти вопросы в своем докладе, а также мы с вами рассмотрим как тестировать события и различные элементы интерфейсов в браузере

Stepan Suvorov Blog

Release 2.0

Тестируем AngularJS используя Protractor

Protractore2e тест-фреймворк сделанный на основе WebDriverJS, который приходит на смену первоначальным e2e тестам AngularJS. Запускает тесты в реальном браузере. Может быть запущен как самостоятельный бинарник либо включен в тесты как библиотека.

Установка

Для установки достаточно установить npm-пакет:

проверим все ли прошло успешно:

чтобы установить и запустить Selenium, который будет выполнять тесты для нас делаем:

Запуск

Для запуска протрактора делаем:

где protractor.js – предварительно созданный нами файл конфигурации.

Для старта можно использовать конфиг из примера:

Единственно что вам нужно изменить это опцию specs(по умолчанию [‘example_spec.js’]). В ней мы укажем путь к файлу(либо группе файлов) тест-сценария. Давайте создадим его также по примеру:

Из описания видно что наш тест:

  • зайдет на страницу http://www.angularjs.org
  • выберет елемент связанный с моделью yourName и установит значение ‘Julie’
  • выберет элемент по связке(bind) с моделью yourName
  • проверит что текст приветствия равен ‘Hello Julie!’

Настройка

Все возможный варианты параметров конфигурации описаны в этом примере.

Опция Описание Значение по умолчанию
seleniumAddress адрес запущенного селениум сервера (обычно http://localhost:4444/wd/hub) null
allScriptsTimeout таймаут для выполнения всех сценариев 11000
specs пути к файлам сценариев тестов (относительно конфига) [‘spec/*_spec.js’]
exclude исключения для предыдущего пункта []
capabilities выбор браузера с параметрами. Более подробно тут
multiCapabilities предыдущая опция для запуска тестов в нескольких браузерах []
baseUrl стартовая страница приложения http://localhost:8000
rootElement элемент на котором иницилизированно приложение (ng-app) body
onPrepare колбэк который будет выполнен, когда протрактор готов к работе, но тесты еще не начали выполняться function() <>
params параметры, которые будут внедрены в среду выполнения тестов (но не сами тесты) >,
framework фреймворк для тестов. возможные варианты: jasmine, cucumber, mocha jasmine
onCleanUp колбэк, когда тесты завершены function()<>

Написание тестов

По умолчанию используется Jasmine фреймворк, но при желании его можно поменять на mocha(инструкции тут ).

Глобальные переменные, которые добавляет протрактор:

  • protractor – нэймспэйс-оболочка протрактора, которая содержит статические вспомогательные переменный и классы
  • browser – оболочка вебдрайвера, используется для навигации и получение информации о странице
  • element – вспомогательная функция для нахождения и взаимодействия с элементами
  • by – коллекция стратегий поиска элементов (ccs selector, id, binding attribute)
  • browser.get(targetUrl) – переход на указанный URL
  • element(by.css(‘.error’)) – выбор элемента по css
  • element(by.model(‘modelName’)) – выбор элемента по модели
  • element(by.binding(‘variableName’)) – выбор элемента по баиндингу (ng-bind или <>)
  • element.all(by.repeater(‘item in items’)); – выбор списка элементов из ngRepeat
  • element(by.model(‘modelName’)).getText() – получение текстового значения
  • element(by.model(‘modelName’)).getAttribute(‘id’) – получение значение аттрибута
  • element(by.model(‘modelName’)).sendKeys(‘Some text’) – задание значения
  • element.all(by.repeater(‘item in items’)).count() – получение количества элементов в списке
  • element.all(by.repeater(‘item in items’)).get(1) – получение одного элемента из списка
  • element.all(by.repeater(‘item in items’)).first() – получение первого элемента из списка
  • element.all(by.repeater(‘item in items’)).last() – получение последнего элемента из списка
  • element.all(by.repeater(‘item in items’)).row(1).column(‘title’) – получение значение title из 2й строки
  • browser.isElementPresent(by.model(‘modelName’)) – проверка наличия элемента
  • $(‘.info’) – короткий алиас к element(by.css(‘.info’)) !Внимание: не путать с jQuery.
  • $$(‘option’) – короткий алиас к element.all(by.css(‘option’))

Тестирование асинхронных операций

Учитавая что ваше приложение скорее всего подгружает большое количество контента асинхронно, то повозится со спецификой прийдется прилично.

Воздержусь от подробного разбора данного пункта, так как в зависимости от выбранной библиотеки подходы в написании тестов могут отличатся. Единственное что скажу: сразу для себя настроил mocha-фреймворк, с ним намного удобнее работать с асинхронными операциями.

Создание снимков экрана

Вебдрайвер позволяет делать скриншоты с помощью метода browser.takeScreenshot(), который возвращает промис, который в свою очередь вернет PNG снимок экрана в формате base64:

Для записи файла на диск можно написат свою вспомогательную функцию:

и потом ее вызвать:

!Внимание: в некоторых случаях необходимо дождаться полной загрузки страницы (или отдельного компонента) чтобы не получить частичный снимой недогруженного контента.

Отладка(debugging) сценариев Protractor

Функциональные(end to end) тесты крайне сложно дебажить, потому что они зависят от системы в целом, также могут зависеть от предыдущих действий (например логин), и могут изменять состояние приложения, которое тестируют. В частности отладку тестов на вебдрайвере(webdriver) усложняют длинные соообщения об ошибках и разделение процессов: на тот, который выполняется в браузере, и тот, который выполняет сам тест сценарий.

Возможные причины остановки:

  • вебдрайвер выдает ошибку, когда команда не может быть завершена, например: элемент не найден
  • protractor останавливается, когда не может найти AngularJs. Если необходимо проверять так же страницы без AngularJs, тогда используйте вебдрайвер напрямую через browser.driver

Чтобы поставить точку остановки (debug point) необходимо в коде теста вызвать следующий метод:


и запустить protractor в режиме отладки(с флагом debug):

И после чего вы сможете насладиться радостью дебага из консоли

Используется node-debugger, только точка остановки задается методом browser.debugger(); вмето debugger;

Интерактивный запуск

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

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

(в зависимости от ОС и типа установки путь к директории программы может отличаться. В моем случае это было /usr/local/lib/node_modules/protractor/)

Теперь можно выполнить что-то типа такого:

Дополнительно

Что можно еще интересного почитать в тему:

Приятных вам тестов с Protractor!

New Vue.js Course Announced!

Looking to build fully-tested, production-ready Vue applications that are suitable for commercial purposes?

Join the pre-sale of our upcoming Enterprise Vue course!

Tools

E2E tests are made on top of a browser automation driver like Selenium that provides an API to drive the browser.

An E2E testing framework like Cypress or Nightwatch will then provide a way for you to script your E2E tests for the browser automation driver.

The following code is what you might use in Nightwatch to perform the test described in the section above. You can probably tell what it does even if you’ve never used Nightwatch.

Unit and E2E comparison

  • Tests run fast
  • Test are precise and allow you to identify exact problems
  • Time-consuming to write tests for every aspect of your app
  • Despite unit tests passing, the whole application may still not work
  • Can implicitly test many things at once
  • E2E tests assure you that you have a working system
  • Slow to run — will often take 5 or 10 mins to run for one site
  • Brittle — an inconsequential change, like changing a class, can bring down your entire E2E suite
  • Tests can’t pinpoint the cause of failure

Verdict

In my opinion, a combination of both unit and E2E tests is the best approach. The cons of one type can be mostly nullified by the pros of the other.

For example, E2E test won’t tell you the root cause of failure, but unit tests will, while unit tests won’t tell you if the whole application is working or not, while E2E tests will.

Using these test types together will give you a lot of confidence in your application, allowing you to add features or refactor without fear of collapse.

The general strategy for combining unit and E2E tests for a Vue.js app is this:

  • Write unit tests for all your components, including error states. Run these before you make git commits.
  • Write E2E tests for the key use cases of your site e.g. registeration, add to cart, etc. Run these before merging to master.

If you want more details on the right mix of tests, there a plenty of good blog posts like the classic Write tests. Not too many. Mostly integration. by Kent C. Dodds.

Bonus: testing tools

So you’re ready to start testing, what tool can you use?

For frontend unit testing, the best tool right now is Jest. It has many useful features, for example, allowing you to compile TypeScript and modern JS before the tests run.

You can use Jest in conjunction with Vue Test Utils which allows you to mount and query Vue components.

For E2E, the state-of-the-art tool right now is Cypress. Another more basic tool that also works well is Nightwatch.

The good news is that it’s easy to add all of these tools to a Vue application with Vue CLI 3.

Finally, it’s a good idea to use a continuous integration tool like Travis or Circle CI that will run your tests in the cloud (especially good for time-consuming E2E tests) and deploy your code conditional on all your tests passing.

About Anthony Gore

I’m Anthony Gore and I’m here to teach you Vue.js! Through my books, online courses, and social media, my aim is to turn you into a Vue.js expert.

I’m a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter, and the creator of Vue.js Developers.

If you enjoyed this article, show your support by buying me a coffee, and if you’d like to support me ongoingly, you can make a pledge through Patreon.

Never miss a new post!

Get our latest post in your inbox every Tuesday by subscribing to the Vue.js Developers Newsletter .

With more than 7000 subscribers, the newsletter will deepen your knowledge of Vue with weekly must-read articles.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих