The intention of the component helpers is to provide a standard way of accessing HTML and HTML5 components (specifically ExtJS), in a way that understandable, easy to write, easy to maintain, easy to change, and not prone to failing whenever a minor change is made to the application which is being tested.

The preferred method for component look-up is XPath, which is a way of querying the HTML DOM for something matching the given description. For example “Give me the button that has the text Click Me! in it.”

The resulting XPath would look be //button[contains(.,'Click Me!')]

The issue with some of the more complex components is that the HTML from which they are rendered is generated, which makes component identification sometimes involve complicated XPath. It is for this reason XPathUtils provides a common way of asking the question:

“I want thing thing identified in this way.”

For example:

“I want the button by the text of Click Me”

For more complicated scenarios though, there can be cases where two things exist on the same page that also look the same, for example two buttons with the text “OK”. It is for this reason we need to sometimes ask the question:

“I want thing thing identified in this way, that is inside this other thing.

For example:

“I want the button by the text of Click Me, that is inside the mainBody div”

XPathUtils also handles these cases, and in this case would generate the following XPath for you:

//div[@id='mainBody']/descendant::button[contains(.,'Click Me')]

 [divider] [/divider]

HTML Text Input

An HTML input is a used for taking user text input in a single line. It is also a common base of several different types of HTML5 components.

Example Application: form4.html

Example Test: Form4TestBase.java

example_input

Usage:

First Name: <input id="someGlobalId" type="text" name="first" value="" />

Preferred Look-up Means: By name attribute

Methods for look-up via XPathUtils:

Means Method Description
By Name findInputByName(String name)  Generates the XPath for getting an input by name
By Name in Div  findInputByNameInDiv(String inputName, String divId) Generates the XPath for getting an input by name that resides within the div of the specified ID
By ID  findInputById(String id) Generates the XPath for getting the input that has the specified ID attribute
By Text Value  findInputByText(String text) Generates the XPath for getting the input that contains the given text in the value attribute.
By Text Value in Div  findInputByTextInDiv(String text, String divId) Generates the XPath for getting the input that contains the given text in the value attribute as it resides in the div with the given ID

 

HTML Button

An HTML button is a plain old button that takes a single click. Note that most ExtJS form elements are just a button with fancy visuals when they are derived.

Example Application: form4.html

Example Test: Form4TestBase.java

example_button

Usage:

<button id="someGlobalId" type="button">Click Me!</button>

Preferred Means of Look-up: By Text

Methods for look-up via XPathUtils:

Means Method Description
By Text findButtonByText(String text) Generates the XPath for getting a button by the text that it contains
By Text in Div  findButtonByTextInDiv(String buttonText, String divId) Generates the XPath for getting a button by the text it contains as it resides in the div of the specified ID
By ID  findButtonById(String id) Generates the XPath for getting a button with the specified ID attribute

 

HTML Table

An HTML table is anything that looks like it has rows and columns. ExtJS components like grids and tree are rendered as tables. A table consists of table rows (tr), which consists of table data elements (td).

Example Application: form2.html

Example Test: Form2TestBase.java

example_table

Usage:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Preferred Means of Look-up: Anything other than ID

Methods for look-up via XPathUtils:

