Testing email sign-up on mobile

It’s 2021 and just about everyone has a mobile device on their person at any given time. It should come as no surprise, then, that over half of total web traffic comes from mobile devices.

If you’re a programmer, you might find yourself constantly worrying about the issues that users might face when signing up to your service from a mobile device. In this article, we take a look at the benefits of sign-up flow testing, before breaking down an example.

Why test sign-up flows on mobile?

There are three key benefits to testing your sign-up flows for mobile devices.

Reputation and success

Users who struggle through the process of joining your app may lose interest and give up or switch to a competitor product instead. If signing up is not possible, individuals won’t be able to use your product at all. Either one of these scenarios may lead to a negative impact on your top-line while potentially bolstering your competition.

Such issues also paint your company in a poor light. Word spreads fast on Twitter and in online communities like Reddit or Facebook, and problems with your product offering will quickly be known far and wide. Even if you’re quick to fix the issue, such damage may be irreparable.

Security and compliance

Testing sign-up flows is also important from a security standpoint. Adding tools like double-entry fields or captcha bot blockers make signing up that much more secure and reduces the likelihood of fraud. A layer of encryption or an email confirmation also helps to protect user data, but these measures add complexity to your code that need to be tested.

Beyond the complexity in code, additional security measures likely impact user experience: by making prospects and customers go through additional security checks, you are making the sign-up process more difficult to follow.

Ensuring all these steps function as intended on mobile devices helps confirm that you’re taking the necessary steps to safeguard your client’s information. Furthermore, creating tests for secure flows like sign-up causes you to objectively evaluate all parts of the end user experience.

Quality

Once your app or website is ready for automated testing, you’ll be able to use that automation process to create hundreds of “fake” users to put your program to the test.

In doing so, you can verify that as a user signs up for your service, the correct information is delivered to their email address. Each user must receive the login information that pertains to their account and not information they’re unable to use. Even worse, you don’t want someone else’s account data being sent to a different user.

Having a large number of automated test scenarios also enables you to push your program to the limit. It’s a good way to find out how your app or website performs with 100 or 200 users, or more. You can assess if having a large number of users bogs down your system which is only possible using automation.

Aspects of sign-up flow testing

When developing a testing plan, it’s important to consider factors that will lead to the success of your program.

Functionality

When it comes to running the sign-up flow for your program from beginning to end, you’ll want to be able to answer the question of whether or not the program works as intended.

An end-to-end test should validate a “happy path” where the process completes without any exceptions or error conditions. A user who inputs their email address and other required information should receive the correct confirmation to their email account and have no issue accessing your app or website.

Consistency

You’ll want to use repeat testing to confirm that your program performs the same way. The same inputs should lead to the same outputs every time, and the program should always function the same way.

Edge cases

It helps to have an understanding of edge cases and how they affect your program. Thinking through edge cases can lead to a more robust end product. Unfortunately, oftentimes you have to come up with edge cases to test on your own.

When it comes to sign-up flows on mobile devices, you’ll want to be as aware as possible of how your program responds to an uncommon browser or perhaps an older operating system. Edge cases can lead to bugs or crashes, and even an issue that affects 1% of users can make an impact.

Similarly, you’ll want to test what happens when your program encounters an issue such as user error. For instance, knowing how your program responds when someone enters an invalid email address will go a long way to avoiding user frustration or confusion.

Considering the many different types of mobile devices and various screen size possibilities, an app or website should be able to handle all. Even if you limit your app specifically to Android or iOS, there are still many devices to choose from. Some phones may have settings to restrict app accessibility (for safety reasons), and your app will need to know how to respond to that.

How can you test sign-up flows on mobile devices?

You’ll need a mobile test automation framework like Appium to set up and run sign-up tests on mobile devices. You can use such a framework to write the tests that will verify the above aspects of your program.

With a test automation framework picked out, there are a few ways you can put your app or website to the test. Frameworks like Appium hook up seamlessly with both Android emulators/iOS simulators or actual mobile devices to perform tests on.

In addition to automated testing, it’s not a bad idea to manually test your program to get a feel for the user interface. Feedback from dedicated testers will reveal the best and worst parts of this experience, which is something automated tests can’t do at all. Manual testing also allows for “random” combinations of commands and button presses to see the effect on your app or website.

No matter the plan you develop, we recommend using a continuous integration environment to ensure that your tests are run consistently.

How to test a sign-up flow with Appium and Mailosaur

Let’s take a look at how we can use Appium and Mailosaur to create an email sign-up flow.

We will use WebDriverIO as our test automation framework, Appium as the device driver, assert for convenient JavaScript assertions, and the mailosaur-node library to test email flows. To install all these dependencies, we can use npm in the command line:

$ npm install @wdio/cli # install webdriverio
$ npm install appium
$ npm install assert
$ npm install mailosaur

We start off by creating an index.js file and including all necessary dependencies:

// index.js

const wdio = require("webdriverio");
const assert = require("assert");
const MailosaurClient = require("mailosaur")

We then define the options for our Appium test suite.

const opts = {
  path: '/wd/hub',
  port: 4723,
  capabilities: {
    platformName: "Android",
    platformVersion: "11",
    deviceName: "Android Emulator",
    app: "/mailosaur-app-debug.apk",
    appPackage: "io.appium.android.apis",
    appActivity: ".MainActivity",
    automationName: "UiAutomator2"
  }
};

The core logic of our test suite in this example lies in the main function. We create a WebDriverIO client object that will drive our tests:

async function main () {
  const client = await wdio.remote(opts);

Now, we use the WebDriverIO object to fill out three fields in our mobile app’s sign-up form.

const firstName = await client.$("com.mailosaur:id/firstName");
await firstName.setValue("Ab");
const lastName = await client.$("com.mailosaur:id/lastName");
await lastName.setValue("Sleny");
const email = await client.$("com.mailosaur:id/emailAddress");
await email.setValue("android@m03agkv6.mailosaur.net");

After filling out the sign-up information, we tell our test framework to click the ‘Submit’ button:

await client.$("android.widget.Button").click();

We can now check whether the sign-up has generated an email as we expected.

const mailosaur = new MailosaurClient('API_KEY');
const serverId = 'm03agk12'
const serverDomain = 'm03agk12.mailosaur.net'

We then define the criteria by which we’ll search for emails.

const searchCriteria = {
  sentTo: 'android@' + serverDomain
}

Now, we’re ready to fetch the relevant message using the Mailosaur library:

const message = await mailosaur.messages.get(serverId, searchCriteria)

Our test is successful if the command returns a valid message. We can check whether the message is valid using the assert call:

assert(message);

Regardless of the outcome, we need to clean up the test session to prepare the Android Emulator and the Appium server for the next run.

await client.deleteSession();

Finally, we call the main function to actually run all tests:

main();

With that, our Appium test comes to a successful conclusion.

Start testing your sign-up flows today with Mailosaur

Mailosaur makes testing sign-up flows a simple process. As we saw above, Mailosaur provides test email addresses and a Node.js library which works with Appium to verify email based functionality.

Mailosaur doesn't just support email, it can also be used to test SMS messages.