How to Test Two-Step Verification Using the Email Testing feature
  • 17 Jan 2023
  • 4 Minutes to read
  • Contributors
  • Dark
    Light

How to Test Two-Step Verification Using the Email Testing feature

  • Dark
    Light

Article Summary

Two-step verification is often used when logging into or creating a user account for a web application. The user interacts with the browser, opens the email containing the verification code, and enters it in the appropriate field on the browser. This is a complicated process, making automating the test quite challenging.

With Autify, you can😉

In this article, you will learn how to automate a two-step verification (2SV) test by using Autify's Email Testing feature and a JS Step.

Prerequisites

To automatically test an email-based 2SV process where the security code is sent to the user's email address, the application under test (AUT) and Autify environment must meet the following prerequisites.

Prerequisites for the application under test (AUT)

  • The AUT must allow you to specify the email address Autify's Email Testing feature issues to the target account (domain: testmail.autify.com).
  • The AUT's verification process must issue an authentication code via email.

Prerequisites for Autify

  • The Email Testing feature must be available.

    • If the Email Test feature is available, you will see an email icon on the Autify Recorder, as shown below. You are ready to start recording!
    • If the Email Test feature is unavailable, the email icon will not be displayed on the Autify Recorder, as shown below. In this case, please request a trial by contacting us via the contact form. We will set up the Email Testing feature for you to try out👍
  • If using a fixed email address, the email address must be created in advance.

    • You can create a fixed email address on the Workspace Settings Page. If you would like to know more about the difference between a fixed email address and a random email address, both of which can be used in the Email Testing feature, please see this article.
    • Refer to the following rule of thumb to decide which type of email to use:
      • Testing a 2SV process where the same member logs in every time
        Fixed email address
      • Testing a 2SV process where a user registers using a unique email address each time
        Random email address

What will the Scenario look like?

Below is an example of a completed Scenario. The following actions are performed in each step:

  • Step 2: Enter the email address issued by Autify's Email Testing feature.
  • Step 5-8: Open the email in a new window. In Step 8, a JS Step is used to get and return the 2SV code.
  • Step 11: Enter the 2SV code returned in Step 7 into the 2SV form.
  • Step 12-13: Proceed with the 2SV process and confirm that it is successful.

Scenario Details Page

Test Result Page

In Step 11, you can see that the 2SV code obtained in Step 8 has been entered.

How to create the Scenario

Now, let's take a look at how to create the Scenario shown above.

The process can be divided into two stages:

  • Record the Scenario
  • Edit the recorded Scenario

Record the Scenario

  1. Create the Scenario. Record the actions until the web application sends the email containing the 2SV code.

Open the email address on the Autify Recorder and click on the "Copy to Clipboard" icon to copy the target email address.

Return to the web application and enter the copied email address into the email address field. Go ahead and record the first step of the verification process.

  1. After you've recorded the step where the 2SV email is sent out, open a new window to open the email. This window must be separate from the window you are currently interacting with. (URL is optional.)

  2. In the new window, click on the appropriate email address on Autify Recorder, and open the email containing the 2SV code.

  3. Add the Element Should Be Visible assertion to confirm that the email's 2SV code is visible. Also, check the CSS selector for that element (we will use it later in a JS Step. For more information on how to check CSS selectors, please see this article).
    Then, close the window.

  4. Return to the verification form window. Enter the 2SV code shown in the email to the form, and continue recording.

Edit the recorded Scenario

After recording, we need to prepare a JS Step to receive a dynamic 2SV code via email.

  1. Insert a JS Step right after the step that opens the 2SV email.
  2. In the JS step, return the character string obtained from the email. A sample code is shown below. Please replace <TODO: REPLACE SELECTOR> with content that follows the structure of the email.
/**
* Locate the element
*/
var selector = "<TODO: REPLACE SELECTOR>";
var element = document.querySelector(selector);

/**
* Stop process if it does not exist
*/
if (!element) {
throw new Error('Error: cannot find the element with selector(' + selector + ').');
}

/**
* Return text content
*/
return element.textContent;

In the step where the 2SV code is entered, change the input value to "Other step's result" and enter the value returned from the JS Step.

ScreenShot2021-06-24at8.37.22_en

That's it! Autify can now receive an email that contains a unique verification code and enter it into the form!

We hope this article has helped you understand how to automate tests that involve an email-based two-step verification using Autify. If you have any questions about email testing and authentication, feel free to get in touch with our support team😊

Further reading


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.