Means Method Description
Table by Default  String findTable() Assuming there is only one table in the page this generates the XPath to get it
Table in Div  findTableInDiv(String divId) Generates the XPath for getting the table inside the div of the specified ID
Table by ID  findTableById(String id) Generates the XPath to get the table of the specified ID
Table by Text  findTableByText(String text) Generates the XPath to get the table that contains any of the specified text
Table by Text in Div  findTableByTextInDiv(String text, String divId) Generates the XPath to get the table that contains any of the specified text as it resides in the div of the specified ID
Row by Index  findTableRow(int row) Generates the XPath for getting an entire table row and the specified 1-based index
Row by Text  findTableRow(String text) Generates the XPath for getting an entire table row that contains any of the specified text.
Row by Text in Div  findTableRowinDiv(String text, String divId) Generates the XPath for getting an entire table row that contains any of the specified text as it resides in the div of the given ID
Row by Index in Div  findTableRowInDiv(int row, String divId)  Generates the XPath for an entire table row at the specified 1-based index as it sits in the div of the specified ID
Data by Index  findTableRowColumn(int row, int column) Generates the XPath for getting a table data element at the specified 1-based row and column
Data by Text  findTableRowColumn(String text) Generates the XPath for getting a table data element that contains the specified text
Data by Index in Div  findTableRowColumnInDiv(int row, int column, String divId) Generates the XPath for getting the table data element at the specified 1-based row and column inside the div of the given ID
Data by Text in Div  findTableRowColumnInDiv(String text, String divId) Generates the XPath for getting the table data element that contains the given text inside the div of the given ID

 

HTML Select

An HTML Select component is more commonly known as a combo box or a drop-down menu, there the items inside are known as options.

Example Application: form4.html

Example Test: Form4TestBase.java

example_select

Usage:

<select name="someName">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Preferred Means of Look-up: Anything other than ID

Methods for look-up via XPathUtils:

Means Method Description
Select by Name  findSelectByName(String name) Generates the XPath for getting a Select component by its name attribute
Select by Name in Div  findSelectByNameInDiv(String name, String divId) Generates the XPath for getting a Select component by its name attribute in the div of the given ID
Option by Value  findOptionByValue(String value) Generates the XPath for getting the Option component by its value attribute
Option by Value in Select  findOptionByValueInSelect(String value, String name) Generates the XPath for getting the Option component by its value attribute in the Select component of the given name attribute
Option by Text  findOptionByText(String text) Generates the XPath for getting the Option component by the text that it contains
Option by Text in Select findOptionByTextInSelect(String text, String name) Generates the XPath for getting the Option component by the text that it contains inside the Select component of the given name attribute
Option by Row in Select findOptionByRowInSelect(int row, String name) Generates the XPath for getting the Option component by its 1-based row index inside the Select component of the given name attribute
Option by Row findOptionByRow(int row) Generates the XPath for getting the Option component by its 1-based index

 

HTML Radio

An HTML Radio button is an input of type radio, that is used for select one item out of many.

Example Application: form4.html

Example Test: Form4TestBase.java

example_radio

Usage:

<input type="radio" name="group1" value="Milk"  /> Milk 
<input type="radio" name="group1" value="Sugar" /> Sugar

Preferred Means of Look-up: Anything other than ID

Methods for look-up via XPathUtils:

Means Method Description
By Value  findRadioByValue(String value) Generates the XPath for getting the Radio of the given value
By Value in Div  findRadioByValueInDiv(String value, String divId) Generates the XPath for getting the Radio of the given value in the div of the given ID

 

HTML Link

An HTML link uses the <a /> tag to go to another page. There are several ExtJS components like date pickers and buttons (in 4.2 only) that are rendered as links.

Example Application: form4.html

Example Test: Form4TestBase.java

example_link

Usage:

<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

Preferred Means of Look-up: Anything other than ID

Methods for look-up via XPathUtils:

Means Method Description
By Text  findLinkByText(String text) Generates the XPath for getting the link containing the given text
By Text in Div  findLinkByTextInDiv(String text, String divId) Generates the XPath for getting the link containing the given text in the div of the given ID

 

HTML Text Area

An HTML text area is any input that takes multiple lines. Note that the text area in ExtJS is directly rendered as a Text Area.

Example Application: form4.html

Example Test: Form4TestBase.java

example_textarea

Usage:

<textarea name="myTextArea" rows="4" cols="50">
Text goes here
</textarea>

Preferred Means of Look-up: Anything other than ID

Methods for look-up via XPathUtils:

