- SAP Managed Tags:
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.
"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."
First, we need to install UIVeri5
Once UIVeri5 is installed, you need to download the Sample UIVeri5 tool from the Github that will help you setup the basic configuration file.
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
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.
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.
Entering text in the Input field can be done using sendKeys method. e.g.
Clicking a button can be done using click method. e.g.
To assert the state of your application, use Expectations. e.g.
Open console in the test folder and execute:
This will download the chromedriver to be used based on the operating system.
Run tests on different browser
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 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.
To enable debugging, start UIVeri5 with debug option.
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 🙂
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 -gOnce 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:
uiveri5This will download the chromedriver to be used based on the operating system.
Run tests on different browser
uiveri5 --browsers=firefoxYou 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 --debugWhen 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 🙂
3 Comments
