Теперь у нас есть быстрое понимание сквозных тестов
и роли
сквозных тестов в общей стратегии тестирования угловых приложений.
Также, краткое введение в транспортир.
Давайте приступим к следующему упражнению, где мы могли бы использовать
транспортир и разработать наши сквозные тесты.
К счастью, угловой CLI автоматически
настраивает все, что нам нужно для проведения сквозных тестов,
, как мы увидим, когда мы приступаем к упражнению.
Таким образом, речь идет о реализации различных тестов и
затем проведение теста с использованием транспортира в этом упражнении.
Перейдя в наше угловое приложение в Visual Studio,
если вы посмотрите на пакет нашего JSON-файла,
вы увидите, что мы уже находим
угловой CLI установил все, что нам нужно для проведения сквозных тестов.
Итак, прокручивая вниз,
вы увидите, что транспортир уже установлен на
наш компьютер в рамках углового проекта.
Также мы замечаем, что здесь есть отдельная папка
под названием e2e, которая содержит несколько файлов
, которые уже настроены для проведения сквозного теста.
Теперь, если вам нужно провести обширные сквозные тесты,
, то это хорошая идея, чтобы создать
отдельный файл для каждого набора сквозных тестов, которые вы хотите выполнить.
Теперь, в этом конкретном упражнении,
я просто иллюстрирую вам, как проводить сквозные тесты.
Итак, я собираюсь придерживаться того, что уже было установлено угловым CLI.
Мы будем работать с файлами, которые у нас есть прямо там.
Итак, давайте быстро посмотрим на эти два файла здесь, app.e2e-spec.ts,
, и вы увидите, что некоторый код уже был выложен в этот файл по угловой.
Кроме того, этот другой файл под названием app.po.ts,
это не что иное, как стандартный класс JavaScript
, который был настроен с помощью нескольких методов здесь.
Теперь, что мы собираемся сделать, это добавить еще несколько методов для
этого класса JavaScript, а также обновить некоторые из этих методов, которые приведены здесь.
Мы установим наши тесты в файле app.e2e-spec.ts.
Итак, чтобы продолжить,
пойдем в приложение.
Po.ts файл, а затем в этом файле, давайте обновим это.
Итак, здесь вы видите, что у нас есть два метода, которые уже были созданы здесь.
Я собираюсь обновить эти методы, чтобы позволить им взять параметр здесь.
Итак, я скажу, navigateTo со ссылкой,
которая предоставляется в виде строки,
, а затем я собираюсь обновить этот браузер получить, чтобы
использовать ссылку, которая является параметром для этого метода.
Итак, что это делает?
Итак, как вы можете видеть,
мы используем синтаксис транспортира здесь.
Итак, это говорит, что возврат браузера получает ссылку.
Таким образом, этот конкретный вызов этого метода get браузера позволит
нашему приложению перейти к этой конкретной ссылке, которая поставляется в качестве параметра здесь.
Итак, перед этим обновлением
вы видели, что ссылка здесь была косой чертой,
, что означает, что корень нашего углового приложения.
Теперь я обновил это, чтобы взять параметр здесь.
Аналогично, второй метод, который вы видите, называется getParagraphText.
Теперь этот метод используется для получения внутреннего содержимого HTML элемента здесь.
Итак, для этого, также,
я настрою параметр selector,
, который является селектором CSS, который я поставлю здесь.
Итак, вы видите, что здесь,
я собираюсь изменить это, чтобы взять селектор в качестве параметра.
Теперь, из предыдущего опыта с модульным тестом,
вы видите, что и.css значит.
Это то же самое, что мы используем и здесь.
Этот метод, используемый здесь, теперь импортируется из библиотеки транспортира здесь.
Метод элемента также импортируется из библиотеки транспортира.
Таким образом, этот метод элемента позволяет получить доступ к HTML-элементу
, предоставив эту отметку для элемента HTML в качестве параметра здесь.
Итак, вы можете сказать по css, byID,
и многим другим таким методам, доступным для класса здесь.
Затем метод getText
получает, как мы видим видимый внутренний текст этого конкретного элемента.
Таким образом, это один из способов получения информации из
конкретного элемента HTML в нашем окне браузера
, а затем проверить, соответствует ли он шаблону, который мы указываем здесь.
Итак, с этим обновлением app.po.ts,
давайте перейдем к файлу app.e2e-spec.ts.
Итак, в этом файле
вы заметите, что мы используем синтаксис Jasmine.
Итак, здесь, вы видите, что я использую описание, а затем, который говорит, пусть страница AppPage.
Итак, вот страница, где мы создаем этот новый класс под названием AppPage,
, который мы объявили в файле app.po.ts как класс JavaScript здесь.
Теперь это просто удобный способ настроить все вещи в одном месте,
, а затем использовать их в моем тестовом коде.
Итак, здесь я объявляю страницу, чтобы ссылаться на этот AppPage,
, и это позволит мне получить доступ
к методам, которые я создал в этом классе здесь.
Итак, первый тест, который я собираюсь сделать, это перейти к
корню моего углового приложения
, а затем проверить, есть ли в этом конкретный шаблон.
Вы заметите, что на моей домашней странице
у вас будет строка
называется Ristorante Con Fusion
внутри элемента H1 на моей странице.
Итак, что я собираюсь сделать, это перейти к корню моего HTML-элемента.
Затем, там, я буду искать
маршрут приложения, а затем искать тег H1 внутри маршрута приложения.
Тогда это должно быть равно этой конкретной строке здесь.
Итак, я просто собираюсь скопировать
строку Ristorante Con Fusion там, а затем поставить это в качестве параметра здесь.
Итак, я просто обновляю тест, чтобы проверить
именно то, что у нас есть в нашем обновленном угловом приложении.
Итак, с этой настройкой
теперь я собираюсь провести свой первый тест моего углового приложения.
Итак, давайте сохраним все изменения, а затем вернемся в наш терминал.
В терминале, в папке моего проекта,
в подсказке я напечатаю ng e2e.
Вы заметите, что это запустит браузер.
В моем случае он запустит окно Chrome, а затем проведет тест в этом окне.
Итак, давайте проведем первый тест.
Вы увидите, что когда тест проходит после компиляции моего углового приложения,
когда тест проходит,
то он будет гарантировать, что тест будет успешным.
Вы видите, что в задней части
мой браузер открывается ng e2e,
, а затем тест был проведен в этом окне браузера.
В нем говорится, что тест был успешно проведен здесь.
Итак, вы замечаете, что даже в этом случае
нужно запустить браузер,
загрузить в мое угловое приложение в браузер,
все угловое приложение в браузер.
Затем проведите тест от моего углового приложения.
На этом этапе убедитесь, что ваш сервер,
сервер JSON запущен и работает,
в противном случае ваш тест завершится неудачей,
потому что, когда тест был проведен,
он попытается получить доступ к серверу JSON.
Итак, это то, что вам нужно обеспечить.
Продолжаем с нашими тестами.
На втором шаге
мы собираемся добавить еще пару методов в этот AppPage.
Класс здесь. Итак, я бы использовал новый метод
, называемый getElement, а затем взял параметр селектора.
Этот метод позволяет мне получить доступ к элементу
, который выбирается с помощью того же селектора CSS.
Итак, я просто скопирую это.
Таким образом, в этом случае вместо того, чтобы просто получить текст,
он фактически вернет ссылку на сам элемент,
, а затем, чтобы вы могли добавить дополнительными способами
доступа к информации внутри этого элемента, как мы требуем.
В этом случае get-text используется только для извлечения конкретного текста.
Мы можем использовать другие методы на
этого элемента для получения дополнительной информации из этих элементов.
Итак, вот почему я создаю этот метод здесь.
Аналогичным образом, я буду реализовывать другой метод, называемый get все элементы.
Теперь это также использует параметр, называемый селектором, как и раньше.
То, что делает метод GetAll, это выбрать
все элементы, а затем вернуть их в воротник,
так, что, например,
, если ваша страница содержит много элементов h1 в
ссылка на все из них, будет возвращена в мой воротник.
Итак, что там, я могу затем решить сделать
вызов к определенному в этом списке элементов.
Итак, чтобы сделать это,
мы будем использовать тот же возврат, но здесь,
вместо того, чтобы сказать селектор элементов,
позвольте мне просто скопировать это, а затем у нас есть другой метод под названием
element.all, который позволяет нам raferatch получить доступ ко всем элементам, которые соответствуют этому конкретному селектору.
Первый вернет первый элемент, который соответствует этому селектору.
После этих обновлений мы перейдем к тестовым файлам и добавим новый тест здесь.
Итак, опять же, я использую синтаксис Jasmine для добавления в новый тест здесь.
Итак, я скажу это, а затем дам описание для этого теста.
Скажу Он должен перейти к примерно
нам страницу, нажав на ссылку.
Теперь, если вы оглянетесь на свое угловое приложение,
вы заметите, что в вашем угловом приложении,
у вас есть навигационные ссылки в верхней части страницы.
Итак, что мы собираемся сделать в этом тесте, это автоматически
перейти и получить доступ к одной из этих навигационных ссылок и нажать на них.
Теперь, конечно, как вы ожидаете, это будет сделано программно,
, а не вручную нажав на ссылку.
Итак, чтобы сделать это,
то, что я собираюсь сделать, это перейти к корню моего углового приложения, а затем,
я собираюсь получить доступ
к ссылкам в моей панели навигации вверху.
Сказав страницу, getAllElements и
, тогда я получу все элементы, у которых есть тег.
Теперь, очевидно, у вас будет много тех тегов на нашей странице, но четыре верхних,
являются четыре ссылки в
навигационной панели в верхней части нашей страницы там в компоненте заголовка.
Итак, получая доступ к этим
теперь обратите внимание, что я использую get все элементы, поэтому я собираюсь получить ряд элементов.
В этом конкретном случае
оказывается около 16 различных тегов, которые будут носить на этой странице там.
Итак, я пойду и выберу.
Итак, вот где я использую этот метод, называемый get, а затем я могу указать
индекс для конкретного элемента, который я хочу.
Итак, я проверил, если вы посмотрите на файл шаблона компонентов заголовка,
вы заметите, что в самую секунду тег в
HTML-страница компонента заголовка ссылается на ссылку о нас там.
Так вот, к чему я получаю доступ, сказав получить один.
Zero, конечно, относится к домашней ссылке в
компонента заголовка, где мы создали нашу панель инструментов в верхней части.
Итак, я получаю доступ ко второму, так что это ссылка там.
Теперь, как только вы получите эту ссылку,
есть метод, который транспортир поддерживает
на элемент со ссылкой там называется щелчком.
Итак, это, как вы видите программно,
вызывает щелчок на этом конкретном элементе в моем окне браузера.
Таким образом, программно, мы выполняем то, что вы обычно выполняете
вручную, физически перейдя по этой ссылке и щелкнув по ней мышью.
Теперь, как только мы нажимаем на ссылку,
вы собираетесь перейти на страницу О нас.
Теперь, на странице О нас,
, если вы идете на шаблон страницы О нас,
вы обнаружите, что есть элемент h3, который содержит имя этой страницы.
В пределах этого элемента h3
вы увидите текст под названием О пространстве нас там.
Так вот, что я сейчас проверю.
Причина, по которой я собираюсь проверить это, заключается в том, чтобы убедиться, что я действительно перешел на страницу
О нас, выполнив эти шаги в моем угловом приложении.
Итак, вот где я буду использовать ожидание.
Мы уже видели использование ожидание и ожидание страницы.
GetParagraphText и я собираюсь получить текст абзаца из
h3, и это я ожидаю toBe.
Обратите внимание на использование синтаксиса Jasmine здесь, и это должно быть О нас.
Итак, введя этот второй тест в наш тестовый файл здесь,
давайте сохраним изменения, которые мы сделали, а затем перейти и выполнить этот тест.
Иду в терминал.
Опять же, позвольте мне выполнить тест, сказав ng e2e
, и вы заметите, что это снова пройдет через тот же набор шагов,
, а затем выполнить оба теста, которые теперь у меня есть в тестовом файле.
Интересно посмотреть, как проходит тест в браузере.
Итак, вы видите, что мы находимся на главной странице,
вы теперь переходите на страницу About и затем успех.
Таким образом, мы успешно перешли с
Домашняя страница на страницу О программе, а затем мы проверили, что у вас есть
перейти на страницу About, проведя
конкретный тест, где мы проверили, чтобы убедиться, что
О нас находится в теге h3 внутри страницы О нас там.
Итак, это еще один сквозной тест, который мы можем провести,
, и вы видели, как тест проводится прямо перед
ваших глаз без вашего ручного вмешательства.
Надеюсь, вам нравится проводить эти сквозные тесты.
Давайте немного амбициознее.
Теперь, что мы собираемся сделать, это перейти к определенному блюду
, а затем попытаться вставить комментарий в это блюдо.
Теперь, вот где я собираюсь воспользоваться помощью Protractor поддержки,
и вы увидите меня, используя еще несколько методов из
Protractor для того, чтобы перейти на страницу блюда,
мы перейдем к самому первому блюду в нашем меню, используя
ссылку на страницу детализации блюда с параметром это конкретное блюдо,
идентификатор конкретного блюда.
Затем мы определим входные элементы формы
, а затем будем автоматически вводить информацию в
эти входные элементы, а затем попытаться отправить форму и посмотреть, что происходит.
Итак, чтобы провести этот тест, снова
войти и используя синтаксис Jasmine,
я введу его здесь, а затем я определим, что этот тест пытается сделать.
Я бы сказал, «Он должен ввести новый комментарий для первого
блюдо» и функция стрелки
, и вы видите, что внутри этой функции стрелки,
мы собираемся сделать нашу первую страницу navigateTo,
мы будем перейти к dishdetail ноль.
Итак, это первое блюдо в нашем меню.
Теперь, как только мы перейдем к странице dishdetail, мы скажем
«пусть newAuthor равен странице getElement».
Итак, мы собираемся найти этот элемент, который является
ввода и введите текст здесь,
, так что это поможет мне определить, что элемент ввода, где имя автора
набрано в форме, которую мы создали на нашей странице dishdetail.
Если вам интересно,
пойти и взглянуть на эту форму,
и тогда вы увидите, что есть действительно
, что входной элемент на этой странице dishdetail там.
Итак, доступ к этому, я собираюсь ввести имя автора
в это поле ввода там.
Итак, здесь на помощь приходит метод sendKeys', который поддерживается на нашем элементе,
метод sendKeys', поддерживаемый Protractor.
Итак, вот, я собираюсь ввести имя автора в качестве автора теста.
Итак, в конце этих двух шагов
автор теста должен быть набран в элементе ввода в моей форме.
Теперь, кроме того, мне также нужно ввести комментарий для этой формы.
Мы также можем настроить значение рейтинга,
, но я не собираюсь делать это в этом конкретном тесте,
Я просто собираюсь ввести значение комментария, используя аналогичный подход.
Итак, я скажу, «пусть newComment»,
снова, получит страницу
getElement, а затем я ищу
textarea и newComment,
SendKeys и введите «Test Comment».
Таким образом, это заполнит слова Test Comment в текстовой области
, которая содержит комментарии, которые
автор должен представить для этого конкретного блюда.
После этого мы найдем SubmitButton.
Итак, чтобы сделать это, мы скажем
page.getElement тип кнопки отправить,
, а затем, как только мы достанем кнопку мы просто говорим, newSubmitButton.click.
Итак, как только мы нажмем на кнопку,
комментарий будет повторно отправить его.
Теперь я собираюсь использовать другой метод, который поддерживает Protractor.
Я собираюсь приостановить тест в этот момент.
Это позволит мне пройти тест, а затем провести тест или завод,
так что это говорит, браузер не определен,
поэтому мне нужно вернуться сюда, а затем импортировать
браузер из библиотеки Protractor там,
, а затем вы видите, что красная линия squiggly исчезла,
так что мой тест должен все должны быть настроены правильно там.
Итак, позвольте мне сохранить изменения,
мы пойдем и выполним этот третий тест также,
вместе с оставшимися двумя тестами, которые мы уже ввели.
Перейдя в браузер, позвольте мне снова выполнить сквозной тест,
когда браузер открывается, туда мы идем,
первый тест был проведен и что должно быть успешным,
второй тест был проведен и третий тест, где мы перешли блюдо подробно,
и вы видите, что тест комментарий был представлен правильно нашим тестом.
Итак, этим мы завершаем это упражнение.
В этом упражнении вы провели три различных теста, используя поддержку
Protractor, и обнаружили, что наше приложение проходит все эти три сквозных теста.
Пришло время сохранить изменения в
репозитории Git с помощью сквозного теста сообщений.