Means Method Description
By Name  findTextAreaByName(String name) Generates the XPath for getting the text area of the given name
By Name in Div  findTextAreaByNameInDiv(String name, String divId) Generates the XPath for getting the text area of the given name in the div of the given ID
By ID  findTextAreaById(String id) Generates the XPath for getting the text area of the given ID
By Text  findTextAreaByText(String text) Generates the XPath for getting the text area that contains any of the specified text
By Text in Div  findTextAreaByTextInDiv(String text, String divId) Generates the XPath for getting the text area that contains any of the specified text in the div of the given ID

 

HTML Check Box

Check boxes are used to denote a boolean state of some item; it is either checked or not. In ExtJS these are actually rendered as buttons.

Example Application: form4.html

Example Test: Form4TestBase.java

example_checkbox

Usage:

<input type="checkbox" name="htmlCheckBoxName" value="HTML Check Box Value" />

Preferred Means of Look-up: Anything other than ID

Methods for look-up via XPathUtils:

Means Method Description
By Name  findCheckboxByName(String name) Generates the XPath for getting the check box of the given name
By Name in Div  findCheckboxByNameInDiv(String name, String divId) Generates the XPath for getting the check box of the given name in the div of the given ID
By Value  findCheckboxByValue(String value) Generates the XPath for getting the check box of the given value attribute
By Value in Div  findCheckboxByValueInDiv(String value, String divId) Generates the XPath for getting the check box with the given value attribute in the div of the given ID

 

Ext JS Message Box

ExtJS Dialogs (or popups) are not actually popups, They are divs that are injected into the root level of the DOM. They are most easily identified by their div class containing  ”x-window”  and an ID which is always auto-generated but that starts with “messagebox”.

Example Application: form1.html

Example Test: Form1TestBase.java

example_extjs_dialog

Ext JS Usage:

Ext.MessageBox.show({
	title: 'ERROR',
	msg: 'Invalid first name',
	buttons: Ext.MessageBox.OK,
});

Resulting HTML:

<div class="x-window">
...
<div>Invalid first name</div>
...
<button><span>OK</span></button>
...
</div>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsMessageBox() Generates the XPath for getting the current dialog
Button by Text  findExtJsMessageBoxButtonByText(String text) Generates the XPath for getting the button containing the given text within the currently displayed message box

 

Ext JS Split Button

A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event of the button.

- http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.button.Split 

Example Application: form2.html

Example Test: Form2TestBase.java

example_extjs_splitbutton

Ext JS Usage:

Ext.create('Ext.button.Split', {
    renderTo: Ext.getBody(),
    text: 'Select a Family',
    menu: new Ext.menu.Menu({
        items: [
            // these will render as dropdown menu items when the arrow is clicked:
            {text: 'Simpsons' },
            {text: 'Flanders' }
        ]
    })
});

Resulting HTML:

<button>
...
<span>Select a family</span>
... 
</button>

However, once the split button is clicked the items are injected into the DOM like with a popup, resulting in the following HTML:

<div>
...
	<span>Simpsons</span>
	...
	<span>Flanders</span>
	...
</div>

The Split Button itself is just a regular button, so it can be located as if it was an HTML Button. Once the Split Button is pressed the resulting popups are referred to as Split Button Menu Items.

Methods for look-up via XPathUtils:

Means Method Description
Menu Item By Text  findExtJsSplitButtonMenuItem(String text) Generates the XPath for getting the Menu Item resulting from clicking on a split button by its text.

 

Ext JS Grid Panel

Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged <table>, GridPanel makes it easy to fetch, sort and filter large amounts of data.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.grid.Panel

It is important to note that an Ext JS Grid Panel can be accessed if it is was a plain HTML Table.

Example Application: form2.html

Example Test: Form2TestBase.java

 

Ext JS Tree Panel

The TreePanel provides tree-structured UI representation of tree-structured data.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.tree.Panel

Example Application: form3.html

Example Test: Form3TestBase.java

