Handling jquery tabs in Selenium WebDriver

Question

Trying to automate our internal web-application using Java and Selenium WebDriver.

On one of the page, application uses jquery ui tabs and HTML for the same is as follows.

<div id="tabs" class="addressSelectionTabs ui-tabs ui-widget ui-widget-content ui-corner-all">
    <div id="verticalTabs" style="">
    <ul class="addressSelectionUl ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top">
            <a href="#Telephony">Landline 1</a>
        </li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
            <a href="#TelephonyFeatures">Landline 2</a>
        </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#Other">Others</a>
        </li>
    </ul>
    </div>

Trying to read the elements present in all these 3 tabs; but able to locate elements only on the active tab and not able to switch to remaining tabs.

Could someone help me to switch other tabs, please.

Below is the code that used up to now:

driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

            driver.findElement(By.linkText("Landline 1")).click();

            List<WebElement> ll1 = driver.findElements(By
                    .xpath("//img[contains(@src,'/cmc/images/treeview/folder-closed.gif')]"));
            for (int i = 0; i < llf1.size(); i++)
            {
                llf1.get(i).click();
            }

driver.findElement(By.linkText("Landline 2")).click();

            List<WebElement> ll2 = driver.findElements(By
                    .xpath("//img[contains(@src,'/cmc/images/treeview/folder-closed.gif')]"));
            for (int i = 0; i < llf1.size(); i++)
            {
                llf1.get(i).click();
            }


            driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

            driver.findElement(By.linkText("Others")).click();

            List<WebElement> discount = driver.findElements(By
                    .xpath("//img[contains(@src,'/cmc/images/treeview/folder-closed.gif')]"));
            for (int i = 0; i < discount.size(); i++)
            {
                discount.get(i).click();
            }

Thank You!

still remains on the first active tab (Landline 1) - this tab is active from the page gets loaded.. — PraveenKS

Jelleh Jelleh · Accepted Answer · 2015-11-11T11:38:53

I know this is an old post but have you considered using Xpaths? I am working on a similar set of tests and am having no trouble switching between tabs and clicking elements on different tabs. Obviously you cannot click an element on a tab until that tab becomes active by clicking on it.

So you could try something like to switch between tabs:

driver.findElement(By.Xpath("//a[@href='#Telephony']")).Click();
driver.findElement(By.Xpath("//a[@href='#TelephonyFeatures']")).Click();

Also, using Xpaths you can use Firebug/FirePath within Firefox to check that your XPaths work.

Another point to note is that I'm using the Selenium's PageFactory to model my pages and then writing seperate tests that interact with the Page Objects.

The PageObject would map the elements like this:

[FindsBy(How = How.Xpath, Using = "//a[@href='#Telephony']"] private IWebElement TelephonyTab;

And would include a method for clicking it such as:

public IWebElement ClickTelephonyTab()
{
   TelephonyTab.Click();
   return TelephonyTab;
}

So to switch tabs within your tests you can just do:

YourPage.ClickTelephonyTab();

Handling jquery tabs in Selenium WebDriver

1 Answers