ОБНОВЛЕНИЕ: эта история теперь размещена в блогах Cypress.io. Большое спасибо за вашу поддержку!

Cypress - это трендовый фреймворк для сквозного (e2e) тестирования с использованием браузера. Его простота использования поможет даже новичку в разработке и продуктивном написании тестов e2e в относительно короткие сроки. Неудивительно, почему он стал таким популярным и ежемесячно внедряется более чем 1 миллионом разработчиков.

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

Одна из наших основных функций - это процессы регистрации. Это можно описать так:

  1. Новый пользователь попадает в регистрационную форму на taswise.io;
  2. Она заполняет некоторую основную информацию о себе (полное имя, пароль электронной почты и т. Д.);
  3. После того, как она отправит форму, наш внутренний сервер обновляет базу данных, и, если операция прошла успешно, он ставит в очередь для доставки электронное письмо со ссылкой для активации, которое будет отправлено на адрес электронной почты, указанный на шаге 2.
  4. Как только электронное письмо попадает в почтовый ящик, наш пользователь нажимает на предоставленную ссылку и может начать пользоваться расширенными функциями платформы.

Чтобы подчеркнуть процесс, вот блок-схема:

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

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

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

В нашем случае мы знали, что можем использовать Cypress для описания процесса, и ожидаем, что он будет выполнять утомительную работу по заполнению регистрационной формы снова и снова. В конце концов, наша платформа - это веб-приложение, и Cypress идеально подходит для его тестирования… Но проблема в том, что Cypress не предназначен для тестирования серверной части, и конечно не является почтовым ящиком учетная запись Gmail. Эта причина объясняет, почему Cypress не предлагает готового решения для наших нужд.

Пора написать собственное решение…

К счастью, команда Cypress учла необходимость кастомных хуков во фреймворке. Они представили систему плагинов и выставили команду под названием task (). Говоря простыми словами, задача позволяет:

Выполнить код в Node.js через событие плагина task.

Прохладный! Итак, все, что нам нужно сделать сейчас, это ввести настраиваемую задачу, которая будет выполнять опрос нашего почтового ящика. Мы воспользуемся тем фактом, что task () может принимать аргументы и предоставить ему заданный адрес почтового ящика и другие параметры, например, как долго мы будем ждать получения электронного письма, прежде чем отказаться и отметить тест. как не удалось. Достаточно слов ... поработаем!

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

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

  1. Быть отправленным с очень конкретного адреса: [email protected],
  2. В теме письма должны быть слова «Подтвердите свой аккаунт» и
  3. Адрес получателя должен быть test+(random-number)@gmail.com (например, [email protected]). Конечно, нам нужно разрешение на доступ к учетной записи электронной почты [email protected], но мы обсудим это чуть позже ...

Таким образом, мы знаем, что наша задача должна иметь 3 обязательных аргумента: from, subject и to. Мы извлечем их прямо из объекта arguments объекта task - args:

Хорошо, а теперь самое интересное. Как мы опрашиваем учетную запись Gmail? 🤔

Потратив некоторое время на поиск в Google, npm’ing и github’ing, не было никаких причин не писать простой клиент Gmail на Node.js.

Рождение gmail-tester

gmail-tester - небольшая библиотека, которая будет обрабатывать опрос Gmail за нас! 🎉

Первое, что нам нужно сделать, это установить библиотеку. Мы сделаем это, выполнив следующую команду внутри нашего проекта Cypress:

npm install --save-dev gmail-tester

Затем мы перейдем к cypress / plugins / index.js и добавим следующий фрагмент кода:

Посмотрим, что здесь происходит ...

Сначала мы объявляем задачу gmail: check, которая принимает аргументы. Затем мы вызовем функцию gmail-tester check_inbox (). Обратите внимание на два последних параметра. Чем больше числа, тем дольше может работать ваш тестовый пример.

Всякий раз, когда нам нужно будет опросить почтовый ящик, мы будем вызывать gmail: check следующим образом. Как только результат возвращается, мы утверждаем его, чтобы убедиться, что он не null (помните, gmail-tester вернет null, если это не так. найти письмо после максимального интервала опроса).

Последний шаг перед тем, как мы сможем воспользоваться этой функцией: нам нужно предоставить gmail-tester разрешение на проверку учетной записи [email protected]. Следуя инструкциям по получению файла JSON с учетными данными, мы поместим credentials.json в каталог cypress / plugins /. Затем, все еще находясь в каталоге cypress / plugins /, мы выполним следующую команду:

Первый аргумент - это путь к файлу gmail-tester init.js. В нашем случае каталог node_modules находился на два шага вне каталога plugins. Во втором аргументе мы предоставляем сгенерированный файл credentials.json из предыдущего шага; gmail_token.json - это имя файла, которое мы выбрали для токена OAuth2, который будет использоваться gmail-tester.

Важное примечание! Не возвращайте credentials.json и gmail_token.json в репозиторий системы управления версиями. Если вы используете git, обязательно исключите эту пару из своего файла .gitignore .

Наконец, мы можем интегрировать задачу gmail: check в наш тестовый сценарий. Вот как это выглядит:

Теперь запустите тест и посмотрите, как он проходит:

Дальнейшие планы

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

Спасибо за внимание! Я надеюсь, что эта статья сэкономила вам время, чтобы начать опрос Gmail в тестовом примере Cypress. Если вам удалось решить подобную проблему, я буду рад узнать, как это удалось!

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

Вы также можете написать мне на @ twitter.

Конечно, это было бы невозможно без платформы Cypress.io! 👏