example_tree

Ext JS Usage:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
           	{ text: "Alpha, Adam", leaf: true },
           	{ text: "Bravo, Billy", leaf: true }
		{ text: "Power Users", children: [
               		{ text: "Charlie Cherry", leaf: true },
                	{ text: "Delta, DOnny", leaf: true}
            	]},
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

Resulting HTML:

<table class="x-grid-table">
	<tr>
		<td>Alpha, Adam</td>
	</tr>
	<tr>
		<td>Bravo, Billy</td>
	</tr>
	<tr>
		<td><img class="x-tree-expander" />Power Users</td>
	</tr>
</table>

Once the + icon is clicked on new rows are injected into the table:

<table class="x-grid-table">
	<tr>
		<td>Alpha, Adam</td>
	</tr>
	<tr>
		<td>Bravo, Billy</td>
	</tr>
	<tr>
		<td><img class="x-tree-expander" />Power Users</td>
	</tr>
	<tr>
		<td>Charlie, Cherry</td>
	</tr>
	<tr>
		<td>Delta, Donny</td>
	</tr>
</table>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsGrid() Generates the XPath for getting a grid assuming there is only one on the page
By Text  findExtJsGridByText(String text) Generates the XPath for getting a grid that contains any of the given text
By Text in Div  findExtJsGridByTextInDiv(String text, String divId) Generates the XPath for getting a grid that contains any of the given text in the div of the given ID
By Default in Div  findExtJsGridInDiv(String divId) Generates the XPath for getting the grid as it resides in the div of the given ID
Row By Index  findExtJsGridRow(int row) Generates the XPath for getting a grid row at the given 1-based index
Row by Text  findExtJsGridRow(String text) Generates the XPath for getting a grid row by its text
Row by Index in Div  findExtJsGridRowInDiv(int row, String divId) Generates the XPath for getting a grid row by its 1-based index in the div of the given ID
Row by Text in Div  findExtJsGridRowInDiv(String rowText, String divId) Generates the XPath for getting the grid row containing the given text in the div of the given ID
Expand Icon by Row  findExtJsGridRowExpansionNode(int row) Generates the XPath for getting the icon used for expanding and contracting a tree node in the given 1-based index for a row
Expand Icon by Row in Div  findExtJsGridRowExpansionNodeInDiv(int row, String divId) Generates the XPath for getting the icon use for expanding and contracting a tree node in the given 1-based index for a row in the div of the given ID
Expand Icon by Text in Div findExtJsGridRowExpansionNodeInDiv(String text, String divId) Generates the XPath for getting the icon for expanding and contracting a tree node by its text in the div of the given ID
Expand Icon By Text  findExtJsGridRowExpansionNode(String text) Generates the XPath for getting the icon for expanding and contracting a tree node by its text

 

ExtJS Combo

A ComboBox is like a combination of a traditional HTML text <input> field and a <select> field; the user is able to type freely into the field, and/or pick values from a dropdown selection list.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.ComboBox

The combo box field itself is a regular input of type test, so it can be interacted with an if it were an HTML Text Input.

The icon used to display the items within is a type of button, while the items themselves are injected into the DOM like with a popup.

Example Application: form4.html

Example Test: Form4TestBase.java

example_combobox

Ext JS Usage:

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"1", "name":"One"},
        {"abbr":"2", "name":"Two"},
        {"abbr":"3", "name":"Three"},
        {"abbr":"4", "name":"Four"}
    ]
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'ExtJS Combo Box',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

Resulting HTML:

<input type="text" name="optionBox">
...
	<table>
		<td></td>
		<td><!-- This is the button --></td>
	</table>
</input>

The following is injected into the DOM like with the popup with the button within the combo box is pressed:

<div class="x-boundlist-list-ct">
...
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</div>

Methods for look-up via XPathUtils:

