I've developed in SAPUI5 pretty much since the launch in 2013. However, one of the areas I never managed to get into was test-driven development. Even after reading blogs like this from john.patterson5
I was encouraged but always found the learning curve to OPA5 and the overhead of writing the tests was too big. You needed to maintain too many files and it was too cumbersome... Yes, I was lazy 😉
Enter the scene Uiveri5, first released in March 2018. I remember reading about it and thought it was "just" another cumbersome tool from SAP. I had started doing some integration tests using Selenium already with Python and didn't want to invest time in something new.
Well, I finally managed to get around to it and boy was I surprised. It was actually really easy and I could very much see this as a tool I could use to finally do more test-driven development.
Before we start, let's see what it is:
It's a maintained open-source testing framework purpose-built for SAPUI5 maintained by SAP. They describe it in the readme as:
Behind the scenes it uses Webdriver which is the same as used in Selenium and Jasmine to establish the test suite and write the tests, there is a limitation to be on UI5 version 1.52.12; 1.54.4; 1.55 and up.
It's all coded in Javascript, so no need to learn Java or Python as you are with Selenium. Also when using tools like Selenium you have to code specifically for the delays and busy indicators, which tends to make the code quite cumbersome and very flaky. With UIveri5 this is all handled by the framework itself, similar to OPA5.
Alright, let's get started. The documentation is actually really good and was enough for me to get a good headstart, but for good measure, let me do some of the steps here and highlight a few places I struggled.
First, we need to install Uiveri5.
So we installed UIveri5 as a global package.
You need to at least two javascript files for it to work. A config file and a test suite. Let's start with the config file in your UI5 app folder in the root create a conf.js.
the baseurl is where you want the browser to open up. So it could be localhost if you are using local development. See my blog series to get started on that. Or use it to go directly to a Fiori launchpad.
Let's use the OpenUI5 sample app as an example.
Clone this repository to your desktop and run npm install.
Now let's create the conf.js file that contains the configuration for the test runner.
Add the following to it:
There are three profiles:
In this blog I will focus on the integration profile, you can check out more here.
Now let's create our first test suite. These are maintained in "spec" files. Start with creating a new file sample.spec.js
Add the following content:
Now let's go through what we just added. We have a test suite named sample. In there three tests (the "it" functions).
The test functions are written with a title, then the actual function. The first is just to load the app and then the function has an expectation that the title of the browser will be OpenUI5 Todo App.
The next is more of an action. Here we find the checkbox for the list item by using the controlType and the binding path. Then we click the item.
Lastly, we check that we only have two columnlist items in our list.
Alright let's run our first test by running this command:
This will automatically download the chromedriver to be used. However if you like me are behind a corporate proxy, you can download it yourself and then use a path to point to it. Look here for reference.
You should now see Chrome opening up and executing your tests and the output should be something like below:
Mine might look at bit different as I added colors to the UIveri5 NPM package. But overall you should see the test being executed and passing.
Let's add another test where we add a new item to the list.
First, we select the input field on top of the list and writes Hello world via the sendKeys function
oInput.sendKeys("Hello World");
Then we hit the enter key by the browser actions
browser.actions().sendKeys(protractor.Key.ENTER).perform();
I was encouraged but always found the learning curve to OPA5 and the overhead of writing the tests was too big. You needed to maintain too many files and it was too cumbersome... Yes, I was lazy 😉
Enter the scene Uiveri5, first released in March 2018. I remember reading about it and thought it was "just" another cumbersome tool from SAP. I had started doing some integration tests using Selenium already with Python and didn't want to invest time in something new.
Well, I finally managed to get around to it and boy was I surprised. It was actually really easy and I could very much see this as a tool I could use to finally do more test-driven development.
Before we start, let's see what it is:
It's a maintained open-source testing framework purpose-built for SAPUI5 maintained by SAP. They describe it in the readme as:
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.
Behind the scenes it uses Webdriver which is the same as used in Selenium and Jasmine to establish the test suite and write the tests, there is a limitation to be on UI5 version 1.52.12; 1.54.4; 1.55 and up.
It's all coded in Javascript, so no need to learn Java or Python as you are with Selenium. Also when using tools like Selenium you have to code specifically for the delays and busy indicators, which tends to make the code quite cumbersome and very flaky. With UIveri5 this is all handled by the framework itself, similar to OPA5.
Alright, let's get started. The documentation is actually really good and was enough for me to get a good headstart, but for good measure, let me do some of the steps here and highlight a few places I struggled.
First, we need to install Uiveri5.
npm install @ui5/uiveri5 -gSo we installed UIveri5 as a global package.
You need to at least two javascript files for it to work. A config file and a test suite. Let's start with the config file in your UI5 app folder in the root create a conf.js.
exports.config = {
profile: 'integration',
baseUrl: 'https://<path to your startpage>',
};the baseurl is where you want the browser to open up. So it could be localhost if you are using local development. See my blog series to get started on that. Or use it to go directly to a Fiori launchpad.
Let's use the OpenUI5 sample app as an example.
Clone this repository to your desktop and run npm install.
Now let's create the conf.js file that contains the configuration for the test runner.
Add the following to it:
exports.config = {
profile: 'integration',
baseUrl: 'http://localhost:8080/index.html'
};There are three profiles:
- integration - default profile for E2E tests
- visual - profile for visual tests
- API - profile for API tests
In this blog I will focus on the integration profile, you can check out more here.
Now let's create our first test suite. These are maintained in "spec" files. Start with creating a new file sample.spec.js
Add the following content:
describe('sample', function () {
it('should load the app',function() {
expect(browser.getTitle()).toBe('OpenUI5 Todo App');
});
it('should display the todo list',function() {
element(by.control({
viewName: 'sap.ui.demo.todo.view.App',
controlType: 'sap.m.CheckBox',
bindingPath:
{path: "/todos/1"}}))
.click();
});
it('should have two items in the list',function() {
expect(element.all(by.control({
viewName: 'sap.ui.demo.todo.view.App',
controlType:'sap.m.CustomListItem'}))
.count()).toBe(2);
});
});
Now let's go through what we just added. We have a test suite named sample. In there three tests (the "it" functions).
The test functions are written with a title, then the actual function. The first is just to load the app and then the function has an expectation that the title of the browser will be OpenUI5 Todo App.
The next is more of an action. Here we find the checkbox for the list item by using the controlType and the binding path. Then we click the item.
Lastly, we check that we only have two columnlist items in our list.
Alright let's run our first test by running this command:
uiveri5This will automatically download the chromedriver to be used. However if you like me are behind a corporate proxy, you can download it yourself and then use a path to point to it. Look here for reference.
You should now see Chrome opening up and executing your tests and the output should be something like below:
Mine might look at bit different as I added colors to the UIveri5 NPM package. But overall you should see the test being executed and passing.
Let's add another test where we add a new item to the list.
it('should add the hello world to the todo input field',function() {
var oInput = element(by.control({
viewName: 'sap.ui.demo.todo.view.App',
id: 'addTodoItemInput'
}))
oInput.sendKeys("Hello World");
browser.actions().sendKeys(protractor.Key.ENTER).perform();
});
it('should have three items in the list',function() {
expect(element.all(by.control({
viewName: 'sap.ui.demo.todo.view.App',
controlType:'sap.m.CustomListItem'}))
.count()).toBe(3);
});First, we select the input field on top of the list and writes Hello world via the sendKeys function
oInput.sendKeys("Hello World");
Then we hit the enter key by the browser actions
browser.actions().sendKeys(protractor.Key.ENTER).perform();
Lastly, we check whether we now have three items in the list.
Hopefully, this will help you to get a good start of how to use this tool and also how to do some common actions like adding text etc.
A few pointers are to really read through the documentation, it's quite comprehensive!
Also, make use of the UI5 Inspector chrome plugin to easily get id's or look for controls, etc.
From SAPUI5 Version 1.74, there will be a recorder available to create these test scripts, read more details in maxim.naidenov blog
Thanks for tuning in.
Until next time
- SAP Managed Tags:
8 Comments
