Сквозное тестирование (E2E) - это процесс загрузки вашего веб-приложения в браузере и тестирования приложения, как если бы реальный пользователь выполнял такие действия, как нажатие кнопок, отправка форм и т. Д. Это позволяет ускорить процесс тестирования пользовательского опыта и поможет вам обнаружить ошибки, о существовании которых вы даже не подозревали. Тем не менее, отправка электронных писем также является важной частью веб-приложений. Он часто отмечает важные контрольные точки на пути пользователя, такие как регистрация или совершение покупки.
Учитывая важность электронной почты, необходимо протестировать функциональность e2e во время разработки. Именно тогда MailHog пригодится в качестве инструмента тестирования электронной почты с поддельным SMTP-сервером под ним. Он инкапсулирует протокол SMTP с расширениями и не требует определенных внутренних реализаций. Mailhog запускает супер простой SMTP-сервер, который обрабатывает отправленные на него исходящие электронные письма. Вы можете увидеть загруженные электронные письма в веб-интерфейсе.
Для тестов e2e давайте воспользуемся Cypress, поскольку он предоставляет чистый DSL для написания выразительных тестов и электронное приложение, которое предоставляет возможности отладки во времени для каждой спецификации.
Цель этого руководства - продемонстрировать E2E-тестирование электронной почты в Mailhog с использованием Cypress. Вы также можете проверить готовый код, перейдя по этой ссылке на Github.
А теперь запачкаем руки.
Установить Cypress
Для начала создайте новую папку в корневой папке проекта и инициализируйте новый проект npm.
mkdir e2e cd e2e npm init -y
Затем установите Cypress с помощью:
npm install cypress --save-dev
Это устанавливает Cypress как зависимость для разработчиков, где исполняемый файл теперь существует на ./node_modules/.bin/.
Чтобы открыть Cypress, вы можете запустить
./node_modules/.bin/cypress open
Или добавьте команды Cypress в поле сценариев в файле package.json.
{
"scripts": {
"cypress:open": "cypress open"
}
}
Теперь вы можете вызвать команду
npm run cypress:open
из вашего проекта, и приложение Cypress electronic откроется прямо для вас. Cypress Test Runner определяет все совместимые браузеры на компьютере пользователя. В правом верхнем углу средства запуска тестов находится раскрывающийся список, в котором можно выбрать другой браузер для тестов E2E.
Установка Cypress также включает несколько интеграционных тестов по умолчанию в каталоге / integration . Предполагая, что Cypress успешно настроен, вы сможете запускать интеграционные тесты по умолчанию из электронного приложения. Если вы хотите узнать больше о структуре проекта и написании базовых тестов, посетите официальную Cypress docs для получения дополнительной информации. Теперь перейдем к части руководства, посвященной тестированию электронной почты E2E.
Настроить Mailhog
Чтобы настроить Mailhog, перейдите в папку проекта Cypress и создайте docker-compose.yml, как показано ниже.
version: '3'
services:
mailhog:
image: mailhog/mailhog:latest
ports:
- '8025:8025'
- '1025:1025'
environment:
MH_STORAGE: maildir
MH_MAILDIR_PATH: /tmp
volumes:
- maildir:/tmp
command: -invite-jim=1 -jim-accept=0.50
volumes:
maildir: {}
Конфигурация .yml устанавливает Mailhog в контейнере и сопоставляет порт 1025 с SMTP-сервером и 8025 с веб-интерфейсом. Чтобы запустить службу докеров, введите в терминале docker-compose up. После успешной сборки веб-интерфейс будет доступен по адресу http: // localhost: 8025, как показано на изображении ниже.
Для простоты в этом руководстве давайте создадим базовый скрипт узла, который отправляет электронное письмо с подтверждением после подтверждения адреса электронной почты пользователя. Для этого создайте файл send_verification_email.js в корне проекта и добавьте следующее:
const mailer = require('nodemailer');
const smtp = mailer.createTransport({
host: 'localhost',
port: '1025',
auth: {
user: 'user',
pass: 'password',
}
});
const mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Your account is now confirmed',
html: '<h1>Thanks for the verification</h1><p>Your username is: johndoe</p>'
};
smtp.sendMail(mailOptions, function(err, info) {
if (!err) {
console.log('Mail success: ' + info.response);
} else {
console.log('Mail err', err);
}
smtp.close();
});
Вам нужно будет убедиться, что Mailhog доступен на localhost: 8025, а затем запустить:
node send_verification_email.js
После успешной операции вы должны увидеть:
>> node verification_email.js Mail success: 250 Ok: queued as [email protected]
А когда вы войдете в http: // localhost: 8025, вы заметите, что в почтовом ящике есть электронное письмо с темой Ваша учетная запись подтверждена.
Написание тестов Cypress с Mailhog
Теперь, когда мы настроили сценарий отправки электронной почты и активный почтовый ящик Mailhog, давайте добавим возможности тестирования электронной почты E2E в Cypress. Для этого перейдите в корневую папку Cypress и установите пакет npm под названием cypress-mailhog.
npm install --dev cypress-mailhog
Импортируйте пакет в командный файл Cypress.
// cypress/support/commands.js import 'cypress-mailhog';
Добавьте базовый URL-адрес вашей установки MailHog в ваш cypress.json:
{
...
"mailHogUrl": "http://localhost:8025"
}
Тест E2E, который мы напишем, будет находиться внутри папки интеграции. Для этого перейдите в / integration, создайте файл mail.spec.js и добавьте следующий тест:
context('User Onboarding Emails', () => {
it('Verification email', () => {
cy.mhGetMailsBySubject('Your account is now confirmed')
.should('have.length', 1);
})
})
В этом простом тесте используется cy .mhGetMailsBySubject (), чтобы проверить, существует ли электронное письмо для подтверждения аккаунта. Мы также могли бы проверить, содержит ли тело письма определенный текст, в данном случае имя пользователя.
it('Email should contain username info', () => {
const mail = cy.mhGetMailsBySubject('Your account is now confirmed').mhFirst().mhGetBody();
mail.should('contain', 'Your username is');
})
Пакет также предоставляет несколько команд для взаимодействия с Mailhog по электронной почте, которые вы можете использовать для улучшения тестов. Что еще? Давайте напишем Cypress-тест, чтобы проверить, отправляются ли вложения в электронном письме. Для этого создайте send_verification_email_with_attachment .js в корне проекта и добавьте следующее.
const mailer = require('nodemailer');
const fs = require('fs');
const smtp = mailer.createTransport({
host: '0.0.0.0',
port: '1025',
auth: {
user: 'user',
pass: 'password',
}
});
const mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Email sent with an image attachment',
html: '<h1>This email contains an image attachment</h1>',
attachments: [
{
filename: 'unsplash.jpg',
content: fs.createReadStream('./files/unsplash.jpg'),
contentType: 'image/jpeg'
}
]
};
smtp.sendMail(mailOptions, function(err, info) {
if (!err) {
console.log('Mail success: ' + info.response);
} else {
console.log('Mail err', err);
}
smtp.close();
});
});
Приведенный выше сценарий отправляет электронное письмо с простым файлом .txt. Для запуска введите:
node send_verification_email_with_attachment.js
В случае успеха Mailhog должен получить письмо с вложениями. Вы можете убедиться в этом, посетив http: // localhost: 8025.
Теперь давайте добавим тест E2E, чтобы проверить, есть ли в письме ожидаемое вложение, которое в нашем примере является изображением. Для этого добавьте в mail.spec.js. следующее:
it('Email should contain an image attachment', () => {
const attachmentContentType = 'image/jpeg; name=unsplash.jpg';
cy.mhGetMailsBySubject('Email sent with an image attachment').mhFirst().then(mail => {
const imageAttachment = mail.MIME.Parts.filter(mime => {
const contentType = mime.Headers['Content-Type'] || null;
if (contentType) {
return contentType.includes(attachmentContentType);
}
})
expect(imageAttachment).to.have.lengthOf(1)
});
})
Приведенный выше тест сначала находит письмо с темой. Затем желаемое изображение находится путем фильтрации данных пантомимы. Наконец, мы проверяем длину возвращаемого массива, которая должна быть 1, если изображение найдено. Этот простой тестовый фрагмент можно расширить для проверки файлов PDF, листов Excel и т. Д.
E2E-тесты имеют решающее значение для долгосрочного успеха любого веб-приложения, и Cypress предлагает разработчикам многое для достижения того же. В этом руководстве демонстрируется E2E-тестирование электронной почты в Mailhog с использованием Cypress и его сторонних плагинов. Если вы хотите узнать больше о расширении Cypress с помощью плагинов, обязательно загляните в их официальную документацию по Экосистеме плагинов Cypress.
Если вы нашли эту статью полезной, дайте мне пять, чтобы другие тоже могли ее найти и поделиться с друзьями. Следуйте за мной здесь, на Medium или в блоге kreuzwerker, чтобы быть в курсе моих работ.
Спасибо за чтение!