Means Method Description
Button by Value  extJsComboBoxButtonByValue(String value) Generates the XPath for the drop-down button in the combo box by that combo box's value
Button by Name  extJsComboBoxButtonByName(String name) Generates the XPath for the drop-down button by the name attribute of that combo box
Item by Row  extJsComboItemByRow(int row) Generates the XPath for the item within the combo box popup once displayed by its 1-based index
Item by Text  extJsComboItemByText(String text) Generates the XPath for the item within the combo box popup once display by its text

 

Ext JS Radio

Similar to checkbox, but automatically handles making sure only one radio is checked at a time within a group of radios with the same name.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.Radio

An Ext JS Radio is actually rendered as a specially formatted button.

example_extjs_radio

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype      : 'fieldcontainer',
	fieldLabel : 'ExtJS Radio Buttons',
	defaultType: 'radiofield',
	defaults: {
		flex: 1
	},
	layout: 'hbox',
	items: [
		{
			boxLabel  : 'M',
			name      : 'size',
			inputValue: 'medium_value',
			checked: true
		}, {
			boxLabel  : 'L',
			name      : 'size',
			inputValue: 'large_value',
		}, {
			boxLabel  : 'XL',
			name      : 'size',
			inputValue: 'xl_value',
	 	}
	]
}

Resulting HTML:

<td>
	<input class="x-form-radio"></input>
	<label>M</label>
</td>
<td>
	<input class="x-form-radio"></input>
	<label>L</label>
</td>
<td>
	<input class="x-form-radio"></input>
	<label>XL</label>
</td>

Methods for look-up via XPathUtils:

Means Method Description
By Text  findExtJsRadioByText(String text) Generates the XPath for getting the radio that contains the given text
By Text in Div  findExtJsRadioByTextInDiv(String text, String divId) Generates the XPath for getting the radio that contains the given text in the div of the given ID

 

Ext JS HTML Editor

Provides a lightweight HTML Editor component.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.HtmlEditor

This HTML Editor works (in most browsers) by existing as an IFrame that contains another page to contain the text. This means that in order to interact with the content of the IFrame the context has to be “switched” from the default context to the IFrame itself.

example_html_editor

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'htmleditor',
	name: 'htmlEditorName',
	value: '<b>This is some HTML</b>'
}

Resulting HTML:

<iframe class="x-html-editor">
	<html>
		<body>
			<b>This is some HTML</b>
		</body>
	</html>
</iframe>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsHtmlEditor() Generates the XPath for getting the HTML Editor assuming there is only one on the page
By Default in Div  findExtJsHtmlEditorInDiv(String divId) Generates the XPath for getting the HTML Editor inside the div of the given ID
By ID  findExtJsHtmlEditorById(String id) Generates the XPath for getting the the HTML Editor of the given ID
Body of IFrame //body After switching the context to the IFrame component use this XPath to get the component that contains the actual text

 

Ext JS Date Field

Provides a date input field with a date picker dropdown and automatic date validation.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.Date

The field itself is just a text input so you can interact with it like a regular HTML Text Input. The date button is a specially formatted button, and the date popup just contains links so you can interact with just like a regular HTML Link.

example_datefield

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'datefield',
	fieldLabel: 'ExtJS Date Field',
	name: 'extJsDateFieldName',
	value: '01-01-2012'
}

Resulting HTML:

<table>
	<td>
		<input name="extJsDateFieldName" value="01/01/2012" />
	</td>
	<td>
		<div><!-- This is the date button --></div>
	</td>
</table>

Methods for look-up via XPathUtils:

Means Method Description
Button by Name  findExtJsDateButtonByName(String name) Generates the XPath for getting the date button by the date field's name
Button by Name in Div  findExtJsDateButtonByNameInDiv(String name, String divId) Generates the XPath for getting the date button by the date field's name in the div of the given ID
Button by Value findExtJsDateButtonByValue(String value) Generates the XPath for getting the date button by the date field's value
Button by Value in Div  findExtJsDateButtonByValueInDiv(String value, String divId) Generates the XPath for getting the date button by the date field's value in the div of the given ID

 

