jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate

All Forums
Recent Posts
Log In

Search jQuery

jQuery Forum

Screen name:
john.jian.fang

john.jian.fang's Profile

4 Posts

9 Responses

0 Followers

Activity Trend

Last 30 days

Last 30 days
Date Interval

From Date :

To Date :

Loading Chart...

Posts
Responses
PM

Show:

Expanded view
List view

Private Message

Use jQuery UI autocomplete for Firefox plugin
[1Reply]
- 01-Jul-2010 07:50 PM
- Forum: Using jQuery UI
Hi,

I am working a firefox plugin called Trump for the Tellurium automated testing framework. I included jQuery UI widget autocomplete, but seems it does not work in Trump.

The code snippet is as follows,

Editor.prototype.switchToCustomizeTab = function(){
    document.getElementById("editorTabs").selectedItem = document.getElementById("customizeTab");
    var uitypes = tellurium.getRegisteredUiTypes();
    logger.debug("Get registered UI types: " + uitypes.join(", "));
    teJQuery("#uiType").autocomplete("option", "source", uitypes);
};

From debug, I can see uitypes has been populated, but I tried on the UI, the autocomplete does not work.
The UI portion is as follows,

      <row align="center">
          
          <label control="commandTarget" value="&type.label;"/>
          <hbox flex="1">
          <textbox flex="1" disabled="true" id="uiType" oninput=""/>

           </hbox>
      </row>

The project can be viewed at:

http://code.google.com/p/aost/source/browse/#svn/trunk/tools/firefox-plugin

or check out from

http://aost.googlecode.com/svn/trunk/tools/firefox-plugin

To run the plugin, simply run

> ant

task and install the xpi file in the dist directory in Firefox 3.

Any hints on what was wrong?

Thanks in advance,

Jian

Use Tellurium to test jQuery UI widgets

[1Reply]

02-Jun-2010 07:51 PM
Forum: Using jQuery UI

Tellurium automated testing framework, or Tellurium in short, provides support to describe a UI widget or a set of nested UI objects as a Tellurium widget. Tellurium widgets have the advantage that we can use the widget directly in our test code just like a regular tellurium UI object and we do not need to deal with individual UIs in the widget at the link or button level any more. What we need to do is to call the methods defined in the Tellurium widget. Another advantage is that once the widget is defined, we can use it anywhere we want by simply including the compiled jar file. We take jQuery UI widgets, more specifically, the Date Picker widget as an example to demonstrate how to define jQuery UI Tellurium widgets and how to use them directly in your test code.

Tellurium Date Picker Widget

The jQuery UI Date Picker widget can be presented as a Tellurium Widget as follows.

