Newsletter sign-up forms are common to many websites. But how do you know if the form is working correctly? You can manually test the form by entering your email address and clicking the submit button. But this can be time-consuming and error-prone. The best way to test your sign-up process is to write an automated test using a disposable email account to receive the newsletter confirmation.
In this tutorial we'll show you how to write an automated test using Cypress to test a newsletter sign-up form. We'll use MailSlurp to create a disposable email account and receive the newsletter confirmation email. Let's go!
What is newsletter signup?
Many websites have a newsletter sign-up form that collects email addresses from visitors. The form typically consists of an input field for the email address and a submit button. When a visitor enters their email address and clicks the submit button, the form sends the email address to a server that adds it to the newsletter mailing list. The server then sends a confirmation email to the visitor's email address.
What is automated testing and how does Cypress JS help?
Automated testing is the process of using software tools to run tests on an application. These tests can be run automatically without human intervention, allowing developers to quickly identify bugs and issues in their code.
Cypress is a popular open-source test automation tool that is used to write and run automated tests for web applications. Cypress provides a simple and intuitive API that allows developers to write tests in JavaScript that interact with the application's UI and test its functionality.
Our example application
For this post we will test the example application running at playground.mailslurp.biz. This application has a simple newsletter sign-up form that collects email addresses and sends a confirmation email. We will write a Cypress test to automate the sign-up process and verify that the confirmation email is received. The application looks like this:
Setup
Install Cypress
Cypress can be easily install using NodeJS. If you don't have NodeJS installed, you can download it from the official website. Once you have NodeJS installed, you can install Cypress using npm:
Then scaffold the Cypress project:
This will open an interactive window where you can create your first test.
Add MailSlurp
In order to test the application we need a throwaway temp email account to submit. We will use the free service M*ailSlurp to create a temporary email account. You can sign up for a free account at MailSlurp. Once you have an account, you can create an API key in the dashboard. Copy the API key and save it for later. Next add the package to your project:
Writing the test
Now that we have Cypress installed, we can write our test. Create a new file in the directory called . Next we will add the methods to perform each step of the test.
Configure the clients
The first step in our test is to create a new email address using MailSlurp. We will use the package to create a new email address. Add the following code to the top of your test file:
This code requires the MailSlurp client and configures it using our API_KEY.
Create a disposable email account
Next we will create a new email address using the method. Add the following code to your test file
Load the application
Now we can use Cypress to load our application.
Fill the newsletter form
Once the app is loaded we can use the email address we created to fill the newsletter form and submit it.
After submitting the form will thank us and we can check the email inbox for the confirmation email.
Verify the email
Finally, we can use the MailSlurp client to check the email inbox for the confirmation email. Here we will use the method to wait for the email to arrive. Then we can make assertions on the email content.
Open an email in Cypress
We can also open the email in Cypress to see the content using the method in conjunction with the MailSlurp email preview URLs.
Once opened the email looks like this:
Conclusion
In this tutorial we showed you how to write an automated test using Cypress to test a newsletter sign-up form. We used MailSlurp to create a disposable email account and receive the confirmation email. Automated testing is a powerful tool that can help you quickly identify bugs and issues in your code. By writing automated tests you can ensure that your application is working correctly and provide a better experience for your users.
For the full code see our GitHub examples page.
