Skip to Content
User Experience Insights
Author's profile photo Anastasia Nesterova

E2E tests automation using UIVeri5

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.

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      Hi Anastasia!

      Thanks for the post, because there is so little information on uiver5. I want to ask your opinion.

      Is it possible to use uiver5 to test cloud solutions such as SAP Marketing Cloud?

      I wrote a script and it successfully logs into the system and gets to the initial launchpad. But I can't trigger a click on the tile.

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Andrey!

      Thank you for the question. It should be possible. The crucial thing for UIVeri5 is UI5-based application. If the app isn't UI5-based, in the report you will see the error No UI5 on this page. So first of all check the report (default path is target/report/screenshots/report.html).

      Regarding the tile, please check the locator that you've written. Probably you've made a mistake (if it is, you will see in the report something like NoSuchElementError: No element found using locator).

      Hope it'll help you. If not, feel free to write 🙂

      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      Hi Anastasia!

      On the first page. I see the following technical data. It looks like this is ui5 and uiveri5 should work.

      In the screenshots I want to show what my *.spec.js file looks like and what error I get as a result. Error about timeout, not about the fact that the object was not found.

      There are a lot of IDs for this object in the ui5 Inspector. I tried everything. But the error is still the same: a timeout.

      Thank you for the help!

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Andrey!

      I see the error UI5 dependencies are not loaded on this pageError: UI5 dependencies are not loaded on this page in the console log. This is the main cause for the failure. The error can occur if there is a page reload in your tests (probably due to login or some other reason).

      To avoid it you can use browser.loadUI5Dependencies() function. You can find an example either in post (Option 3. browser.loadUI5Dependencies() usage in function) or in repo.

      Also I've noticed that you don't use report generated automatically once the running is finished. So it can be quite difficult for you to investigate results when you have more tests. It's much more easier to figure out the issues in the generated report. Default path for the report is /target/report/screenshots/report.html

      Hope it'll help you. If not, feel free to write 🙂

      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      Hi Anastasia!

      I added the command to the script. But nothing has changed. Maybe I'm not using it correctly.

      I am also attaching a file with a report. Look at this please.

      Many thanks!

      report.html

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Andrey!

      Examples you can find in the post (Option 3. browser.loadUI5Dependencies() usage in function) or in repo. Please look at it 🙂

      Also in the post you can find several ways to implement authentication with pros and cons for all of them.

      Here is a part of the function from post

      ...
          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 */
              })
      ...

      Hope it'll help you. If not, feel free to write 🙂

       

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Andrey!

      Also the problem can be in default timeouts used in UIVeri5. Try to extend timeouts in conf.js file, e.g.:

      exports.config = {
          profile: 'api',
          ...
      
          timeouts: {
              getPageTimeout: '100000',
              allScriptsTimeout: '300000',
              defaultTimeoutInterval: '300000'
          }
      };

      Hope it'll help you. If not, feel free to write 🙂

      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      Hi Anastasia!

      During the test, I see that the tile is already there and I can click on it. I have a feeling it doesn't understand the selector. That is, it cannot find the object and is waiting for its appearance. I added the console command to the script. And it displays an object that has a click method. Why it doesn't call this method is not clear.

      I attach a report with screenshots.

      Thanks!

      report.zip

      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      It would be great if you tried the script on the trial version of the SAP Marketing Cloud.

      Thanks!

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Andrey!

      There is the following statement in the report:

      Execute 'click' on element with locator 'by.control({"controlType":"sap.m.TileContent","bindingPath":{"path":"","propertyPath":"/config/display_info_text"},"ancestor":{"controlType":"sap.m.GenericTile","properties":{"header":"Монитор импорта"}}})' and ID '__content1'

      It means that it finds the object and clicks on it successfully.

      Also there is TimeoutError in the report, it may occur due to default timeouts used in UIVeri5. Try to extend timeouts in conf.js file. If it doesn't help, try to use browser.driver.wait() function to wait while page is fully reloaded. Examples for timeouts configuration and browser.driver.wait() function usage you can find above in previous comments browser.driver.wait() and timeouts

      Hope it'll help you. If not, feel free to write 🙂

      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      Hi Anastasia!

      The situation has not changed with the timeout.

      Maybe in Marketing Cloud It doesn't work.

       

      Thank you very much for your help!

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Andrey!

      Want to tell you one more quite important thing. It seems you don't understand how JavaScript, that UIVeri5 uses, works under the hood. JavaScript is asynchronous language and executes commands not one after another. And when we use promises (actually browser.loadUI5Dependencies() function returns promise and we have to handle it in then callback). If you aren't familiar with the way how JavaScript handles promises, please find the information. It'll help you in your further development.

      Also if you need to wait for a while in UIVeri5 tests it makes sense to use browser.driver.wait() function.

      Example with browser.driver.wait() and browser.loadUI5Dependencies() functions:

      ...
          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 */
              })
      ...

      Hope it'll help you. If not, feel free to write 🙂

      Author's profile photo Cynthia He
      Cynthia He

      Hi Anastasia,

      May I know ,Once we use UIveri5 to testing the UI, do we have any tools to caculate the coverage.

       

       

      BR,

      Cynthia

      Author's profile photo Anastasia Nesterova
      Anastasia Nesterova
      Blog Post Author

      Hi Cynthia,

      I can't help you with it. I haven't tried it yet.

       

      Best regards,

      Anastasia