Testing your SAPUI5 application with OPA5

What is OPA5?

OPA5 (One Page Acceptance Tests) is a testing framework to write JavaScript based acceptance tests for SAPUI5 applications . It hides asynchronicity using a polling mechanism. This ensures clean and readable tests. OPA5 is especially helpful for testing user interactions, inner-app navigation  and data bindings.

Test strategy

The diagram above is a representation of the agile test pyramid concept that was initially designed by Mike Cohn in his book “Succeeding with Agile”. The concept describes the recommended proportions of tests to be implemented for an application on each layer of the test pyramid.

The major reasons behind these proportions are :

• Low-level tests are much faster and stable by nature
  Unit tests and OPA5 tests are much faster and stable compared to system tests. Faster tests give faster feedback that allows to catch issues on an early stage, especially if they are part of a continuous integration pipeline .
• Lower costs to write and maintain the tests
  In contrast to System tests which are more fragile, difficult to maintain and which must be adapted more often, Unit and Component tests are easier to handle because they are running in an isolated context. They run independently and exhaustively, which eases the root cause analysis and thus saves a lot of costly evaluation time .

OPA5 belongs to the component test layer of the test pyramid and benefits from the advantages of fast feedback and low costs.

OPA 5 Best practices

Structure your tests with Journeys & Pages

Writing OPA5 tests seems complicated at first but if you follow some best practices and guidelines you’ll see that your tests become much more stable and less fragile. And having the tests continuously and frequently running in your continuous integration pipeline will give you reliable, fast and precise feedback about the internal quality of your app.

Use SAP Web IDE templates

SAP Web IDE offers commands to help you quickly create skeleton OPA Pages and OPA Journeys.

Use Code Completion in SAP Web IDE

Beside the templates you can use new code completions in SAP WebIDE to create a skeleton for OPA actions, OPA assertions in OPA Pages or a new OPA test in your OPA Journeys.

“OPA”+<Ctrl-Space> OPA Action / Assertion / Test

Use stable ids to identify elements

