How to Read Emails in Cypress

E2E Automated Sign up Test

Some people overlook the importance of testing the sign up flow. They might think that’s the first thing that they have developed, tested it over and over while developing other features, and it probably should be working.

However, it can happen that the sign up suddenly starts failing for various reasons. If it does fail, you would want to know it as soon as possible. The later you realize the failure, the more potential new users it can drive off. That is the reason we have an automated test for the sign up/registration flow which gives us a report if something is off, on a daily basis.

Test Flow

For this example, we’ll be going through Determ’s sign up and registration page. Here’s how the test flow goes:

1. User enters their email on the Determ register page
2. User opens a link received via email
3. User is redirected to the registration form
4. User fills out the registration form 
5. User finishes registration and gets logged in the app
6. Delete the user (clean up after the test)

Apart from the standard registration flow, I have added the “delete user” step as well. So, after we confirm that the user is registered, we delete that user using API. That way, we get to the initial state which was before the test started. This ensures that the test does not make a lot of junk in the database and is able to run over and over as many times as we want.

Test Goal

Our test asserts that:

• A user can enter an email address on the sign up page
• A user gets an email from Determ
• The email contains a valid confirmation link
• A user can fill out the form and finish the registration on the link from the email
• A user gets logged in after finishing the registration
• A user gets deleted after all the previous requirements are successfully validated.

Since our test aims to validate that the email is being both sent and received, i.e. the same flow as the user would go through, I wanted to make it as similar as possible to the real user flow, so mocking this part was not an option for me.

Read Cypress 10: Using Multiple Config Files

How do I read my emails in Cypress?

As you could see in the previous sections, in order to finish the registration, you need to visit the link that you received in the welcome email. But to do so, you need to access your email inbox, preferably via API. Luckily, I found a blog about the Gmail-tester library by Lev Gelfenbuim which made this test implementation very smooth.

Basically, what you need to do is:

• Install the gmail-tester (npm install –save-dev gmail-tester)
• Save the Google Cloud Platform OAuth2 Authentication file named credentials.json inside an accessible directory
• In terminal, run the following command: node <node_modules>/gmail-tester/init.js <path-to-credentials.json> <path-to-token.json> <target-email>

The detailed instructions on how to install and configure the gmail-tester, and your Google account, you can find on the gmail-tester github readme.

Usage in the test

In my cypress-config.js file I have:

And inside of the “module.exports = defineConfig”,

As you may have seen in the previously mentioned blog, this piece of code would be in the “cypress/plugins/index.js”, but since I am using Cypress 10 now, it goes to the cypress-config.js file. Also, the code did not work for me until I added “subject:”, “from:”, “to:” in front of “subject”, “from”, and “to”, which is also different in the blog.

Inside of the test file itself, you should have something like this:

This task checks if there is an email existing in our inbox with the given parameters. Then you can console log the found email. The “html”, in my case, contains the html of the email that we have found in our Gmail inbox. Now, from that html you can take out the confirmation URL or any other information that you need.

Final Thoughts

Relying on external sources in your test is usually not a good idea. However, if you would like to confirm exactly the same flow as your user would go through, you can try using Gmail-tester which makes it very easy to access an email in your Gmail inbox. 

Make sure you visit Gmail-tester Github repository for more information and the latest updates.

Feel free to contact me if you have any questions regarding the implementation.