class DatePicker extends JQueryUiWidget {
  void defineWidget() {

    ui.Container(uid: "DatePicker", clocator: [tag: "div", class: "ui-datepicker ui-widget ui-widget-content"]) {
      Container(uid: "Header", clocator: [tag: "div", class: "ui-datepicker-header"]) {
        UrlLink(uid: "Prev", clocator: [class: "ui-datepicker-prev"])
        UrlLink(uid: "Next", clocator: [class: "ui-datepicker-next"])
        Container(uid: "Title", clocator: [tag: "div", class: "ui-datepicker-title"]) {
          TextBox(uid: "Month", clocator: [tag: "span", class: "ui-datepicker-month"])
          TextBox(uid: "Year", clocator: [tag: "span", class: "ui-datepicker-year"])
        }
      }
      StandardTable(uid: "Calendar", clocator: [class: "ui-datepicker-calendar"]) {
        TextBox(uid: "{header: 1} as Sunday", clocator: [tag: "span", text: "Su"])
        TextBox(uid: "{header: 2} as Monday", clocator: [tag: "span", text: "Mo"])
        TextBox(uid: "{header: 3} as Tuesday", clocator: [tag: "span", text: "Tu"])
        TextBox(uid: "{header: 4} as Wednesday", clocator: [tag: "span", text: "We"])
        TextBox(uid: "{header: 5} as Thursday", clocator: [tag: "span", text: "Th"])
        TextBox(uid: "{header: 6} as Friday", clocator: [tag: "span", text: "Fr"])
        TextBox(uid: "{header: 7} as Sunday", clocator: [tag: "span", text: "Sa"])
        UrlLink(uid: "{row: any, column: any} as D1", clocator: [text: "1"])
        UrlLink(uid: "{row: any, column: any} as D2", clocator: [text: "2"])
        UrlLink(uid: "{row: any, column: any} as D3", clocator: [text: "3"])
        UrlLink(uid: "{row: any, column: any} as D4", clocator: [text: "4"])
        UrlLink(uid: "{row: any, column: any} as D5", clocator: [text: "5"])
        UrlLink(uid: "{row: any, column: any} as D6", clocator: [text: "6"])
        UrlLink(uid: "{row: any, column: any} as D7", clocator: [text: "7"])
        UrlLink(uid: "{row: any, column: any} as D8", clocator: [text: "8"])
        UrlLink(uid: "{row: any, column: any} as D9", clocator: [text: "9"])
        UrlLink(uid: "{row: any, column: any} as D10", clocator: [text: "10"])
        UrlLink(uid: "{row: any, column: any} as D11", clocator: [text: "11"])
        UrlLink(uid: "{row: any, column: any} as D12", clocator: [text: "12"])
        UrlLink(uid: "{row: any, column: any} as D13", clocator: [text: "13"])
        UrlLink(uid: "{row: any, column: any} as D14", clocator: [text: "14"])
        UrlLink(uid: "{row: any, column: any} as D15", clocator: [text: "15"])
        UrlLink(uid: "{row: any, column: any} as D16", clocator: [text: "16"])
        UrlLink(uid: "{row: any, column: any} as D17", clocator: [text: "17"])
        UrlLink(uid: "{row: any, column: any} as D18", clocator: [text: "18"])
        UrlLink(uid: "{row: any, column: any} as D19", clocator: [text: "19"])
        UrlLink(uid: "{row: any, column: any} as D20", clocator: [text: "20"])
        UrlLink(uid: "{row: any, column: any} as D21", clocator: [text: "21"])
        UrlLink(uid: "{row: any, column: any} as D22", clocator: [text: "22"])
        UrlLink(uid: "{row: any, column: any} as D23", clocator: [text: "23"])
        UrlLink(uid: "{row: any, column: any} as D24", clocator: [text: "24"])
        UrlLink(uid: "{row: any, column: any} as D25", clocator: [text: "25"])
        UrlLink(uid: "{row: any, column: any} as D26", clocator: [text: "26"])
        UrlLink(uid: "{row: any, column: any} as D27", clocator: [text: "27"])
        UrlLink(uid: "{row: any, column: any} as D28", clocator: [text: "28"])
        UrlLink(uid: "{row: any, column: any} as D29", clocator: [text: "29"])
        UrlLink(uid: "{row: any, column: any} as D30", clocator: [text: "30"])
        UrlLink(uid: "{row: any, column: any} as D31", clocator: [text: "31"])
        TextBox(uid: "{row: all, column: all}", 
           clocator: [class: "ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"], self: "true")
      }
    }
  }
...
}

The Date Picker header is a Container with two URL Links for the "prev" and "next" button and Month and Year are TextBoxes.

The dynamic data Grid of the days of the current month is represented by the Tellurium StandardTable object, which includes headers from Sunday to Monday and days. Due to the dynamic nature of the days, we use Tellurium UID Description Language (UDL) to define each day with row and column to be "any" positions. Also, we use ID such as D1 to reference the day.

With the above UI module, we define the following methods for the Date Picker widget.

  public String getYear(){
    getText("DatePicker.Header.Title.Year");
  }

  public String getMonth(){
    getText("DatePicker.Header.Title.Month");
  }

  public void prev(){
    click("DatePicker.Header.Prev")
  }

  public void next(){
    click("DatePicker.Header.Next")
  }

  public void selectDay(int day){
    String uid = "DatePicker.Calendar.D" + day;
    mouseOver(uid);
    click(uid);
    mouseOut(uid);
  }

  public void selectFriday(int week){
    String uid = "DatePicker.Calendar[" + week + "][Friday]";
    mouseOver(uid);
    click(uid);
    mouseOut(uid);
  }

  public String getMonthYear(){
    String month = getText("DatePicker.Header.Title.Month");
    String year = getText("DatePicker.Header.Title.Year");

    return "${month} ${year}";
  }

Use Tellurium jQuery UI Widgets

We can compile the Tellurium jQuery UI Widgets project as a jar file and then use it in our Tellurium testing project.

Load Tellurium jQuery UI Widgets

To load Tellurium jQuery UI Widgets, we need to specify the UI widget name in Tellurium configuration file, TelluriumConfig.groovy.

    widget{
        module{
            //define your widget modules here, for example Dojo or ExtJs
            included="jqueryui"
        }
    }

jQuery UI Date Picker Example

To test the widget, we need a jQuery UI Date Picker example. We download jQuery UI 1.8 and unzip it to the WebContext directory. Then, we can use the Date Picker demos from jQuery UI 1.8.

Create Tellurium Date Picker Widget Test Case

