A common issue of many UI tests is their fragility. The tests have often to be changed when the underlying structure of the UI has changed. So, how can we get rid of this fragility? We need a more abstract API for testing. There are three techniques: Semantic IDs, getter functions or Page Object Pattern.
First, with semantic IDs you create a unique identifier for each element you want to access with a test. This allows an easy access of the element. Disadvantages are that you have to ensure the uniqueness of the ID, and the ID is a kind of implementation detail, and the JavaScript code should be agnostic to them. In the following example, the uniqueness of an element for a list of persons is ensured by creating an ID with the username, which is unique for each element of the list.
In the productive implementation the element investigatorPhoto is created with an ID. Therefore, this.createId( "assignInvestigatorPhoto_" + uniqueID) creates a unique ID for the element.
var investigatorPhoto = new sap.m.Image( this.createId( "assignInvestigatorPhoto_" + username),...
In the element is accessed via the unique ID.
this.getElement = function(vID) {
return sap.ui.getCore().byId(assignInvestigatorListView.createId(vID));
};
test(
"Should sent Request When alerts selected and user clicks on photo,
function() {
var assignIcon = this.getElement("assignInvestigatorPhoto_HAEUPTLE" );
this.oController.setAlertIDs([2,3]);
assignIcon.firePress();
equal( this.oAlertActionAdapter.bAlertsActionCalled, true, "Request sent");
});
The second technique deals with an interface allowing easier access to the elements. In JavaScript view, you could implement getter methods for the relevant elements. This is the recommended approach. The getter functions should also be used in the productive implementation instead of accessing elements via ID, since that involves some overhead and your code should be agnostic to such implementation details.
Another technique is the page object explained in Martin Fowlers blog post: http://martinfowler.com/bliki/PageObject.html
This blog post is part of a series, like the following blog post to stay tuned and get updates about more topics around software engineering with SAPUI5 and JavaScript:
http://scn.sap.com/community/developer-center/front-end/blog/2013/12/12/engineering-in-javascript
