Creating an extension for the jQueryUI tab widget

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.

Getting ready

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.

How to do it...

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:

  1. First, create a 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;
  }
}
  2. Add a method to retrieve the count of tabs available on tab widget, as shown in the following code. We can use this to verify that the tab widget is displaying the expected number of tabs:
    public int getTabCount() {
    List<WebElement> tabs = _jQueryUITab.findElements(By.cssSelector(".ui-tabs-nav > li"));
    return tabs.size();
  }
  3. Add a method to get the name of the selected tab, using the following code:
    public String getSelectedTab() {
  WebElement tab = _jQueryUITab.findElement(By
      .cssSelector(".ui-tabs-nav > li[class*='ui-tabs-selected']"));
  return tab.getText();
}
  4. Add a method to select a tab. We will pass the name of the tab that we want to select to this method by using the following code:
    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
        + "'");
}
  5. Let's implement the 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();
  }
}

How it works...

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);
}

There's more...

Using a similar approach, we can also build support for other widgets in jQuery UI or other UI frameworks such as Yahoo UI, Doojo, and GWT. This provides a neat and clean way to work with custom widgets and UI controls.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.226.66