Integration of MailSlurp with Cypress - Fleek IT Solutions
17872
single,single-post,postid-17872,single-format-standard,ajax_fade,page_not_loaded,,qode-title-hidden,qode-content-sidebar-responsive,qode-theme-ver-9.5,wpb-js-composer js-comp-ver-4.11.1,vc_responsive
Integration of MailSlurp with Cypress

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.

Cypress

Cypress is a JavaScript-based framework that allows end to end testing. It sits inside the browser and is built on top of the Mocha framework. Cypress also allows you to write Integration and Unit tests, use the Chai Assertions and can be used for Testing and Development simultaneously.

MailSlurp

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

  • C++
  • CSharp
  • JavaScript
  • Python
  • Java
  • Ruby
  • PHP
  • TypeScript

 

Prerequisite

  • An IDE
  • Node.js should be installed

 

Installing Cypress

Here we are using the Visual Studio Code for Integration of MailSlurp with Cypress.
For installing Cypress, NPM must be installed in your system. NPM is a JavaScript Package Manager and contains the largest software registry. If you install Node.js then NPM should install automatically with it. To check whether the NPM is installed in your system or not, type the following command in the cmd

npm-v

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

code

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.

Screenshot 1

Also, you can verify the installation by opening the Cypress UI using the following command.

node_modules\.bin\cypress open

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.

Installing MailSlurp

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.

Screenshot 2

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.

Screenshot 3

After executing the test, we will get the Output in which our email will be printed like below

Screenshot 3 re

2. By Creating a Mailslurp.js file inside our support folder

Screenshot 4 re

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

screenshot 5 re

After Running the test, we will get the Email Printed on the Console

ss6

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
https://www.mailslurp.com/guides/receiving-emails/#basic
Hope this article helps you to integrate MailSlurp with Cypress. Write your views below for any concerns
Happy Testing!

Anil Kumar
[email protected]

Anil is ambitious and determined problem solver. He thrive on challenges and has good knowledge in software testing technologies. He's always keen for an opportunity to do his best and achieve great results.

No Comments

Post A Comment

*

code