Репозиторий Github: Ссылка

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

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

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

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

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

Что мы будем строить?

В этой статье я буду тестировать приложение node.js, отрисовываемое на сервере. Это приложение было создано с использованием Node.js на стороне сервера и обслуживалось во внешнем интерфейсе с помощью ручек.
Это всего лишь вопрос предпочтений, потому что я знаю, что многие инженеры задавали вопросы о том, как они могут тестировать свои серверные приложения Node.js.
Обратите внимание, что TestCafe будет работать с любым механизмом создания шаблонов. вы используете его, он также будет работать независимо от внешней среды вашего приложения, такой как React, Angular, jQuery и т. д., он будет работать на любом интерфейсе с атрибутами JavaScript или HTML.

Установка Testcafe

TestCafe очень легко установить, вам не нужно делать ничего сумасшедшего.
Если на вашем локальном компьютере установлен node.js, все, что вам нужно сделать, это запустить:

npm install -g testcafe

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

Настройка TestCafe в нашем приложении Node.js
См. репозиторий здесь: https://github.com/seunzone/node -testcafe
Также обратите внимание, что я настроил экспресс-сервер Node.js с ручками, вы можете использовать любую среду, которая вам подходит.

Я бы начал с установки testcafe в качестве зависимости, запустив: yarn add testcafe, однако вы можете установить его как зависимость разработчика.

Затем я бы создал тестовый сценарий в моем package.json файле и дал ему указание запустить тест за меня.

"dev": "nodemon --exec babel-node src/app.js",
"test": "testcafe chrome src/tests/index.js --app 'yarn dev' -s screenshots",

Для моей настройки среды yarn run dev обычно запускает мое приложение в режиме разработки, поэтому commandyarn dev вы видите в моих тестовых сценариях.
Вы также заметили, что у нас testcafe chrome запускается тестовый скрипт, эта команда просто инструктирует TestCafe запустить тест в браузере Chrome, а следующая команда указывает путь, по которому мы будем писать наши тесты.

Я создал простое приложение, и мы будем тестировать его с помощью TestCafe.

Основы TestCafe

Документация T estCafe очень полезна. Фактически, я узнал большую часть того, что знаю, просто следуя документации.
Очень полезным методом, которым вы будете пользоваться большую часть времени при взаимодействии с testcafe, является метод Selector. Этот метод гарантирует, что вы выберете элементы в DOM, которые вы хотели бы протестировать.
В файле src/tests/index.js я бы написал следующий код:

Строка 1 импортирует метод Selector из пакета testcafe.
Строка 3 - это просто переменная, которую я создал для выбора элемента h4 в DOM.
В строке 6 мы должны ввести URL-адрес, который мы хотим протестировать, URL-адрес, который вы хотели бы протестировать, не обязательно должен поддерживаться вашим локальным сервером, это может быть ссылка с реального сервера. Большая часть команды разработчиков обычно использует свою промежуточную среду для сквозного тестирования, и я настоятельно рекомендую такую ​​практику.
В строке 10 мы записываем наш фактический тест.

Чтобы запустить тест, просто запустите yarn run test на терминале, это запустит браузер Chrome для запуска написанного нами теста.
Примечание. Никогда не настраивайте браузер, который TestCafe открывает для вас при запуске тестов.

Имитация действий пользователей в TestCafe

С помощью TestCafe вы можете моделировать действия пользователей в DOM и писать сценарии тестов для получения ожидаемых результатов.

Мы будем тестировать, что должно произойти, когда пользователь пытается ввести новое задание.
В строке 3 мы нажимаем определенную кнопку на нашей странице.
В строке 5 мы заявляем, что ожидаем наш новый страница, чтобы соответствовать маршруту /new
в браузере.
Строки 8 и 9 вводят несколько букв в поле ввода новой страницы, а строка 10 нажимает кнопку на странице.

Другой метод, который существует для имитации действий пользователей в браузере, - это метод pressKey().

pressKey('down up down down enter') нажимал бы клавишу «вниз» на клавиатуре один раз, затем клавишу «вверх», затем дважды нажимал бы клавишу «вниз» и, наконец, клавишу ввода. Вы также можете имитировать прокрутку страниц в TestCafe.

Различные способы написания теста

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

Чтобы получить местоположение элемента непосредственно в DOM:
- Щелкните правой кнопкой мыши на веб-странице.
- Нажмите «Проверить».
- Щелкните стрелку, чтобы проверить элемент.

-Щелкните элемент, на который вы собираетесь нацелить в DOM.
- И, наконец, выберите «Копировать».

Затем вы можете вставить код, сгенерированный в методе выбора, в свой тест. Это выглядело бы так:

Selector('body > div > div.row.area > div.col-md-8 > div > a')

Отладка тестов

Встроенный .debug() метод JavaScript оказался очень полезным при отладке тестов.
Чтобы войти в режим отладки, все, что вам нужно сделать, - это вызвать метод в вашем коде, и на этом этапе тест будет приостановлен.

Тесты будут останавливаться на .debug() операторе, затем вы можете resume тест или unlock page вручную тестировать элементы непосредственно в DOM.

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

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

Другие полезные ресурсы

Документация - отличное место для проверки.
Я также нашел очень хорошую статью Майкла Германа здесь