Excel VBA to select a navigation Tab on a Webpage

Question

Stuck in an area of a webpage and can't seem to figure out how to select any one of the navigation tabs. I've already gotten through coding for the ID, password and a couple of other screens to get to this one. Tried just about every combination of "GetElementBy" that exists (I think) but to no avail. The Tabs aren't in their own frame as far as I can tell. Here's the HTML Code for the tabs. If anyone can help with a quick way of selecting one, it would be greatly appreciated.

<ul class="nav nav-tabs">
    <li ng-class="{active:isSet(1)}" class="active">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(1)">
            Prototypes
        </a>
    </li>
    <li ng-class="{active:isSet(2) || isSet(3)}">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(2);">
            Devices
        </a>
    </li>
    <li ng-class="{active:isSet(4)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(4)">
            Notices
        </a>
    </li>
    <li ng-class="{active:isSet(9)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(9)">
            Assembly Details
        </a>
    </li>
    <li ng-class="{active:isSet(7)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(7)">
            Waivers
        </a>
    </li>
    <li ng-class="{active:isSet(8)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(8)">
            Notifications
        </a>
    </li>
    <li ng-class="{active:isSet(5)}" ng-show="!IsInitialRelease">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(5)">
            Permits
        </a>
    </li>
    <li ng-class="{active:isSet(6)}">
        <a href="" role="tab" data-toggle="tab" ng-click="setTab(6)">
            &nbsp;Search&nbsp;
        </a>
    </li>
</ul>

Answer 1

From the source code, it looks like an Angular site that you are trying to automate using IE VBA Automation.

We can notice 2 things from the source code.

1. Active tab has class="active" attribute set for the li tag.
2. Each li tag contains the hyperlink with an Angular click(ng-click) event.

In this scenario,

1. We can first try to loop through li tags and remove the class="active" attribute.
2. Find the desired tab by matching the hyperlink text and click the hyperlink then set the class="active" attribute for that tab.

these steps may help you to select the desired tab.

Sample code:

Sub demo()
    Dim ie
    Set ie = CreateObject("InternetExplorer.Application")
    ie.Visible = True
    ie.navigate "https://Your_Web_page_address_here..."

    Do While ie.Busy
        Application.Wait DateAdd("s", 1, Now)
    Loop
     
    Set elems = ie.document.getElementsByTagName("li")
    
    For Each elem In elems
     '  Debug.Print (elem.getAttribute("class"))
        If (elem.getAttribute("class")) = "active" Then
        
            elem.removeAttribute ("class")
    
            Exit For
        End If
    Next elem
    
    For Each elem In elems
      '  Debug.Print (elem.innerText)
        If (elem.innerText) Like "*Devices*" Then
            elem.Children(0).Click
            elem.setAttribute "class", "active"
            Exit For
        End If
    Next elem
    
    'ie.Quit
End Sub

You can try to debug the sample code to see how it is working step by step, and further, you can try to modify it based on your requirement.