Cloud Load Testing Tutorial: Scripting for SAP Fiori

SAP applications are notoriously difficult to create load testing scripts for because it uses a lot of client-side scripts that need to be executed, and traditional protocol-level tools only download those scripts. We've created a solution for this using a tool called Flood Element, which allows you to use element selectors to interact with the page just like a real user would.

Why should we load test SAP Fiori?

SAP Fiori is generally viewed as a fairly complex web application that can be customised extensively. With this level of available customization there is a substantial amount of complexity with respect to user interface objects and how their properties change when these modifications are carried out.

UI objects can be dynamically inserted to add functionality to the interface depending on business and functional requirements. These functionality changes can break your existing automated test cases requiring you to investigate the issue and update scripting steps accordingly.  Load Testing SAP (especially Fiori) from the cloud should be a top priority.

Figuring out which tool to use and what to target?

It is highly recommended to use a Browser-level tool such as Flood Element to help load test your SAP Fiori implementation. It combines ease of use with scalable load injection using the Flood platform to significantly decrease scripting and execution time compared to a network level load test tool such as JMeter.

Using a Browser level load test tool lets you focus on an object’s properties rather than the network-level requests being made by the client. The most common challenge is figuring out which of an object's properties are the best and most reliable to use.

Ch-ch-ch-ch-changes - How to build tests that won't break with every code change

Applications will tend to change with updates to the application code as well as changes to UI components. Changes to the UI may include adding/removal of buttons for example - each of these components tend to have an ID value containing a numerical order as part of their attributes. This order can change if other grouped objects are added/removed so it's not a good idea to use these for object identification.

 A better use of an object's identification are attributes that are less likely to change if other components are added onto the interface. Any label-based attributes such as a button that allows you to Create a Purchase Order and that has a label property called 'btnCreatePO' - this specific property name will generally only be tied to this button. This is an example of a good and stable property to use.

 Another challenge for object identification is that some objects are nested within multiple levels of <DIV> or <TABLE> tags - this usually causes the object identification string to be very long and virtually unreadable. An example of this is observed here:

let linkNewAccount = await browser.findElement(By.xpath('//*[@id="brandBand_1"]/div/div[1]/div[2]/div/div/div[1]/div[1]/div[2]/ul/li[1]/a'))

 As you can see the number of div tags in this object identification string is numerous and very specific - if changes to any of the these div tags are made then this script step will more than likely fail when the script is run again.

 A much more reliable and elegant object identification string is shown below:

let selIssueType = await browser.findElement(By.xpath("//input[contains(@id, 'issuetype-field')]"))

 The usage of the `contains` method cuts down on the use of long and complex strings while targeting the specific nested object we want to interact with. We simply use the object property (in this case the `id` property) along with the property value.

How do I identify the object properties I need to use?

Inspecting an applications codebase to find some unique properties may seem a little daunting but with today’s tools - it makes it fairly easy for us.

Most popular web browsers come with developer tools to inspect objects and code. Using Google Chrome (my preferred option) enables to get these properties fairly easily with the steps below:

  1. Right click on an element you are interested in seeing the properties for on your target web page and select the Inspect menu item:

This will bring up a sub window with the specific object code highlighted in a pale blue as follows:

Now, you have a number of options available to help you retrieve an objects properties and use them in your script.

2. Click on the elipse (...) icon on the top left hand side of the highlighted blue area.

This will bring up a context menu for copying the specific elements properties in a few different formats.

Copy selector

This will copy the CSS selector object’s properties and will return something similar to the  string below:

#__link1-__clone6

Which can be used in your Element script as follows:

Copy XPath

let obj_itm = By.xpath(‘//*[@id="__link1-__clone6"]’)
await browser.wait(Until.elementIsVisible(obj_itm))

This will copy the full XPath string for the object and will return something similar to the string below:

//*[@id="__link1-__clone6"]

Which can be used in your Element script as follows:

let obj_itm = By.xpath(‘//*[@id="__link1-__clone6"]’)
await browser.wait(Until.elementIsVisible(obj_itm))

Choose Your Own™

A third option is to Choose Your Own specific object properties using some really smart XPath related methods outlined in the next section.

Two extremely useful lines of code that you need to know about

The most useful Flood Element code statements to use with SAP Fiori that not only cover a large amount of Fiori-specific functionality but are also very intuitive to read are demonstrated in the following examples:

1. Using the contains statement with specific object properties

Using a combination of xpath and the 'contains' method we can easily identify a wide variety of often complex object properties in SAP Fiori. This specific statement works by identifying that we need to search for a <span> object that has an <id> property that contains the test 'Supplier-multiinput'. A lot of <span> tags in SAP Fiori can have numerous properties listed.

id="sap.ui.demoapps.rta.fiorielements::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--listReportFilter-btnBasicSearch-I"

This the full ID properties for the search box. Ideally we want to see something that mentions it's a search input box. The closest uniquely identifying feature to show this is a search input button tag called 'btnBasicSearch'. We can use this or we can use a different tag.

let obj_txt_Search = By.xpath("//input[contains(@id, 'btnBasicSearch')]")

If you refer back to the properties and you can see a property called 'placeholder' which is the text that is displayed denoting the object as a Search input box. We can alternatively use this in the following way:

let obj_txt_Search = By.xpath("//input[contains(@placeholder, 'Search')]")

Either way - they key rule to follow is to ensure referring to objects in this manner is to be both unique and easily understood.

2. Using the contains statement with label text or String

Another very useful way of interacting with SAP Fiori objects is to use the text-based label or associated String value. There are many occurrences where labels or strings are present and tied to an object that you would like to interact with.

For example take the Adapt Filters button/link on the SAP Fiori user interface. If you inspect the object properties you can see that there is a String value but it isn't a property we can use the previous code property-based statement on.

We are able to refer to the text using the following syntax combined with a 'contains' code statement as follows:

let obj_itm_AdaptFilters = By.xpath("//bdi[contains(text(),'Adapt Filters')]")

This can apply to a wide variety of objects in SAP Fiori.

Other Common SAP Fiori identification Guidelines

SAP Fiori also has the main home screen presented into different tiles for each area. These tiles have an order that can be changed if there are additional tiles being added. We can utilise a method as per below to ensure any changes to these tiles will still enable our script to function correctly:

let tileEmployeeLookup = By.xpath("//div[contains(@title, 'Employee Lookup')]")

In this case we are looking for a tile that contains the title Employee Lookup since very tile has a title property this should make our script resistant to changes made on this screen.  We can also take advantage of the partialVisibleText method when identifying SAP objects - as follows:

let tileEmployeeLookup = By.partialVisibleText('Employee Lookup')

   This can be an alternative to using the `contains` method above however it's usage needs to be carefully implemented as the text 'Employee Lookup' text needs to be the only instance of it's value on the current application screen.

Taking Your Load Test to the Cloud

Once you have your script created, you can upload it to Flood to execute it with 100’s or 1,000’s of concurrent users and try your hand at load testing your SAP Fiori platform. The free trial will provide you with enough node hours to execute this test outlined here for 1 hour with roughly 50 concurrent users.

If you are load testing against SAP Fiori, we’d love to hear from you. Drop us a note and share any ideas that are working for you and feel free to ask our team any of your tough questions!

Start load testing now

It only takes 30 seconds to create an account, and get access to our free-tier to begin load testing without any risk.

Keep reading: related stories
Return to the Flood Blog