How to Automate registering an user account for Web App with SMS Verification using Cypress.io Framework
It has been more than a year since I have started using Cypress framework to automate different functionalities of the projects worked on.
Recently I have come across a challenge in one of the project to create a new user account where it involves verification of SMS sent to the Mobile number before continuing with user creation.
we go through the flow of the user registration before diving into the Automation.
The Flow starts with filling out a form with user details like FirstName, lastName, email and password.
Entering Mobile number, on this step you would be sent a 4 digit code to the Mobile number as SMS message.
Enter the 4 digit code and it gets verified before going further, once verification successful, we continue entering other necessary details to finish the user account registration.
Automation can be implemented through UI layer as well as through API, we would look at automation through REST API services.
Challenge here is how to automate receiving the 4 digit code to mobile number and cascading it to the verification API request.
Introducing Twilio
Twilio is a cloud communications platform as a service (PaaS), and we will be using Twilio to read the SMS with the 4 digit code that our Web App will send when we try to create new user.
There are many other providers out there (like bandwidth, plivo, sinch or nexmo) which are worth considering. I assure you that the concept remains the same.
So go ahead and register for a free/trial account.
Get a new Twilio phone number
As Twilio cannot read the messages we receive on our phones, we need to get a phone number from Twilio with the purpose of using it to receive the messages.
Make sure you select a phone number from a country supported by Application. I have just gone with a US number (it is the free one !) but if you pick a different country, just take a look at this extensive list of supported countries just to be sure.
But does it work?
We now have a phone number, but does it work? Before wasting our time figuring out the Twilio’s API, let’s just use Twilio’s web interface to check our SMS inbox.
Since we want to read an SMS from Application under Test, it would make sense to see if we receive what Application sends us. We check by sending POST request with newly created number in the body
Request URL: https://app.unidoshdev.com/register/sendverificationtext
{
“Number”:”+120xxxxxxx"
}
Now go back to your Twilio account and let’s see if we have got an SMS.
From the left menu, go to All products & Services and select Phone numbers. Select the phone number you have just created by clicking on it. A new page will open. There you click the Messages Log tab and from the select input choose Incoming. You should now be able to see the SMS from Application.
Using the Twilio API to read SMS messages
Now that we are sure Twilio is getting our messages, we should find a way to get the OTP code that was sent as an SMS.
Go again to the left menu with All products & Services and under the section DEVELOPER TOOLS try to locate the Runtime menu item.
From the Runtime menu which should now be visible, select API Keys. Go ahead and create a new set of standard API keys.
Make sure you save the credentials displayed. With this set of keys, we can now call the Twilio API from Postman. But we have no idea which URL to call and how to build the request!
API Explorer to the rescue! Twilio offers an easy way to see what is available and how you need to build your request.
We can easily identify the endpoint we are interested in: /Accounts/[AccountSid]/Messages. This will give us a list of messages and their contents. So let’s give it a go.
Click on the endpoint. In the Request section, make sure you click Show your Auth Token and afterward copy the cURL command that is displayed.
Automate The Registration Flow with help of Cypress request()
We have to Send a POST request with twilio Mobile Number and check the status attribute
We have to Send a GET request to read the all the message sent to twillio Mobile number and read the latest message to extract the 4 digit code which we will be using in the consecutive requests
We have to Send a POST request with extracted 4 digit code to verify and assert the attribute ‘matches’ in the response equal to true
Finally We have to send a POST request to register new account with the extracted 4 digit code and assert attribute ‘success’ in the response equal to true
hurray ! new user has been registered with SMS message verification.
There are different ways to check if the new user has been registered either by logging into Web UI OR querying database for the newly created user.
Thanks for reading the blog and I hope it would help some of you!
