Все, что вам нужно знать о тестировании пользовательского интерфейса

В качестве решения нашей проблемы мы рассмотрим два разных инструмента: инструмент для создания базы кода и инструмент для работы без кода.

I. Код

Демо-приложение:

Наше демонстрационное приложение - это приложение, похожее на Angular ToDo, состоящее из одной страницы. Действие довольно простое: вы устанавливаете несколько флажков, а затем можете удалить выбранные элементы.

Предпосылки и общие проблемы и решения

Для тестирования пользовательского интерфейса мы будем использовать Protractor, который по умолчанию настроен в любом проекте Angular CLI.

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

1. Установите модуль

$ npm install

Protractor - это решение на основе Selenium, и при его настройке для запуска тестов возникают некоторые общие проблемы.

Сначала войдите в структуру своего проекта и выполните следующую команду

npm run e2e

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

Если вы получите такую ​​ошибку:

Тогда что вы можете сделать, чтобы обновить веб-драйвер следующим образом:

1. Установить транспортир глобально

npm install protractor -g

2.В папке вашего проекта выполните следующую команду:

webdriver-manager update

Повторите команду еще раз

npm run e2e

Если это по-прежнему не помогает, проверьте эту проблему на GitHub и перейдите к ответу, опубликованному 28 сентября 2019 г. По сути, все, что вам нужно сделать, это обновить драйвер Chrome.

Наш первый набор тестов

Мы рассмотрим эти тестовые случаи в нашем тестовом приложении:

1. Кнопка изначально отключена.
2. Если выбран один элемент, кнопка становится активной.

Тесты Protractor описаны в спецификациях, которые сгруппированы в наборы. Чаще всего для их описания используется Jasmine. Подробнее о Жасмин вы можете прочитать на их сайте.

Если вы скачали код из репозитория, тесты уже должны находиться в папке e2e.

Если хотите, можете удалить файл и написать код для себя.

Обратите внимание, что имя файла должно заканчиваться на .e2e-spec.ts, как указано в protactor.conf.ts.

Затем внутри нового файла добавьте следующий код:

describe("Notification List", () => {
it("The button should be  initially disabled", () => {});
it("If an item is selected then the button should become enabled", () => {});
});

Блок describe (..) используется для группировки набора спецификаций в набор. Мы напишем спецификации нашей страницы внутри этой функции. Для описания спецификаций мы будем использовать блоки it (…).

Теперь попробуем запустить наш тестовый набор.

Выполните следующую команду в папке вашего проекта:

npm run e2e

Эта команда преобразуется в ng e2e, который соберет последнюю версию приложения, обслужит приложение на localhost и запустит для него наш набор тестов.

Результат должен быть следующим:

Notification List
√ The button should be  initially disabled
√ If an item is selected then the button should become enabled
Executed 2 of 2 specs SUCCESS in 0.062 sec.
[15:32:24] I/launcher - 0 instance(s) of WebDriver still running
[15:32:24] I/launcher - chrome #01 passed

Все спецификации приняты, потому что мы еще не предоставили никакой логики. Давайте начнем с объявления глобального хука beforeEach (…) и перейдем к URL-адресу / перед каждым тестом в нашем наборе.

import { browser } from "protractor";
describe("Notification List", () => {
beforeEach(() => {
browser.get("/");
});
it("The button should be initially disabled", () => {});
it("If an item is selected then the button should become enabled", () => {});
});

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

Создайте новый файл с именем notification.po.ts со следующим кодом:

import { element, by } from "protractor";
export class NotificationPage {
get submitBtn() {
return element(by.className("delete-btn"));
}
get matListOptions() {
return element.all(by.tagName("mat-list-option"));
}
}

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

Теперь давайте добавим код:

describe("Notification List", () => {
let page: NotificationPage;
beforeEach(() => {
page = new NotificationPage();
browser.get("/");
});
it("The button should be initially disabled", () => {
expect(page.submitBtn.isEnabled()).toBeFalsy();
});
it("If an item is selected then the button should become enabled", () => {
page.matListOptions.first().click();
expect(page.submitBtn.isEnabled()).toBeTruthy();
});
});

Выполните команду еще раз, чтобы запустить тесты.

npm run e2e

Быстрые советы

Если вам когда-нибудь понадобится запускать тесты в контейнере Docker или если вы хотите запускать без головы, вы можете расширить настройки транспортира, обновив файл protractor.conf.js с объектами chromeOptions следующим образом:

capabilities: {
browserName: "chrome",
chromeOptions: {
binary: process.env.CHROME_BIN,
args: ["--no-sandbox", "--headless"],
},
},

II. Бескодовое решение

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

Ответ - да, есть еще пара инструментов, которые улучшают процесс тестирования.

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

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

И запустите тест, который автоматически создается платформой.

TestCraft создан для использования как техническими, так и нетехническими людьми, процесс тестирования так же прост, как перетаскивание.

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

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

Все, что мне нужно сделать, это установить флажок в моем списке уведомлений и после добавить такую ​​же проверку в submit-btn, но на этот раз, чтобы посмотреть, включена ли она.

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

Заключение

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