AngularUI Bootstrap Pills Support

Information in this topic applies only to web tests that implement the classic approach. In cross-platform web tests, TestComplete recognizes third-party controls as standard web controls.

About Support

TestComplete can recognize AngularUI Bootstrap Pills controls in web applications. It provides special properties and methods that let you retrieve the controls data and simulate user actions on the controls (see below).

TestComplete recognizes instances of the following classes and their descendants as AngularUI Pills controls:

• .nav-pills

Supported Versions

Supported component versions: AngularUI Bootstrap 1.1.2 and later.

Requirements

In order for TestComplete to be able to work with AngularUI Bootstrap Pills controls, the following requirements must be met:

• Any role other than presentation must be assigned to the control.

  AngularUI Bootstrap Pills controls are based on UL web elements and thus have no text content. Because of this, the objects that correspond to Pills controls are excluded from the Tree object model. See, Web Elements Included in and Excluded From the Object Hierarchy.

  To make TestComplete recognize AngularUI Bootstrap Pills controls, you need to perform either of the following:

  • Modify the control's template - ui-bootstrap-tpls-N.N.N.js. Open the template file, locate the angular.module().run routine and append the role attribute to UI element declaration:

    angular.module("uib/template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
    ...
        " <ul role=\"pills\" class=\"nav nav-{{tabset.type || 'pills'}}\" ng-class=\"{'nav-stacked': vertical, 'nav-justified': justified}\" ng-transclude></ul>\n" +
    ...

    This approach is suitable if you have access to sources of an Angular framework.

  • Append the role attribute dynamically during the initialization of the angular controller:

    app.controller('myCtrl', function($scope) {
    ...
      angular.element(document).ready(function () {
        angular.element(document.querySelectorAll(".nav-pills")).attr("role", "pills");
      });
    ...
    });
    

    This approach is suitable when you have no access to sources of an Angular framework. For example, when it is loaded from a content delivery network (CDN).

• A license for the TestComplete Web module.

• The AngularUI Control Support plugin. This plugin is installed and enabled automatically.

  If you experience issues when working with the controls, select File > Install Extensions from the TestComplete main menu and check whether the plugin is active. (You can find the plugin in the Web group.) If the plugin is not available, run the TestComplete installation in the Repair mode.

Members

When testing AngularUI Bootstrap Pills controls, you can use properties and methods specific to these controls, as well as properties and methods that TestComplete applies to onscreen objects. For the full list of available properties and methods, see the following topics:

See Also

List of AngularUI Controls