Full End-to-End Testing for Your HTML Email Workflows

https://slides.com/bahmutov/email-testing

Gleb Bahmutov

Sr Director of Engineering

Full End-to-End Testing for Your HTML Email Workflows https://slides.com/bahmutov/email-testing Gleb Bahmutov Sr Director of Engineering

Full End-to-End Testing for Your HTML Email Workflows

By Gleb Bahmutov

Full End-to-End Testing for Your HTML Email Workflows

Every time a new user registers for your service, your application probably sends a confirmation email.How does that email look in the user's browser? How does it look on a mobile screen? And most importantly: does it work? In this presentation, I will show the full end-to-end open-source testing procedure for validating HTML emails. We will test the email functionality, accessibility, and visual look and style to ensure that our users are not silently dropping out due to a broken email subsystem. Presented at InfobipShift 2021, video at https://youtu.be/igj8OQhY0Jg

4 years ago
4,637

Gleb Bahmutov PRO

JavaScript ninja, image processing expert, software quality fanatic

	const nodemailer = require('nodemailer')

	const host = process.env.SMTP_HOST \|\| 'localhost'
	const port = Number(process.env.SMTP_PORT \|\| 7777)

	const transporter = nodemailer.createTransport({
	host,
	port,
	secure: port === 456,
	})

	transporter.sendMail({
	from: '"Registration system" <reg@company.co>',
	to: email,
	subject: 'Confirmation code 1️⃣2️⃣3️⃣',
	text: 'Your confirmation code is 654agc',
	html: confirmationEmailHTML,
	})

	const nodemailer = require('nodemailer')

	const host = process.env.SMTP_HOST \|\| 'localhost'
	const port = Number(process.env.SMTP_PORT \|\| 7777)

	const transporter = nodemailer.createTransport({
	host,
	port,
	secure: port === 456,
	})

	transporter.sendMail({
	from: '"Registration system" <reg@company.co>',
	to: email,
	subject: 'Confirmation code 1️⃣2️⃣3️⃣',
	text: 'Your confirmation code is 654agc',
	html: confirmationEmailHTML,
	})

	const ms = require('smtp-tester')

	// starts the SMTP server at localhost:7777
	const port = 7777
	const mailServer = ms.init(port)
	mailServer.bind((addr, id, email) => {
	// email.body is plain text
	// email.html is rich HTML
	})

	const ms = require('smtp-tester')

	module.exports = (on, config) => {
	// starts the SMTP server at localhost:7777
	const port = 7777
	const mailServer = ms.init(port)

	let lastEmail = {}

	mailServer.bind((addr, id, email) => {
	// store the email by the receiver email
	lastEmail[email.headers.to] = {
	body: email.body,
	html: email.html,
	}
	})

	on('task', {
	getLastEmail(userEmail) {
	return lastEmail[userEmail] \|\| null
	},
	})
	}

	describe('Email confirmation', () => {
	beforeEach(() => {
	cy.task('resetEmails')
	})

	it('sends an email with code', () => {
	cy.visit('/')
	cy.get('#name').type('Joe Bravo')
	cy.get('#email').type('joe@acme.io')
	cy.get('#company_size').select('3')
	cy.get('button[type=submit]').click()
	cy.location('pathname').should('equal', '/confirm')
	// by now the SMTP server has probably received the email
	cy.task('getLastEmail', 'joe@acme.io')
	.its('body') // check the plain email text
	.then(cy.wrap)
	// Tip: modern browsers supports named groups
	.invoke('match', /code is (?<code>\w+)/)
	// the confirmation code
	.its('groups.code')
	.should('be.a', 'string')
	.then((code) => {
	cy.get('#confirmation_code').type(code)
	cy.get('button[type=submit]').click()
	cy.get('[data-cy=incorrect-code]').should('not.exist')
	cy.get('[data-cy=confirmed-code]').should('be.visible')
	})
	})
	})

	// by now the SMTP server has probably received the email
	cy.task('getLastEmail', 'joe@acme.io')
	.its('html') // check the HTML email text
	.then((html) => {
	cy.document().invoke('write', html)
	})

	cy.screenshot('2-the-email')

	const nodemailer = require('nodemailer')

	const host = process.env.SENDGRID_HOST
	const port = Number(process.env.SENDGRID_PORT)
	const secure = port === 465
	const auth = {
	user: process.env.SENDGRID_USER,
	pass: process.env.SENDGRID_PASSWORD,
	}
	const transporter = nodemailer.createTransport({
	host, port, secure, auth,
	})

	// use Nodemailer to get an Ethereal email inbox
	// https://nodemailer.com/about/
	const nodemailer = require('nodemailer')
	const testAccount = await nodemailer.createTestAccount()

	const makeEmailAccount = require('./email-account')

	module.exports = async (on) => {
	const emailAccount = await makeEmailAccount()

	on('task', {
	getUserEmail() {
	return emailAccount.email
	},

	getLastEmail() {
	return emailAccount.getLastEmail()
	},
	})
	}

	it('sends confirmation code', () => {
	const userName = 'Joe Bravo'

	cy.visit('/')
	cy.get('#name').type(userName)
	cy.get('#email').type(userEmail)
	cy.get('#company_size').select('3')
	cy.get('button[type=submit]').click()

	// hmm, the email might be delayed
	cy.task('getLastEmail')
	.its('html')
	...
	})

	// https://github.com/bahmutov/cypress-recurse
	const { recurse } = require('cypress-recurse')

	it('sends confirmation code', () => {
	...
	cy.get('button[type=submit]').click()

	// retry fetching the email
	recurse(
	() => cy.task('getLastEmail'), // Cypress commands to retry
	Cypress._.isObject, // keep retrying until the task returns an object
	{
	timeout: 60000, // retry up to 1 minute
	delay: 5000, // wait 5 seconds between attempts
	},
	)
	.its('html')
	...
	})

	const sgClient = require('@sendgrid/client')
	sgClient.setApiKey(process.env.SENDGRID_API_KEY)

	/**
	* Sends an email by using SendGrid dynamic design template
	* @see Docs https://sendgrid.api-docs.io/v3.0/mail-send/v3-mail-send
	*/
	async sendTemplateEmail({ from, template_id, dynamic_template_data, to }) {
	const body = {
	from: {
	email: from \|\| process.env.SENDGRID_FROM,
	name: 'Confirmation system',
	},
	personalizations: [
	{
	to: [{ email: to }],
	dynamic_template_data,
	},
	],
	template_id,
	}

	const request = {
	method: 'POST',
	url: 'v3/mail/send',
	body,
	}
	const [response] = await sgClient.request(request)

	return response

	const initEmailer = require('../../src/emailer')
	const emailer = await initEmailer()
	await emailer.sendTemplateEmail({
	to: email,
	// the ID of the dynamic template we have designed
	template_id: 'd-9b1e07a7d2994b14ae394026a6ccc997',
	dynamic_template_data: {
	code: confirmationCode,
	username: name,
	confirm_url: 'http://localhost:3000/confirm',
	},
	})

	cy.contains('a', 'Enter the confirmation code')
	.should('be.visible')
	.invoke('text')
	.then((text) => Cypress._.last(text.split(' ')))
	.then((code) => {
	// click on the button
	// enter the code
	})

	// https://docs.percy.io/docs/cypress
	require('@percy/cypress')
	describe('Email confirmation', () => {
	it('sends confirmation code', () => {
	const userName = 'Joe Bravo'

	cy.visit('/')
	cy.get('#name').type(userName)
	cy.get('#email').type(userEmail)
	cy.get('#company_size').select('3')
	// cy.screenshot('1 - registration screen')
	cy.percySnapshot('1 - registration screen')
	cy.get('button[type=submit]').click()
	...
	})
	})

	.then((code) => {
	cy.log(`confirm the code ${code} works`)
	expect(code, 'confirmation code')
	.to.be.a('string')
	.and.have.length.gt(5)
	// replace the dynamic confirmation code with constant text
	// since we already validated the code
	cy.get('@codeLink').invoke(
	'text',
	'Enter the confirmation code abc1234',
	)
	cy.contains('strong', new RegExp('^' + code + '$'))
	.invoke('text', 'abc1234')
	cy.percySnapshot('2 - email')
	})

	.then((code) => {
	cy.log(`confirm the code ${code} works`)
	expect(code, 'confirmation code')
	.to.be.a('string')
	.and.have.length.gt(5)
	// replace the dynamic confirmation code with constant text
	// since we already validated the code
	cy.get('@codeLink').invoke(
	'text',
	'Enter the confirmation code abc1234',
	)
	cy.contains('strong', new RegExp('^' + code + '$'))
	.invoke('text', 'abc1234')
	cy.percySnapshot('2 - email')
	})

	.then((code) => {
	cy.log(`confirm the code ${code} works`)
	expect(code, 'confirmation code')
	.to.be.a('string')
	.and.have.length.gt(5)
	// replace the dynamic confirmation code with constant text
	// since we already validated the code
	cy.get('@codeLink').invoke(
	'text',
	'Enter the confirmation code abc1234',
	)
	cy.contains('strong', new RegExp('^' + code + '$'))
	.invoke('text', 'abc1234')
	cy.percySnapshot('2 - email')
	})

Full End-to-End Testing for Your HTML Email Workflows

Gleb Bahmutov

Sr Director of Engineering

Full End-to-End Testing for Your HTML Email Workflows

More from Gleb Bahmutov