Сквозное тестирование с реальными адресами электронной почты. Неограниченное количество тестовых учетных записей электронной почты для приложений или тестов. Бесплатно для личного пользования!
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.