In this blog post, we will use a local SMTP server to receive emails sent by the app to the user. We will test the HTML emails to make sure they look and work correctly.

Note: you can find the source code shown in this blog post at cypress-email-example and watch a video explaining the testing process here.

Sending emails

If you want to send an email from a Node program, I would suggest using the nodemailer module. Here is an example script to send an email via a local SMTP server

In the production system the host and the port would be your organization’s production SMTP server. But when testing locally, let’s assume the email server is running at localhost:7777. We can make the email-sending code reusable:

Any part of our application can thus require the above module and use it to send an email:

Great, now let’s receive an email.

Receiving emails

During testing, we want to use a local STMP server that would give us access to the received emails. A simple implementation can be found in the smtp-tester NPM module. Let’s create the server and print every incoming message:

Start the server and then execute the send.js script

The mail server prints the detailed email information

The received email contains both the plain text and the “rich” HTML bodies we have sent.

The application

Imagine you have an application where the user enters their email and the application emails the confirmation code to the user.

The registration page

The user must enter the sent code into the “confirm” page.

The confirmation page expects the emailed code

In our case, the application receives the registration form inputs from the front-end as a JSON object. The backend function uses the email utility we wrote above to send the actual (hardcoded for now) confirmation code.

The confirmation page can call the backend with the user-submitted code, or in my demo it simply verifies the input against the expected string “654agc”.

The confirmation page shows success message if the code is valid

Confirmation page test

As the first step, let’s confirm the above page works - it should show an error message for an invalid code, and a success message for the valid one. Our Cypress test can be this:

The test passes

The STMP server inside Cypress

During testing we want to receive the email the application is sending. Thus we need access to the SMTP server receiving the emails - Cypress can spawn such server using the smtp-tester module right from its plugin file! The plugin file runs in Node, thus it can bind to the local socket, listen for the incoming SMTP messages - yet be accessible from the test via cy.task command.

The SMTP server will start when we run Cypress. Now we can write a test to fill the registration page form and submit it - we should see the email arrive.

The above test:

• visits the registration page
• fills the registration form: name, email, company size
• clicks the submit button and checks the application ends up at the /confirm page
• spies on the network call using cy.intercept command to make sure the application does send the registration information to the backend

#tutorials #html #emails #cypress