Сквозное тестирование с реальными адресами электронной почты. Неограниченное количество тестовых учетных записей электронной почты для приложений или тестов. Бесплатно для личного пользования!

Edit: с момента публикации мы сделали новое руководство с подробными примерами!

О

Cypress - потрясающая среда для сквозного тестирования. Он популярен, включает в себя собственный браузер Chrome и легко расширяется.

Cypress позволяет вам тестировать многие части веб-сайта или веб-приложения с помощью браузера в автоматическом режиме. Это похоже на Selenium, но намного удобнее.

Тестирование с реальными адресами электронной почты

Многие приложения используют электронную почту для входа в систему и создания учетной записи. Проверить логины с помощью Cypress легко, если у вас есть назначенный тестовый пользователь. Но как насчет регистрации?

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

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

Пример

Для демонстрации представим, что вы работаете в Twitter :) и хотите от начала до конца протестировать процесс регистрации пользователей.

Настройка Cypress

Для настройки убедитесь, что у вас установлен NodeJS, затем запустите:

npm install --save cypress

Затем создайте тестовую спецификацию со следующей структурой папок:

cypress
└── integration
    └── example.spec.js

Внутри integration/example.spec.js напишем наш первый тест:

Написание теста

Давайте начнем с простого и напишем тест, который загружает экран регистрации в Twitter с помощью Cypress.

Это выглядело бы примерно так:

describe('Sign up', () => {
  context('Example sign up page', () => {
    it('can load the sign up form', () => {
      cy.visit('https://twitter.com/i/flow/signup');
      cy.contains('Create your account');
    });
  })
});

Когда мы запускаем npx cypress run, Cypress загружает форму регистрации в Twitter и утверждает, что на странице отображается Create your account. Результат выглядит так:

Тестирование с помощью электронной почты в Cypress

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

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

Создание тестовых учетных записей электронной почты в Cypress

Чтобы расширить Cypress, сначала создайте папку support в каталоге cypress и поместите в нее index.js и command.js. Вот так:

cypress
├── integration
│   └── example.spec.js
└── support
    ├── commands.js
    └── index.js

Внутри index.js импортируйте команды.

import './commands'

Теперь давайте настроим команду newEmailAddress внутри commands.js, которая вызывает MailSlurp и создает адрес электронной почты по запросу.

Используя нашу команду newEmailAddress

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

describe('Sign up', () => {
  context('Example sign up page', () => {
    it('can generate a new email address to test sign up', () => {
      // get an email address for this test run
      cy.newEmailAddress().then(({ emailAddress }) => {
        // load the twitte rform
        cy.visit('https://twitter.com/i/flow/signup');
        // click to enter email addres
        cy.contains('email instead').click();
        cy.get('input[type=email]').type(emailAddress);
        // assert that email address was entered
        cy.get('input[type=email]').should('contain.value', '@mailslurp.com');
        // submit the form, get the verification code, verify the user (see docs for those examples)
      });
    });
  });
});

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

cy.newEmailAddress().then(({ emailAddress }) => { /* do stuff */ })

Полученные результаты

Теперь мы можем снова запустить наши тесты и передать ключ API MailSlurp.

npx CYPRESS_API_KEY=your-api-key cypress run

Cypress загружает наш экран входа в систему и вводит реальный адрес, созданный с помощью MailSlurp.

Следующие шаги

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

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

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

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

Примеры кода

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

Первоначально опубликовано на https://www.mailslurp.com.