Skip to Content
Product Information

SAPUI5 Test Automation using UIVeri5

I have developed SAPUI5 application for the past 5 years since i joined SAP and i have always run far from the word “Automation”. The only automation i had done in the past was QUnit which was not as useful. Now that TDD (Test Driven Development) is evolving, automation has become one of the most important aspect.

We have automation tools like OPA5, but it is very difficult to maintain large test cases, files and no screenshots for evidence. UIVeri5 solves all these issues. Initially I thought it is was “just” another cumbersome tool. But when i got hang of it, it was really easy and simple. In fact you can get started with UIVeri5 in 5 mins.

What is UIVeri5?

UIVeri5 is an E2E testing framework for SAPUI5-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 SAPUI5 applications.” 

Let’s get started

First, we need to install UIVeri5

npm install @ui5/uiveri5 -g

Once UIVeri5 is installed, you need to download the Sample UIVeri5 tool from the Github that will help you setup the basic configuration file.

Configuration

Open the conf.js file and edit the baseUrl to the path you want the browser to open up. It can be localhost for local development or a Fiori Launchpad url. Put the declarative configuration in the conf.js file. All configuration options are explained in Configuration

exports.config = {
  profile: 'integration',
  baseUrl: '<path to application>'
};

Test Suite

UIVeri5 uses Jasmine framework so the test resides in a spec.js file. Tests in UIVeri5 are written in JavaScript. Because of this it is easy for the application developer to maintain the tests, together with the main code base. UIVeri5 synchronises the test execution with the SAPUI5 rendering in the browser. This avoids the need for manual coding waits and sleeps in the test. One of the hardest parts when writing integration tests with any automation tool is building good control selectors.

Control locators can be very handy to the control level of abstraction and not having to dig down into DOM level. You can find an element using the following syntax. e.g.

element(by.control({id: "saveButton"}));
// or to find multiple elements:
element.all(by.control({id: /saveButton/}));

by.control accepts an object with ID, viewName, viewNamespace, controlType and other properties of the control to look for. The ID can be a string or a regular expression. e.g.

// find an object header with full ID matching "view--foo.[0-9]+" 
// and property data binding for model "JSONModel"
element(by.control({
  id: /^test.[0-9]+/,
  viewName: "ContractList",
  controlType: "sap.m.ObjectHeader",
  bindingPath: {
      path: "/contracts/1", 
      propertyPath: "ContractStatus", 
      modelName: "ViewModel"
  }
});

Entering text in the Input field can be done using sendKeys method. e.g.

it('enter the query in search',function() {
      var TitleText = element(by.control({
        id: /.idProductInput$/,
        controlType : "sap.m.Input",
        interaction : "focus"
      }));
      TitleText.clear();
      TitleText.sendKeys("Laptop");
});

Clicking a button can be done using click method. e.g.

let oElement = element(by.control({
        id: /.saveButton$/,
        controlType: "sap.m.Button"
    }));
oElement.click();

Writing Expectations

To assert the state of your application, use Expectations. e.g.

let oElement = element(by.control({
        id: /.ProblematicStatus$/,
	controlType: "sap.m.Text"
}));
expect(oElement.isPresent()).toBe(true);
expect(oElement.asControl().getProperty("text")).toBe("Problematic");

Run the Test

Open console in the test folder and execute:

uiveri5

This will download the chromedriver to be used based on the operating system.

Run tests on different browser

uiveri5 --browsers=firefox

You will see the test execution in the console and an overview when the test completes. Check the target folder for a visual report with screenshots.

Debugging UIVeri5

Debugging is a little tricky in UIVeri5, since the test is running in the Node.js environment and drives the browser.

To stop on a certain line, add debugger statement to your test.

clickProblematicSave: function () {
        debugger;
        let oElement = element(by.control({
        id: /.saveButton$/,
        controlType: "sap.m.Button"
    }));
    oElement.click();
}

To enable debugging, start UIVeri5 with debug option.

 

uiveri5 --debug

When the browser is loading, please open developer tools using F12 and click on the green hexagon icon as shown below.

A new Node DevTools window is opened and the breakpoint is got.

Hopefully, this blog will help you to get a good start on how to automate your application using UIVeri5 and perform some common actions like clicking button, adding text etc.

Thank you and Keep Automating 🙂

2 Comments
You must be Logged on to comment or reply to a post.