Ext JS Check Box

Can be used as a direct replacement for traditional checkbox fields.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.Checkbox

example_extjs_checkbox

Ext JS Usage:

{
	xtype: 'fieldcontainer',
	fieldLabel: 'ExtJS Checkboxes',
	defaultType: 'checkboxfield',
	items: [
		{
			boxLabel  : 'Anchovies',
			name      : 'AnchoviesBox',
			inputValue: '1',
		}, {
			boxLabel  : 'Artichoke Hearts',
			name      : 'ArtichokeBox',
			inputValue: '2',
			checked   : true,
		}, {
			boxLabel  : 'Bacon',
			name      : 'BaconBox',
			inputValue: '3',
		}
	]						        
}

Resulting HTML:

<td>
	<input class="x-form-checkbox" />
	<label>Anchovies</label>

</td>
...
<td>
	<input class="x-form-checkbox" />
	<label>Artichoke Hearts</label>

</td>
...
<td>
	<input class="x-form-checkbox" />
	<label>Bacon</label>

</td>

Methods for look-up via XPathUtils:

Means Method Description
By Text  findExtJsCheckboxByText(String text) Generates the XPath for getting the check box that contains the given test
By Text in Div  findExtJsCheckboxByTextInDiv(String text, String divId) Generates the XPath for getting the check box that contains the given text in the div of the given ID

 

Ext JS Color Picker

Color picker provides a simple color palette for choosing colors.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.picker.Color

The color options generated are special links, which you can locate using the 6 character hex color code.

example_color_picker

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'colorpicker'
}

Resulting HTML:

...
<a href="#" class="color-000000"></a>
<a href="#" class="color-993300"></a>
<a href="#" class="color-333300"></a>
...

Methods for look-up via XPathUtils:

Means Method Description
By Value  findExtJsColorPickerLinkByValue(String value) Generates the XPath for getting a color option by its 6-character hex color code for example 00FF00
By Value in Div  findExtJsColorPickerLinkByValueInDiv(String value, String divId) Generates the XPath for getting a color option by its 2-character hex color code  in the div of the given ID

 

Ext JS Slider

Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation.

http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.slider.Single

example_extjs_slider

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'sliderfield',
	name: 'sliderName',
	fieldLabel: 'ExtJS Slider',
	value: 50,
	increment: 10,
	minValue: 0,
	maxValue: 100,
	width: 200,
}

Resulting HTML:

<div class="x-slider">
...
</div>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsSlider() Generates the XPath for getting the slider assuming there is only
By Default in Div  findExtJsSliderInDiv(String divId) Generates the XPath for getting the slider in the div of the given ID

 

Sencha Touch Button

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/buttons

sencha_buttons

Methods for look-up via XPathUtils:

Means Method Description
By Text findTouchButtonByText(String text) Generates the XPath for getting a Sencha Touch button by its text
By Text in Div findTouchButtonByTextInDiv(String text, String divId) Generates the XPath for getting a Sencha Touch button by its text inside the div of the given ID
By Occurrence findTouchButtonByOccurrence(int index) Generates the XPath for getting a Sencha Touch button by its 1-based occurrence in the page
By Occurrence in Div findTouchButtonByOccurrenceInDiv(int index, String divId) Generates the XPath for getting a sencha touch button by its 1-based occurrence in the specified div

 

Sencha Touch Spinner Up Button

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/formpanel

sencha_spinner

Methods for look-up via XPathUtils:

