OAuth Automation Sample (Using Google OAuth)

Applies to ReadyAPI 3.10, last modified on October 07, 2021

This tutorial shows you how to create an automation token retrieval using the example of Google OAuth.

Prerequisites

To create automation, you must configure the OAuth 2.0 authorization since these settings are used in the automation process.

Enabling OAuth 2.0 Authentication

Preparation

Open any client application in a browser

To start creating automation, you need to analyze the login and consent screens in any browser that provides development tools (for example Chrome, Safari, Firefox, and so on).

To do it, you can go through the process of getting an access token by using any client application that runs in a suitable browser. Providers may also offer a playground to test an authorization process, so you can use it to explore the login and consent screens without using a client application.

In this tutorial, we will use Google OAuth 2.0 Playground to analyze the login and consent screens:

  1. Open OAuth 2.0 Playground:

    https://developers.google.com/oauthplayground/

  2. Select the needed scope and click Authorize APIs.

    Google OAuth 2.0 Playground

    Click the image to enlarge it.

    Tip: We recommend that you log out from your Google account or use the private mode in the browser to simulate a clean testing environment.

Open the automation script dialog

You can open the automation editor either in the Auth Manager or in the Auth panel:

In the Auth Manager

In the Auth panel

1. Login input

At this step, we will explore the login page and create a script that simulates a login input.

  1. Right-click the login text box and select Inspect (or a similar menu item in your browser):

    Click the image to enlarge it.

  2. The browser shows the HTML element related to the input field. To interact with the element from the script, we need to obtain it. In our case, we can use the getElementById method, so we need the id attribute of the element:

    Click the image to enlarge it.

    The JavaScript code that enters the needed login to the input element looks like this:

    JavaScript

    document.getElementById('identifierId').value = 'john.smith@example.com';
  3. You can test this command by using the Console panel of the browser:

    Click the image to enlarge it.

    Tip: Inserting text via script causes visual artifacts. It does not affect the script.
  4. Now, we need to emulate clicking the Next button.

    Right-click the button and select Inspect. As you can see, the button element does not have an attribute that we can use as an identifier. But we can use the parent div element that has an id attribute - identifierNext:

    Click the image to enlarge it.

    Clicking the div element also fires the click on the child button element. So, to simulate a click on the button, you can use the following code:

    JavaScript

    document.getElementById('identifierNext').click();
  5. Enter the needed code in the Page 1 section of the ReadyAPI Automation script panel:

    Click the image to enlarge it.

2. Enter password

On the next page, we need to input a password. Use the same approach to get the needed elements and simulate the required actions:

  1. Right-click the password field and select Inspect. The input element does not have the id attribute. Let’s use the findElementsbyName method and find the needed element by its name:

    Click the image to enlarge it.

    To method returns an array of the found elements. In our case there is only one element with the same name, so we need the first element of the array. To input the password, we can use the same approach as before:

    JavaScript

    document.getElementsByName('password')[0].value = 'p@ssw0rd';
  2. Right-click the Next button and select Inspect. Similarly to the login page, the button element does not have the id element, but we can use the id attribute of the parent div element.

    Use the following code to click the button:

    JavaScript

    document.getElementById('passwordNext').click();
  3. Enter the needed code in the Page 2 section of the ReadyAPI Automation script panel:

    Click the image to enlarge it.

3. Grant permissions

On the next page, Google provides you with detailed information about the client application and asks whether you want to grant permissions to it.

  1. Right-click the Submit button and select Inspect. Again, to find the button element, we will use the id element of the parent div element:

    Click the image to enlarge it.

    To click the button, use the following code:

    JavaScript

    document.getElementById('submit_approve_access').click();
  2. On the ReadyAPI Automation script panel, click and enter the code to the added Page 3 section:

    Click the image to enlarge it.

4. Final adjustments

If you run the script now, it cannot get an access token. It happens because ReadyAPI runs the script of Page 2 before the needed elements are actually built. You can use the setTimeout method to run the needed function after a delay:

JavaScript

function enterPassword() {
    document.getElementsByName('password')[0].value = 'p@ssw0rd';
    document.getElementById('passwordNext').click();
}

// Runs the enterPassword function after 2000 milliseconds (2 sec)
setTimeout(enterPassword, 2000);

Let’s add the setTimeout function to the Page 3 section as well:

JavaScript

function clickSubmit() {
    document.getElementById('submit_approve_access').click();
}

// Runs the setTimeout function after 2000 milliseconds (2 sec)
setTimeout(clickSubmit, 2000);

Click to test the automation:

Click the image to enlarge it.

Remarks

  • ReadyAPI performs authorization in the internal browser and does not store cookies. So, each time ReadyAPI runs automation, the authorization process is not changed. However, if the authorization server changes the process on its own end, your script may stop working.

  • Background redirects may trigger a run of the next script in the list, while the page is not in fact changed. We recommend that you add logic to your script that waits for the needed elements.For example:

    JavaSript

    var a = 0;

    //This function enters the login:
    function login() {
        document.getElementById('identifierId').value = 'john.smith@example.com';
        document.getElementById('identifierNext').click();
    }

    //This function waits for the login field:
    function waitLogin() {
        if (document.getElementById('identifierId')) {
            setTimeout(login, 10);
        } else {
            if (a++ < 5) {
                setTimeout(waitLogin, 1000);
            }
        }
    }

See Also

Automation Script

Highlight search results