AngularUI Bootstrap Tabs Support

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

About Support

TestComplete can recognize AngularUI Bootstrap Tabs 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 Tabs controls:

• .nav-tabs

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 Tabs controls, the following requirements must be met:

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

  AngularUI Bootstrap Tabs controls are based on UL web elements and, thus, have no text content. Because of this, the objects that correspond to Tabs 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 Tabs 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=\"tabs\" class=\"nav nav-{{tabset.type || 'tabs'}}\" 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-tabs")).attr("role", "tabs");
      });
    ...
    });
    

    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 Tabs 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