E2E tests automation using UIVeri5

former_member760703 · ‎2021 Aug 12

As a QA Engineer who has been working with UIVeri5 testing automation framework for one and a half years, I want to share the experience. So In this blog post you will find an initial configuration and dummy examples with automated tests using the framework.

First of all, we need to know what UIVeri5 is.

UIVeri5 is an E2E testing framework for UI5-based applications. It uses WebDriverJS to drive a real browser and interacts with your application as a real user would. UIVeri5 is heavily inspired by Protractor and brings most (and more) of its benefits to UI5 applications.

And it can be really helpful for your UI5 application 😊

Let’s look at it a little bit closer.

Preparation

I prefer using various configuration for different projects. So in my case I created a separate folder for the demo project and configured package.json file:

{ 

  "name": "uiveri5-example", 

  "version": "0.0.0", 

  "scripts": { 

    "tests": "uiveri5 ./tests/conf.js" 

  }, 

  "dependencies": { 

    "@ui5/uiveri5": "~1.46.0", 

    "path": "^0.12.7" 

  }, 

  "engines": { 

    "node": ">=0.10" 

  } 

}

Installation

To get UIVeri5 installed run command

npm install @ui5/uiveri5

As a result, it’ll be installed in the current directory.

Preparation of configuration file

Then to start using UIVeri5 we need to create configuration file, e.g. conf.js with the following content

exports.config = {

    profile: 'integration',

    baseUrl: 'https://openui5.hana.ondemand.com/api/’,  // define url to your app

    specs: [

        path.relative(process.cwd(), path.join(__dirname, '*', '*.spec.js'))

        /* define all spec files (as a list) that you want to run */

    ] 

};

It’s important to note that several profiles are available:

integration – for E2E tests (is used in the example below)

api – for API tests or when you need to send requests in your E2E tests. It’s exactly what we are doing in our tests: we need to send requests to remote SAP systems.

visual – for comparison of expected and actual pages screenshots

And you should decide yourself what is the best option in your case.

Definition of file with test cases

And finally, we need to prepare spec file with our tests. On this step we will create exapleSpec.spec.js file with one test case:

describe('exampleSpec', function () {

    beforeAll(() => {  

        const cookieSettingsDialog = element(by.control({

            controlType: "sap.m.Dialog",

            properties: {title: "Your Cookie Settings"}

        }));

        const acceptAllButton = cookieSettingsDialog.element(by.control({

            controlType: "sap.m.Button",

            properties: {text: "Accept All"}

        }));



        acceptAllButton.click()

    });



    beforeEach(() => {  });



    afterEach(() => {  });



    afterAll(() => {  });



    it('Check Change Version Dialog opening', function () {

        // get button by bindingPath

        const changeVersionButton = element(by.control({

            controlType: "sap.m.Button",

            bindingPath: {

                modelName: "appView",

                propertyPath: "/bShowVersionSwitchInHeader"

            }

        }));

        const changeVersionDialog = element(by.control({

            controlType: "sap.m.Dialog",

            properties: {title: "Change Version"}

        }));



        changeVersionButton.click();

        expect(changeVersionDialog.isDisplayed()).toBeTruthy()

    });

});

In the example test goes to https://openui5.hana.ondemand.com/api/ , clicks on Change Version button and checks that Change Version dialog is opened.

Running

Let’s configure npm script to run the tests. Here you have two options:

Configure spec files for running in conf.js and then configure script in package.json

...

"scripts": { "tests": "uiveri5 ./tests/conf.js" }

...

Configure spec file for running in script in package.json. In this case you can configure only one spec file:

...

"tests": "uiveri5 ./tests/conf.js --specs=./tests/integration/exampleSpec.spec.js"

...

Once we run the script, browser will be started and tests will execute actions we’ve written in spec file. In the end of running report will be generated (default path to report is target/report/screenshots/report.html😞

One more test case in exapleSpec.spec.js

Let’s add one more test case that fills data in search field and checks presence of 1.89.* versions.

it('Check that there are versions 1.89.*', function () {

        const changeVersionDialog = element(by.control({

            controlType: "sap.m.Dialog",

            properties: {title: "Change Version"}

        }));

        const versionSearchField = changeVersionDialog.element(by.control({

            controlType: "sap.m.SearchField"

        }));

        const versionStandardListItems = changeVersionDialog.all(by.control({

            controlType: "sap.m.StandardListItem",

            id: /-versionList-/

        }));



        versionSearchField.sendKeys(`1.89\n`);

        expect(versionStandardListItems.count()).toBeGreaterThan(0);

    });

Running

And run spec file again. In the report we will see 2 test cases:

Conclusion

So you can see that UIVeri5 can be easily configured and you can start using it in quite short period of time 😊

GitHub repository with the example https://github.com/AnastasyaNN/uiveri5-example

In next post see how to configure authentication in UIVeri5 tests.