Продуктивность, продуктивность и продуктивность: как использовать инструмент тестирования, такой как Cypress, в качестве основного браузера для разработки. Прочтите здесь или на dev.to.

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

Вы тестируете свой интерфейс вручную? Если вы протестируете его с помощью некоторых тестов E2E, вы напишете тесты в качестве последнего шага? Да? эта статья для вас! 🙌
Вы разработчик TDD? Не читай, теряешь время 😉

Cypress известен своей эффективностью E2E-тестирования. Очевидно, что у него есть некоторые ограничения, но он явно создан для того, чтобы вывести тестирование E2E на новый уровень. В этом посте я хотел бы рассказать, как можно использовать Cypress в качестве основного браузера для разработки, а не только как инструмент тестирования.

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

Давайте проанализируем, как мы, разработчики интерфейса, обычно работаем при разработке вечнозеленого примера формы аутентификации:

  • кодируем поле ввода имени пользователя
  • пробуем вручную через браузер
  • мы в конце концов исправим это
  • затем мы кодируем поле ввода пароля
  • пробуем вручную через браузер
  • затем мы добавляем кнопку отправки
  • мы кодируем управление запросами AJAX

Обратите внимание, что на данный момент мы, вероятно, уже добавили некоторые значения по умолчанию в поля ввода, чтобы не заполнять их вручную при каждом CTRL + S… В любом случае:

  • мы пробуем всю форму через браузер, проверяя, был ли выполнен вызов AJAX и что он отправляет правильную полезную нагрузку на сервер
  • поскольку нам нужно проверить, правильно ли управляются пути ошибок, мы заставляем функцию создания запроса возвращать статический ответ, содержащий ошибку (возможно, мы ищем в StackOverflow, как имитировать неправильный сетевой ответ с помощью Axios ...)
  • мы проверяем, что приложение ведет себя должным образом в случае ошибок
  • мы снижаем скорость сети, чтобы проверить, как задержка AJAX может повлиять на работу пользователя
  • в конце перепроверяем все, чтобы убедиться, что последние изменения не нарушили уже протестированные потоки

Я сократил шаги ради этой статьи, потому что для каждого вышеуказанного шага вам, вероятно, потребуется от 5 до 20 изменений + заполнение формы и т. Д. Самые умные из нас используют некоторые фрагменты Chrome DevTools, чтобы ускорить процесс, добавьте некоторые сценарии исходного кода для представления пользовательского интерфейса непосредственно в нужной точке (если код представления хорошо отделен от остальной части приложения). Некоторые из нас добавляют множество условий для предотвращения того, чтобы некоторые изменения были эффективными, даже когда сайт находится в сети… Добавление большого количества мусорного кода в базу кода…

Если вы уже пишете тесты E2E, пропустите следующую главу!

Сила инструмента тестирования

Если вы не тестировщик и если приведенное выше описание соответствует тому, как вы работаете… У меня для вас хорошие новости: специальный инструмент для тестирования, такой как Cypress (или TestCafé, но, пожалуйста, не рассматривайте общую автоматизацию браузера. такие инструменты, как Selenium или Puppeteer) упрощают каждый рабочий шаг! Не делая ваш исходный код грязным! Потому что

  • вам не нужно жестко кодировать значения по умолчанию для поля ввода, автоматический браузер взаимодействует со страницей с невероятной скоростью. Взгляните на некоторые тесты мин, чтобы понять, что я имею в виду под пылающим
  • вам не нужно моделировать странное поведение сети, потому что Cypress позволяет моделировать их с точки зрения браузера, а не с точки зрения кода. Ваше внешнее приложение выполняет стандартный вызов AJAX, игнорируя, что Cypress отвечает тем, что вы указали (вы можете указать ответ, состояние сети, задержку сети и т. Д.)
  • Cypress управляет браузером Chrome, вы можете использовать DevTools, к которым вы уже привыкли.
  • Cypress создает выделенного и постоянного пользователя Chrome, поэтому вы можете установить свои любимые расширения Chrome (например, React и Redux DevTools).

  • вы можете добавить множество утверждений, чтобы получить немедленную зеленую / красную обратную связь. Утверждение - это своего рода защита на английском языке в форме, например: «Я ожидаю, что форма передает имя пользователя и пароль в качестве полезной нагрузки для запроса AJAX»
  • вам не нужно вручную тестировать как последний реализованный поток, так и предыдущие: как только вы реплицировали поток с помощью теста Cypress, он останется здесь. Если вы измените код, случайно нарушив предыдущий поток, Cypress предупредит вас!
  • если вы слышали, что тесты E2E медленные, прочтите, что такое тесты интеграции пользовательского интерфейса