actions: {
		iEnterTextTextArea_commentArea: function (sComment) {
			return this.waitFor({
				id: "commentArea",
				viewName: "CustomerRefund",
				actions: new EnterText({
					text: sComment
				}),
				errorMessage: "Was not able to find the control with id commentArea"
			});
		}

Locating elements via stable Ids is always recommended because they are the safest locator option and you will never have a problem with finding more than one element. Ids are usually designed to be unique, therefore this locator strategy is more reliable and makes tests more robust.

Use stable OPA5 matchers in case no stable id is available

If no stable id is available, you need to find a different solution. In this case you should use stable OPA5 matchers like I18NText, BindingPath or LabelFor.

return this.waitFor({
	controlType: "sap.m.Title",
	matchers: new I18NText({
		propertyName: "text",
		key: "openBaseSet"
	}),
	success: function (aDialogs) {
		Opa5.assert.ok(true, "Found title with i18n key \"openBaseSet\"");
	},
	errorMessage: "Did not find a title with i18n key \"openBaseSet\""
});

return this.waitFor({
	controlType: "sap.m.StandardListItem",
	matchers: new BindingPath({
		path: "/ProductCollection/0"
	}),
	success: function (aItems) {
		Opa5.assert.ok(aItems[0].getSelected(),
			"The binding path for selected item was matched");
	},
	errorMessage: "The binding path for selected item was not matched"
});

• LabelFor: search associated label of an element

 return this.waitFor({
 	viewName: sViewName,
 	controlType: "sap.m.Input",
 	matchers: new LabelFor({
 		key: "NAME_LABEL"
 	}),
 	actions: new EnterText({
 		text: sName
 	}),
 	errorMessage: "Failed to fulfill Name input"
 })

Use standard OPA Actions

Using OPA5 action instead of writing own success function code ensures that the UI is interactable when an action is executed and subsequent events are triggered.

Learn more about OPA5 actions:

https://openui5.hana.ondemand.com/#/topic/8615a0b9088645ae936dbb8bbce5d01d

iEnterGroupIdInDialog: function (sGroup) {
	return this.waitFor({
		id: "idGroupInput",
		actions: new EnterText({
			text: sGroup
		}),
		errorMessage: "Could not find input idGroupInput"
	});
}

Speedup the OPA5 test runtime by using UI Component mode

Benefits are:

• Faster App startup during test execution as all resources being loaded at once
• UI5 Inspector can be used
• Eases access to Mock Server

Below screenshot shows how the test results look like when starting your OPA5 tests in UI Component mode instead of within an iFrame. In this case your UI Component will run in the same window as your OPA5 Tests.

Further details about OPA startup by using UI Component can be found here.

Use default OPA5 config settings

We recommend to use the default timeouts and polling intervals. Further you should set autoWait: true in the OPA5 config settings in the AllJourney.js file.

Opa5.extendConfig({
    autoWait: true
);

We recommend you to overwrite the default settings for individual waitFor calls only if necessary.

For example, in case of a Message Toast that disappears after a short time unless the user moves the mouse over the message or taps on it. To ensure stable execution of OPA5 tests which manipulate Message Toast elements, it is recommended to explicitly set autoWait parameter to false only for the affected waitFor methods, as shown by the following code snippet:

iShouldSeeMessageToastAppearance: function () {
	return this.waitFor({
		// Turn off autoWait    
		autoWait: false,
		check: function () {
			// Locate the message toast using its class name in a jQuery function    
			return $(".sapMMessageToast").length > 0;
		},
		success: function () {
			Opa5.assert.ok(true, "The message toast was shown");
		},
		errorMessage: "The message toast did not show up"
	});
}

Another sample is in case you want to add an assertion to check that a button is disabled. As mentioned before we recommend you to set autoWait to true in the config settings. As a consequence the button is not found by your waitFor statement as the autoWait property ensures that only interactable elements are considered in the locator results. If you want to find the disabled button you have to set autoWait explicitely to false for this specific waitFor statement as shown in the code snippet below.

iShouldSeeDisabledButton: function () {
	return this.waitFor({
		// Turn off autoWait    
		autoWait: false,
		id: "idButton",
		matchers: [
			// button is disabled
			new Properties({
				enabled: false
			})
		],
		success: function (oButton) {
			Opa5.assert.ok(ok, "Found disabled button");
		},
		errorMessage: "The disabled button cannot be found"
	});
}

Use RegExp to identify elements & match on property values

If a regular expression and a viewName are provided, OPA5 will only look for controls in the view with a matching ID.

RegExp to identify element by ID

this.waitFor({
	id: /myId/,
	viewName: "myView"
});

RegExp to identify element by Properties Matcher

Here we identify “Fluffy Teddy Bear” in the table by title using RegExp. Example has been taken from BulletinBoard app in SAPUI5 Demo Apps.

this.waitFor({
	viewName: sViewName,
	controlType: "sap.m.ObjectIdentifier",
	matchers: [
		// text start with "Peer Groups"    
		new Properties({
			title: new RegExp("^Teddy Bear")
		})
	],
	success: function () {
		Opa5.assert.ok(true, "Teddy Bear is found in the list");
	},
	errorMessage: "Could not find Teddy Bear in the list"
});

We hope that this blog post is helpful to you. If you have further ideas or best practices that you would like to share please add in comments section below.

Happy Testing! ?

If you’re attending SAP TechEd join our CodeJam session together with the colleagues from SAP Web IDE about “Easy Automated Testing in the Cloud with SAP Web IDE”:

• TechEd Las Vegas: Link to CodeJam Session
• TechEd Barcelona: Link to CodeJam Session
• TechEd Bangalore: Link to CodeJam Session will follow

Further Info

Useful links & References

Automated Testing for SAP Fiori Apps (Blog)

Cookbook for OPA5

SAP UI5 Demokit

SAP Web IDE