jQuery UI is a jQuery user-interface library. It provides interactions, widgets, effects, and theming to build rich Internet applications. jQuery UI provides a number of UI widgets such as accordion, datepicker, slider, dialog, and tabs.
These widgets are built using a number of low-level HTML elements, such as DIVs, unordered lists, and input tags. While Selenium can recognize these elements individually, we can build support for Selenium to recognize these controls as native jQuery UI widgets. We can then perform native operations supported by jQuery framework.
In this recipe, we will implement support for the jQuery UI tab widget.
Visit http://jqueryui.com/demos/tabs/ to understand more about the jQuery UI tabs widget. Explore how they are implemented along with various options, methods, and events related to this widget.
Similar to the WebTable
extension class we created earlier, we will create a JQueryUITab
class to represent the tab widget in Selenium by following the ensuing steps:
JQueryUITab
class with setter and getter properties:package com.secookbook.examples.chapter09; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebElement; import org.openqa.selenium.internal.WrapsDriver; import java.util.List; public class JQueryUITab { private WebElement _jQueryUITab; public JQueryUITab(WebElement jQueryUITab) { set_jQueryUITab(jQueryUITab); } public WebElement get_jQueryUITab() { return _jQueryUITab; } public void set_jQueryUITab(WebElement _jQueryUITab) { this._jQueryUITab = _jQueryUITab; } }
public int getTabCount() { List<WebElement> tabs = _jQueryUITab.findElements(By.cssSelector(".ui-tabs-nav > li")); return tabs.size(); }
public String getSelectedTab() { WebElement tab = _jQueryUITab.findElement(By .cssSelector(".ui-tabs-nav > li[class*='ui-tabs-selected']")); return tab.getText(); }
public void selectTab(String tabName) { int idx = 0; boolean found = false; List<WebElement> tabs = _jQueryUITab.findElements(By.cssSelector(".ui-tabs-nav > li")); for (WebElement tab : tabs) { if (tabName.equals(tab.getText().toString())) { WrapsDriver wrappedElement = (WrapsDriver) _jQueryUITab; JavascriptExecutor driver = (JavascriptExecutor) wrappedElement .getWrappedDriver(); driver.executeScript( "jQuery(arguments[0]).tabs().tabs('select',arguments[1]);", _jQueryUITab, idx); found = true; break; } idx++; } // Throw an exception if specified tab is not found if (found == false) throw new IllegalArgumentException("Could not find tab '" + tabName + "'"); }
JQueryUITab
class in a sample test, with the following code:package com.secookbook.examples.chapter09; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.By; import static org.junit.Assert.*; import org.junit.After; import org.junit.Before; import org.junit.Test; public class JQueryUITabWidgetTest { private WebDriver driver; @Before public void setUp() { driver = new FirefoxDriver(); driver.get("http:// cookbook.seleniumacademy.com/jQueryUITabDemo.html"); } @Test public void testjQueryUITabWidget() { JQueryUITab tab = new JQueryUITab(driver.findElement(By.cssSelector("div[id=MyTab][class^=ui-tabs]"))); // Verify Tab Widget has 3 Tabs assertEquals(3, tab.getTabCount()); // Verify Home Tab is selected assertEquals("Home", tab.getSelectedTab()); // Select Options Tab and verify it is selected tab.selectTab("Options"); assertEquals("Options", tab.getSelectedTab()); // Select Admin Tab and verify it is selected tab.selectTab("Admin"); assertEquals("Admin", tab.getSelectedTab()); // Select Home Tab tab.selectTab("Home"); } @After public void tearDown() { // Close the browser driver.quit(); } }
The JQueryUITab
class was ready for use in testing the tab widget. The JQueryUITab
class accepts a WebElement
object passed to its constructor. To retrieve the number of tabs in a tab widget, we passed the tab element. Internally, the Tab widget defines an unordered list for tab headers. We located these headers using the cssSelector()
method of the By
class in a WebElement
list using the findElements()
method. We got the count of the tabs by looking at the list size:
List<WebElement> tabs = _jQueryUITab.findElements(By.cssSelector(".ui-tabs-nav > li")); return tabs.size();
To retrieve the selected tab name, we used a similar cssSelector()
method with a filter to locate the <li>
element whose class was ui-tabs-selected
. When we select a tab in the tab widget, the jQuery framework adds all these class attributes to the <li>
element internally, as shown in the following code:
WebElement tab = _jQueryUITab.findElement(By.cssSelector(".ui-tabs-nav > li[class*='ui-tabs-selected']")); return tab.getText();
Finally, to select a tab in the tab widget, we were required to execute the jQuery native API functions. The tab widget has a method to select a tab by its index. However, selecting a tab by its index may not be user-friendly. Therefore, we accept the name of the tab and then find out its index internally, using the following code:
int idx=0; List<WebElement> tabs = _jQueryUITab.findElements(By.cssSelector(".ui-tabs-nav > li")); Iterator<WebElement> itr = tabs.iterator(); while(itr.hasNext()) { WebElement element = itr.next(); if(tabName.equals(element.getText().toString())) break; idx++; }
Then, we call the native jQuery API using JavaScriptExecutor
and pass the index to the select
method of the Tab widget, using the following code:
WrapsDriver wrappedElement = (WrapsDriver) _jQueryUITab; JavascriptExecutor driver = (JavascriptExecutor) wrappedElement.getWrappedDriver(); driver.executeScript("jQuery(arguments[0]).tabs().tabs('select',arguments[1]);",_jQueryUITab,idx); }
3.133.150.142