Вы уже тестируете свой интерфейс на E2E?

Престижность 👍 только один вопрос: вы пишете тесты только тогда, когда уверены, что все работает правильно? В этом-то и дело! Когда вы пишете тест, вы используете свой инструмент тестирования, чтобы повторить то, что вы делали вручную! Те же, точные, действия:

Зачем ты это делаешь? Потому что когда вы тестируете вручную, у вас больше свободы! Потому что вы можете выбрать поток, который хотите протестировать, потому что вы можете использовать расширения браузера, React / Vue.js и т. Д. DevTools, потому что вы можете получить доступ к Chrome DevTools и т. Д.

Как я использую Cypress в качестве основного браузера для разработки

Взгляните на репозиторий, который я подготовил для Конференции по рабочему программному обеспечению. Четвертая фиксация (перед всеми коммитами, связанными с интерфейсом) следующая:

и, кодируя интерфейсное «приложение» (это была демонстрация, однокомпонентное приложение), я никогда не взаимодействовал вручную с клиентским интерфейсом. Я тестирую его вручную, только когда закончил разработку. Как?

  • прежде всего: откройте Cypress и поместите его на второй монитор
  • откройте свой Chrome с помощью Cypress и убедитесь, что необходимые DevTools установлены
  • установите плагин skip-and-only-ui для Cypress, он поможет вам запустить одиночный тест, пропустить некоторые тесты и т. д. прямо из Cypress UI

  • установите плагин watch-and-reload для Cypress, вы можете настроить его для повторного запуска тестов Cypress при каждом CTRL + S исходного файла
  • напишите первое взаимодействие в тесте Cypress: говоря о форме аутентификации, заполнении ввода логина. Если вы так хороши, что можете написать полный тест, еще раз спасибо!
  • начните писать исходный код вашего интерфейса. Плагин watch-and-reload повторно запускает тест Cypress, не покидая редактора кода.

Пожалуйста, остановитесь на последнем пункте: вы нажимаете CTRL + S и Cypress, без какого-либо ручного взаимодействия! И это быстрее и быстрее тебя! Подумайте о том, какой объем работы он вам избегает! Давай продолжим:

  • как только все заработает, напишите следующее взаимодействие в тесте Cypress и закодируйте свое приложение, чтобы тест работал
  • как только вам нужно проверить другой поток (ответ AJAX 500, ответ 401, ответ 403, отсутствие сети и т. д.), продублируйте тест и используйте API Cypress для его имитации (например, cy.route )
  • повторяйте поток, пока не закончите

Молодец 😊 и, пожалуйста, поделитесь своими отзывами, чтобы помочь другим разработчикам сделать этот переключатель производительности 💪

Подводя итоги

Преимущества использования Cypress (и упомянутого выше плагина) в качестве основного браузера для разработки:

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

Еще несколько статей по теме:
- Интеграция компонентов и (UI) против E2E-тестов
- Подождите, не заставляйте E2E-тесты спать

Привет, я Стефано Магни, я страстный разработчик JavaScript и посол Cypress.
Мне нравится создавать высококачественные продукты, все тестировать и автоматизировать , изучать и делиться своими знаниями, помогать людям, выступать на конференциях и сталкиваться с новыми проблемами.
Я работаю в Conio, итальянском биткойн-стартапе.
Вы можете найти меня в Twitter, GitHub , LinkedIn. Вы можете найти все мои недавние выступления / выступления и т. Д. Здесь.