We use the default.html from Date Picker demos as our example. The UI module is defined as follows.

class DatePickerDefaultModule extends DslContext {
    public void defineUi() {
       ui.InputBox(uid: "DatePickerInput", clocator: [id: "datepicker"])
       ui.jQuery_DatePicker(uid: "Default", clocator: [tag: "body"])
    }
...
}

where "jQuery" is the namespace for Tellurium jQuery UI widgets and we use DatePicker as a regular Tellurium UI object. In the meanwhile, we can use the onWidget commands to call methods in the Tellurium Date Picker widgets.

  public void prevMonth(){
    onWidget "Default", click, "DatePicker.Header.Prev"
  }

  public void nextMonth(){
    onWidget "Default", click, "DatePicker.Header.Next"
  }

  public void selectDay(int day){
    onWidget "Default", selectDay, day
  }

  public void selectFriday(int week){
    onWidget "Default", selectFriday, week
  }

  public String getMonthYear(){
    onWidget "Default", getMonthYear
  }
 
  public void toggleInput(){
    click "DatePickerInput"
  }

  public String getSelectedDate(){
    getValue "DatePickerInput"
  }

The test case is defined as follows.

public class DatePickerTestCase extends TelluriumJUnitTestCase {
    private static JettyFileServer server;

    @BeforeClass
    public static void setUp(){
        server = new JettyFileServer(8088, "WebContent");
        server.start();
        connectSeleniumServer();
        useTelluriumEngine(true);
        useEngineLog(true);
   }

    @Test
    public void testDefaultDatePicker(){
        DatePickerDefaultModule datePicker = new DatePickerDefaultModule();
        datePicker.defineUi();
        connectUrl("http://localhost:8088/demos/datepicker/default.html");
        datePicker.toggleInput();
        datePicker.nextMonth();
        datePicker.selectDay(20);
        String date = datePicker.getSelectedDate();
        System.out.println("Selected Date: " + date);

        datePicker.toggleInput();
        datePicker.prevMonth();
        datePicker.selectFriday(2);
        date = datePicker.getSelectedDate();
        System.out.println("Selected Date: " + date);
        date = datePicker.getMonthYear();
        System.out.println("Selected Month and Year: " + date);
    }

    @AfterClass
    public static void tearDown(){
        if(server != null)
            server.shutDown();
    }
}

Summary

Date Picker is a simple example to demonstrate the definition and use of Tellurium Widgets. We can define more jQuery UI widgets and compile them as a jar file, then we can reuse them by simply including the jar file. The example code is available from Tellurium jQuery UI Widget project.

We look forward jQuery experts to join Tellurium team to work on our Widget, Firefox Plugin, and Engine projects. If you are interested, please contact us. Thanks in advance.

next to last selector
[13Replies]
- 18-Mar-2010 05:04 PM
- Forum: Using jQuery
Hi,

I need to implement a next to last selector for our project. I came up with the following code,

jQuery.expr[':'].next_to_last = function(obj, index, m){
var $this = jQuery(obj);

return $this.find(m[3]).last().prev();
};

Is there any problem with this implementation?

Thanks in advance,

John

Using jQuery to implement a web test drive Engine to replace Selenium Core
[2Replies]
- 11-Feb-2010 12:44 PM
- Forum: Using jQuery
Hi,

I am the team lead for the tellurium automated testing framework (tellurium) open source project. One big challenge for us is to implement a new web test drive engine so that we can implement our own test concepts instead of relying on Selenium core.

The main conceptual difference between Tellurium and Selenium is that Tellurium focuses on a nested UI elements or a UI widget instead of each individual UI element. In this way, we can do group locating to find all the UI elements as a whole and cache them for later access. At the same time, we like to keep Selenium APIs, but use jQuery to re-implement them to have very clean code and integrate with our other ideas such as Macro command and UI module partial match for better test performance and test robust.

jQuery is perfect for us to hide browser details and focus on the real functionalities we want to work on. For example, the mouseOver method in Selenium core can be replaced by the following very clear code,

TelluriumApi.prototype.mouseOver = function(locator){
var element = this.cacheAwareLocate(locator);
teJQuery(element).trigger('mouseover');
};

We have a prototype Engine project, which used jQuery a lot for DOM manipulation and event handling, and released the RC1 version today. But there are way too many tasks to implement all the Selenium APIs. Due to limited resource, we really welcome jQuery developers to join our DEV team to help us to build the new Engine.

Does this sound interesting? If you are interested, please contact me.

Thanks in advance,

John

«Prev
Next »

Moderate user : john.jian.fang

Forum

Response title

Attachments