15 Feb Integration of MailSlurp with Cypress
Recently I have done Integration of MailSlurp with Cypress, as one of my projects requires email verification after the registration where it sends the confirmation email link. I have to Automate that registration page through Cypress and also have to confirm the email after the successful registration. So I was searching for an online email service through which I can extract the email data in my Test Cases.
Then, I found the MailSlurp service which lets you test and verifies email content. One can also use the MailSlurp in some cases where you get the OTP on email for successful login. You can extract the OTP from the email body by using Regular expression.
MailSlurp is an email API & online dashboard. Create inboxes with real and custom email addresses on demand. You can send and receive emails and attachments in code, tests, or visually.
It creates unlimited email addresses on demand in code or on-line. Take a look at everything email connected or power new email campaigns. MailSlurp additionally has developer integrations in several fashionable languages. This implies that you can test Softwares that relies on Email end to end.
MailSlurp lets you create Email with a visual dashboard, REST APIs, and SDK in various languages. Some of the supported languages are
- An IDE
- Node.js should be installed
Here we are using the Visual Studio Code for Integration of MailSlurp with Cypress.
Firstly, create a Project directory that will contain the installed packages and your test files.
Now, open the VS Code and navigate to the Project directory which you have been created and open it or else go to the Project directory in your systems file explorer and open the command line thereby holding the Shift key and pressing the right mouse button and click on the open command line here. Then type the following command in your terminal
After opening the VS code, click on the terminal in VS code and then on the new terminal. A new terminal will open in the VS code. Enter the following command in that terminal to install the cypress
npm install cypress --save-dev
After the successful installation of the cypress, you’ll get the success message like the below image.
Also, you can verify the installation by opening the Cypress UI using the following command.
The above command will open the Cypress UI. It will take some time for the first time as it will create your project structure and also give you some pre-written examples in the cypress/integration folder so that you can understand how the cypress works.
Now, to install the MailSlurp client in your project, open the terminal again in VS code and execute the following command in the terminal.
npm i mailslurp-client
Integration of MailSlurp with Cypress
Before the integration, you should have a MailSlurp account to get started. If you don’t have one, then you can create one here – https://www.mailslurp.com/
After creating the account, you have to copy your API key which you will find on your dashboard page because we have to define that API key in our test to access the account at the time of testing. Then, you have to create an inbox there. Now, copy the ID of your newly created Inbox so that we can fetch the emails from that particular inbox.
To integrate Cypress and Mailslurp, we will now create a demo test in which we will fetch the email which we will receive after the successful registration.
There are two ways you can integrate MailSlurp with Cypress.
First, you can create the command in Cypress so that you can use that just like any other cypress command.
Second, you can create a support file inside the support folder and then create a method to use the MailSlurp.
1. By Creating the Command in Cypress.
Here, We have imported the MailSlurp client and defined our API key and Inbox Id.
Then, We have created the command which will return the Email.
Now, we will call this command inside our test and print the email we got.
After executing the test, we will get the Output in which our email will be printed like below
2. By Creating a Mailslurp.js file inside our support folder
We Imported the MailSlurp client and defined our API key and Inbox ID. Then created a method name getEmail() which will get the email and print it in the console. It is important to use the async function otherwise it will not resolve the promise and the test will fail.
Now, we will call this function inside our test
After Running the test, we will get the Email Printed on the Console
There are so many functions and filters that MailSlurp supports. So you can use them according to your need.
You can go to their documentation and can check the different functions of receiving and extracting the data by visiting the link below
Hope this article helps you to integrate MailSlurp with Cypress. Write your views below for any concerns