Alternatives to Opa5 Default Selectors and Click Solutions Using jQuery

OPA5 does not always behave the way we think it would. A Press action may result in no item being pressed at all, or could result in the object being pressed when we only wanted to select the object. For that reason jQuery comes as a second solution to resolve some inaccuracies with OPA5.

This article assumes that you have some experience using jQuery and OPA5.

Selecting an Object in jQuery

Selecting an object in jQuery is certainly not unknown, but in OPA5 the process is different. Using jQuery as it is mentioned on the documentation online will result in searching for DOM elements that are available on the test page, and not in the IFrame, which is the “second screen” generated in OPA testing.

clickButton: function(){
     return this.waitFor({
          success: function(){
               //selecting the ids that end with "-footer" currently appearing in the DOM
               var oFooterCaptured = Opa5.getJQuery()("[id$='-footer']").children()[1];
               //get the ID of that element
               var ID = oFooterCaptured.id;

               return this.waitFor({
                    searchOpenDialogs: true,
                    matchers: function(oControl){
                         //make sure the ID of the object equals to that of the wanted object
                         return oControl.getId().indexOf(ID) !== -1;
                    },
                    success: function(oButtons){
                         //press the button
                         oButtons[0].firePress();
                    }
               });
          }
     });
}

Notice here that Opa5.getJQuery() instead of the standard $(). This built-in method to OPA5 will capture the DOM elements that are inside of the IFrame, unlike the standard $().

It is possible to notice here one benefit of using jQuery over the OPA5 built-in parameter ID: the ID does not need to be completely given. It would be possible to give any string that is contained within the ID of an object and jQuery would return a list of possible objects.

Also, notice that only the success part is used in the first waitFor. This works in OPA5: you do not need to provide matchers, ID, or any other attribute for the waitFor. You can get that information in the OPA5 cookbook.

The firePress method is offered by SAPUI5 to trigger events. This could be used as a replacement to the Press action.

Alternatives to the Standard Press Operation

selectElementInList: function(index){
return this.waitFor({
     id: "list",
     success: function(list){
          return this.waitFor({
               controlType: "sap.m.RadioButton",
               success: function(oRadios){
                    //selecting a radio button by tapping on it
                    oRadios[index].$().trigger("tap");
               },
          });
     }
});
}

The standard action Press that OPA5 gives is not always fitting for the different scenarios that must be handled. If a Press does not do the job, it is possible to use the jQuery functions to handle the task. A $() is the only thing that is required after having mentioned the object that you want to use some jQuery functions on. This time, I am using the trigger function of jQuery, but other functions can be used.

In the above code sample, I used trigger(“tap”) because the firePress method and the Press action could not select the radio button. The method firePress is indeed another alternative to using the standard Press operation. There are many other methods that could be useful that fire events available in the SAPUI5 documentation.

jQuery in OPA5 is certainly a useful tool that I added to my toolbox. I hope it will be the same for you.

Edit: You can also use a certain notation to cover IDs based only on some part of the ID using OPA5. In other words, you can use regexes in OPA5 to find your ID. Below is an example of this functionality.

iSelectAnItemInList: function(){
					      return this.waitFor({
						      id: /^__item5-__/,
						      success: function(oItems){
							      //oItems is all the items of the table
							      oItems[0].$().trigger("tap");
						      }
					      });
				      }

The ID above means that I am taking all the IDs starting with “__item5-__”.

-Alexandre Therrien