How to configure authentication in UIVeri5 tests

In previous post we have leant how to install and configure UIVeri5 and write first test cases.

In this post you’ll find several options to configure authentication to the application in UIVeri5 tests. Authentication is initial stage for your tests and it’s important to know how to implement this possibility.

Introduction

I decided to write this post because I have been working with UIVeri5 for quite long period of time. And when we only started E2E tests implementation we used one approach (Option 1 below) for authentication but a few month letter we figured out that it wasn’t enough for us. We needed to relogin during tests execution and login with different credentials. And had to find another way for authentication. And we did! We found option 2 and have been using it in our case successfully.

Options to configure authentication

Option 1. Configuration in conf.js file

You only need to configure auth settings in configuration file:

exports.config = {
  …
  auth: {
        'sapcloud-form': {
            user: <username>,
            pass: <password>,
            userFieldSelector: <CSS selector for username input>, // e.g. 'input[id*="idEmailInput"]'
            passFieldSelector: <CSS selector for password input>, // e.g. 'input[id*="idPasswordInput"]'
            logonButtonSelector: <CSS selector for login button>, // e.g. 'button[id*="idLoginButton"]'
        }
    }
}

You can read more about this approach here

This approach has advantages:

• Easy to configure
• Authentication is executed automatically before each spec file.
  In the report one more test case will be added for each spec file.

And disadvantages:

• It isn’t suitable if you need to login with different credentials.
• It isn’t suitable if you need to handle some actions after login.
• It isn’t suitable if you need to relogin during spec file execution.

Option 2. auth configuration usage in function

You have to implement a function using auth configuration and call it whenever you need:

login: function (username, password) {
    browser.get(
        `<URL to login page> `, {
            auth: {
                'sapcloud-form': {
                    user: username,
                    pass: password,
                    userFieldSelector: <CSS selector for username input>, // e.g. 'input[id*="idEmailInput"]'
                    passFieldSelector: <CSS selector for password input>, // e.g. 'input[id*="idPasswordInput"]'
                    logonButtonSelector: <CSS selector for login button>, // e.g. 'button[id*="idLoginButton"]'
                }
            },
        }
    ) .then(() => {
        /* here you can implement actions that should be executed after login */
    })
}

This approach has advantages:

• You can handle some actions after authentication.
• Supports possibility of relogin during your spec execution.
• Supports possibility to login with different credentials.
• In the report one more test case will be added for each login function call in your spec file.

And disadvantages:

• Not so easy to configure (comparing to the first approach).
• Authentication isn’t executed automatically before each spec file. You need to call function by yourself.

Option 3. browser.loadUI5Dependencies() usage in function

Here we implement a function with the following steps:

1. Get username and password inputs and login button
2. Go to login page and fill the inputs and click on the button
3. Wait for page to be reloaded (we wait until the required element is found)
4. Load UI5 dependencies (go to this page for more details)
5. Do some additional actions (if it’s needed)

login: function (username, password) {
    const usernameInput = <any username input locator>; // e.g. element(by.jq('input[id*="idEmailInput"]'));
    const passwordInput = <any password input locator>; // e.g.  element(by.jq('input[id*="idPasswordInput"]'));
    const loginButton = <any login button locator>; // e.g. element(by.jq('button[id*="idLoginButton"]'));

    browser.get(`<URL to login page> `).then(() => {
        usernameInput.sendKeys(username);
        passwordInput.sendKeys(password);
        loginButton.click()
    });
    browser.driver.wait(function () {
        return browser.driver.findElements(<here you should configure any locator for objects which have to be shown on the page> /*e.g. by.css('.sapMBarPH')*/).then(function (elements) {
            return !!elements.length;
        });
    }, browser.getPageTimeout, 'Waiting for page reload to finish')
    // we need to load UI5 dependencies (go to https://github.com/SAP/ui5-uiveri5/blob/master/docs/usage/browser.md for more details)
        .then(() => browser.loadUI5Dependencies())
        .then(() => {
            /* here you can configure checks to be sure that app is loaded */
        })
}

If you use this approach don’t forget to extend default timeouts in conf.js file, e.g.:

exports.config = {
    profile: 'api',
    ...

    timeouts: {
        getPageTimeout: '100000',
        allScriptsTimeout: '300000',
        defaultTimeoutInterval: '300000'
    }
};

This approach has advantages:

• You can handle some actions after authentication.
• Supports possibility of relogin during your spec execution.
• Supports possibility to login with different credentials.
• Can be used not only for login but in any case where page is reloaded and you need to continue your test execution.
  Example for this case you can find in the repository https://github.com/AnastasyaNN/uiveri5-example

And disadvantages:

• Not so easy to configure.
• Authentication isn’t executed automatically before each spec file.
• In the report you will not see additional test case for each login function call.

Conclusion

There are several options for authentication in UIVeri5 and you can implement it the way that you need in your particular situation.

In next post see how to locate controls in UIVeri5 tests.