Means Method Description
By Default findTouchSpinnerUpByDefault() Returns the XPath for getting a sencha touch spinner up button, assuming its the only one in the page
By Default in Div findTouchSpinnerUpByDefaultInDiv(String divId) Returns the XPath for getting a sencha touch spinner up button inside the given div
By Occurrence findTouchSpinnerUpByOccurrence(int index) Returns the Xpath for getting a sencha touch spinner up button by its 1-based occurrence in the page
By Occurrence in Div findTouchSpinnerUpByOccurrenceInDiv(int index, String divId) Returns the XPath for getting a sencha touch spinner up button inside the div of the given id

 

Sencha Touch Spinner Down Button

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/formpanel

sencha_spinner

Methods for look-up via XPathUtils:

Means Method Description
By Default findTouchSpinnerDownByDefault() Returns the XPath for getting a sencha touch spinner down button, assuming its the only one in the page
By Default in Div findTouchSpinnerDownByDefaultInDiv(String divId) Returns the XPath for getting a sencha touch spinner down button inside the given div
By Occurrence findTouchSpinnerDownByOccurrence(int index) Returns the Xpath for getting a sencha touch spinner down button by its 1-based occurrence in the page
By Occurrence in Div findTouchSpinnerDownByOccurrenceInDiv(int index, String divId) Returns the XPath for getting a sencha touch spinner down button inside the div of the given id

 

Sencha Touch Checkbox

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/formpanel

sencha_checkbox

Methods for look-up via XPathUtils:

Means Method Description
By Name findTouchCheckboxByName(String name) Returns the XPath for getting a sencha touch checkbox by its name
By Name in Div findTouchCheckboxByNameInDiv(String name, String divId) Returns the XPath for getting a sencha touch checkbox by its name in the given div
By ID findTouchCheckboxById(String id) Returns the XPath for getting a sencha touch checkbox by its id

 

Sencha Touch Date Button

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/formpanel

sencha_date_button

Methods for look-up via XPathUtils:

Means Method Description
By Name findTouchDateButtonByName(String name) Returns the XPath for getting a sencha touch date button by its name
By Name in Div findTouchDateButtonByNameInDiv(String name, String divId) Returns the XPath for getting a sencha touch date button by its name in the given div
By ID findTouchDateButtonById(String id) Returns the XPath for getting a sencha touch date button by its id

 

Sencha Touch Select Field

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/formpanel

sencha_select

Methods for look-up via XPathUtils:

Means Method Description
By Name findTouchSelectByName(String name) Returns the XPath for getting a sencha touch select fieldby its name
By Name in Div findTouchSelectByNameInDiv(String name, String divId) Returns the XPath for getting a sencha touch select field by its name in the given div
By ID findTouchSelectById(String id) Returns the XPath for getting a sencha touch select field by its id

You can deal with the items within the popup as if they are Sencha Touch List Items.

sencha_touch_list_item

 

Sencha Touch List Item

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/basiclist

sencha_touch_list_2

Methods for look-up via XPathUtils:

Means Method Description
By Text findTouchListItemByText(String text) Generates the XPath for getting a sencha touch list item containing the given text
By Text in Div findTouchListItemByTextInDiv(String text, String divId) Generates the XPath for getting a sencha touch list item containing the given text in the given div

 

Sencha Touch Radio Button

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/formpanel

sencha_radio

Methods for look-up via XPathUtils:

Means Method Description
By Occurrence findTouchRadioByOccurrence(int index) Returns the XPath for getting a sencha touch radio button by its 1-based occurrence in the page
By Occurrence findTouchRadioByOccurrenceInDiv(int index, String divId) Returns the XPath for getting a sencha touch radio button by its 1-based occurrence in the given div

 

Sencha Touch Slider

Example Application: http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html#demo/sliders

sencha_slider

Methods for look-up via XPathUtils:

Means Method Description
By Occurrence findTouchSliderByOccurrence(int index) Generates the XPath for getting a sencha touch slider by its 1-based occurrence in the page
By Occurrence in Div findTouchSliderByOccurrenceInDiv(int index, String divId)  Generats the XPath for geting a sencha touch slider by its 1-based occurrence in the div of the given ID