Components are located using locator expression, which are always in the format of component by method “value”

The intention 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.

This 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”

This is handled using what is called a div expression, which is where you indicated that you want to look inside A for B by stating “A//B”.

 

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: Form4Test.gwen

example_input

Usage:

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

Preferred Look-up Means: By name attribute

Look-up Methods

Example Description
input by name "foo" gets the input field with the name attribute of  "foo"
input by name "bar//foo" looks in the div with ID "bar" for the input with the name attribute of "foo"
input by id "foo" gets the input with the id attribute of "foo"
input by text "foo" gets the input containing the text of "foo"
input by text "bar//foo" looks in the div with the ID of "bar" for the input with the id attribute of "foo"

 

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: Form4Test.gwen

example_button

Usage:

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

Preferred Means of Look-up: By Text

Look-up Methods

Example Description
button by text "foo" Gets the button that contains the text of "foo"
button by text "bar//foo" Looks in the div with the id of "bar" for the button that contains the text "foo"
button by id "foo" Gets the button that has the id attribute of "foo"

 

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: Form2Test.gwen

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

Look-up Methods

Example Description
table by default method Gets the table in the page if there is only one
table by default "bar//" Looks into the div with the id of "bar" for the only table
table by id "foo" Gets the table with the id attribute of "foo"
table by text "foo" Gets the table that contains the text of "foo"
table by text "bar//foo" Looks in the div with the id of "bar" for the table that contains the text of "foo"
tablerow by text "foo" Gets the table row that contains the text of "foo"
tablerow by text "bar//foo" Looks in the div with the id of "bar" for the table row that contains the text of "foo"
tablerow by row "1" Gets the first table row
tablerow by row "bar//foo" Looks in the div with the id of "bar" for the first table row
tabledata by text "foo" Gets the table data that contains the text of "foo"
tabledata by text "bar//foo" Looks in the div with the id of "bar" for the table data that contains the text of "foo"
tabledata by rowcolumn "1,2" Gets the table data that is on row 1 column 2
tabledata by rowcolumn "bar//1,2" Looks in the div with the id of bar for the table data that is on row 1 column 2

 

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: Form4Test.gwen

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

Look-up Methods

Example Description
select by name "foo" Gets the select with the name of "foo"
select by name "bar//foo" Looks in the div with id "bar" for the select with the name "foo"
option by text "foo" Gets the option with the text of "foo"
option by text "bar//foo" Looks in the select component with the name of "bar" for the option with the text of "foo"
option by value "foo" Gets the option with the value attribute of "foo"
option by value "bar//foo" Looks in the select component with the name of "bar" for the option with the value attribute of "foo"
option by row "1" Gets the first option
option by row "bar//1" Looks in the select component with the name of "bar" for the first option

 

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: Form4Test.gwen

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

Look-up Methods

Example Description
radio by value "foo" Gets the radio with the value attribute of "foo"
radio by value "bar//foo" Looks in the div of id "bar" for the radio with the value attribute of "foo"

 

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: Form4Test.gwen

example_link

Usage:

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

Preferred Means of Look-up: Anything other than ID

Look-up Methods

Example Description
link by text "foo" Gets the link with the text containing "foo"
link by text "bar//foo" Looks in the div of id "bar" for the link with the text containing "foo"

 

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

Look-up Methods

Example Description
textarea by id "foo" Gets the text area with the id of "foo"
textarea by name "foo" Gets the text area with the name attribute of "foo"
textarea by name "bar//foo" Looks in the div of id "bar" for the text area with the name attribute of "foo"

 

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

Look-up Methods

Example Description
checkbox by value "foo" Gets the check box with the value attribute of "foo"
checkbox by value "bar//foo" Looks in the div of id "bar" for the check box with the value attribute of "foo"
checkbox by name "foo"  Gets the check box with the name attribute of "foo"
checkbox by name "bar//foo" Looks in the div of id "bar" for the check box with the name attribute of "foo"

 

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: Form1Test.gwen

example_extjs_dialog

Ext JS Usage:

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

Resulting HTML:

<div>
...
<div>Invalid first name</div>
...
<button><span>OK</span></button>
...
</div>

Look-up Methods

Example Description
extjsdialog by text "foo" Gets the Ext JS dialog that contains the text of "foo"
extjsdialog by default method Gets the Ext JS dialog assuming there is only one
extjsdialogbutton by id "foo" Gets the Ext JS dialog button with the id of "foo"
extjsdialogbutton by text "foo" Gets the Ext JS dailog button containing the text of "foo"

 

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: Form2Test.gwen

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.

Look-up Methods

Example Description
extjssplitbuttonitem by value "foo" Gets the menu item within the popup with the value of "foo"

 

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: Form2Test.gwen

 

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: Form3Test.gwen

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>
	<tr>
		<td>Alpha, Adam</td>
	</tr>
	<tr>
		<td>Bravo, Billy</td>
	</tr>
	<tr>
		<td><img />Power Users</td>
	</tr>
</table>

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

<table>
	<tr>
		<td>Alpha, Adam</td>
	</tr>
	<tr>
		<td>Bravo, Billy</td>
	</tr>
	<tr>
		<td><img />Power Users</td>
	</tr>
	<tr>
		<td>Charlie, Cherry</td>
	</tr>
	<tr>
		<td>Delta, Donny</td>
	</tr>
</table>

Look-up Methods

Example Description
extjsgrid by default method Gets the ExtJS grid assuming there is only one
extjsgrid by default "bar//" Looks in the div of id "bar" for the only Ext JS grid
extjsgrid by id "foo" Gets the Ext JS grid with the id of "foo"
extjsgrid by text "foo" Gets the Ext JS grid containing the text of "foo"
extjsgrid by text "bar//foo" Looks in the div of if "bar" for the Ext JS grid that contains the text of "foo"
extjsgridrow by row "1" Gets the first row
extjsgridrow by row "bar//1" Looks in the div of id "bar" for the first row
extjsgridrow by text "foo" Gets the row containing the text of "foo"
extjsgridrow by text "bar//foo" Looks in the div of id "bar" for the row containing the text of "foo"
extjsgridrowexpand by row "1" Get the expand/contract icon in the first row
extjsgridrowexpand by row "bar//1" Looks in the div of id "bar" for the expand/contract icon in the first row
extjsgridrowexpand by text "foo" Gets the expand/contract icon in the row containing the text of "foo"
extjsgridrowexpand by text "bar//foo" Looks in the div of id "bar" for the expand/contract icon in the row containing the text of "foo"

 

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: Form4Test.gwen

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>
...
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</div>

Look-up Methods

Example Description
extjscombobutton by value "foo" Gets the button in the combo box with the value of "foo"
extjscombobutton by value "bar//foo" Looks in the div of id "bar" to get the button in the combo box with the value of "foo"
extjscombobutton by name "foo" Gets the button in the combo box with the name attribute of "foo"
extjscombobutton by name "bar//foo" Looks in the div of id "bar" to get the button in the combo box with the name attribute of "foo"
extjscomboitem by row "1" Gets the combo popup item that is the first in the list
extjscomboitem by text "foo" Gets the combo popup item that contains the text of "foo"

 

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: Form4Test.gwen

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></input>
	<label>M</label>
</td>
<td>
	<input></input>
	<label>L</label>
</td>
<td>
	<input></input>
	<label>XL</label>
</td>

Look-up Methods

Example Description
extjsradio by text "foo" Gets the radio button that contains the text of "foo"
extjsradio by text "bar//foo" Looks in the div of id "bar" for the radio button that contains the text of "foo"

 

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: Form4Test.gwen

Ext JS Usage:

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

Resulting HTML:

<iframe>
	<html>
		<body>
			<b>This is some HTML</b>
		</body>
	</html>
</iframe>

Look-up Methods

Example Description
extjshtmleditor by default method Gets the HTML Editor assuming there is only one in the page
extjshtmleditor by default "bar//" Looks in the div of id "bar" for the HTML Editor
extjshtmleditor by id "foo" Gets the HTML Editor of the id of "foo"
element by xpath "//body" Once the context has been switched to the context of the HTML Editor this is used to get the body that contains the 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: Form4Test.gwen

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>

Look-up Methods

Example Description
extjsdatebutton by value "1/1/2013" Gets the button in the date field that has the value of "1/1/2013"
extjsdatebutton by value "bar//1/1/2013" Looks in the div of id "bar" for the button in the date field that has the value of "1/1/2013"
extjsdatebutton by name "foo" Gets the button in the date field that has the name attribute of "foo"
extjsdatebutton by name "bar//foo" Looks in the div of id "bar" for the button in the date field that has the name attribute of "foo"

 

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 />
	<label>Anchovies</label>

</td>
...
<td>
	<input />
	<label>Artichoke Hearts</label>

</td>
...
<td>
	<input />
	<label>Bacon</label>

</td>

Look-up Methods

Example Description
extjscheckbox by text "foo" Gets the check box that contains the text of "foo"
extjscheckbox by text "bar//foo" Looks in the div of id "bar" for the check box that contains the text of "foo"

 

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: Form4Test.gwen

Ext JS Usage:

{
	xtype: 'colorpicker'
}

Resulting HTML:

...
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
...

Look-up Methods

Example Description
extjscoloroption by value "00ff00" Gets the color option with the color code of "00ff00"
extjscoloroption by value "bar//00ff00" Looks in the div of id "bar" for the color code of "00ff00"

 

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: Form4Test.gwen

Ext JS Usage:

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

Resulting HTML:

<div>
...
</div>

Look-up Methods

Example Description
extjsslider by default method Gets the slider assuming there is only one in the page
extjsslider by default "bar//" Looks in the div of id "bar" for the slider
extjsslider by id "foo" Gets the slider of id "foo"

 

Sencha Touch Button

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

sencha_buttons

Look-up Methods

Example Description
touchbutton by text "foo" Gets the Sencha Touch button with the text of "foo"
touchbutton by text "bar//foo" Gets the Sencha Touch button with the text of "foo" inside the div of ID "bar"
touchbutton by id "foo" Gets the Sencha Touch button with the ID of "foo"
touchbutton by occurrence "2" Gets second Sencha Touch button in the page
touchbutton by occurrence "bar//2" Gets the second Sencha Touch button in the "bar" 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

Look-up Methods

Example Description
touchspinnerup by default method Gets the sencha touch spinner up button assuming there is only one
touchspinnerup by default "bar//" Gets the sencha touch spinner up button in the "bar" div
touchspinnerup by occurrence "2" Gets the second sencha touch spinner up button
touchspinnerup by occurrence "bar//2" Gets the second sencha touch spinner up button in the "bar" div

 

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

Look-up Methods

Example Description
touchspinnerdown by default method Gets the sencha touch spinner down button assuming there is only one
touchspinnerdown by default "bar//" Gets the sencha touch spinner down button in the "bar" div
touchspinnerdown by occurrence "2" Gets the second sencha touch spinner down button
touchspinnerdown by occurrence "bar//2" Gets the second sencha touch spinner down button in the "bar" div

 

Sencha Touch Checkbox

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

sencha_checkbox

Look-up Methods

Example Description
touchcheckbox by id "foo" Gets the sencha touch checkbox with the ID of "foo"
touchcheckbox by name "foo" Gets the sencha touch checkbox with the name of "foo"
touchcheckbox by name "bar//foo" Gets the sencha touch checbox with the name of "foo" in the div of "bar"

 

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

Look-up Methods

Example Description
touchdatebutton by id "foo" Gets the sencha touch date button with the ID of "foo"
touchdatebutton by name "foo" Gets the sencha touch date button with the name of "foo"
touchdatebutton by name "bar//foo" Gets the sencha touch date button with the name of "foo" in the div of "bar"

 

Sencha Touch Select Field

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

sencha_select

Look-up Methods

Example Description
touchselect by id "foo" Gets the sencha touch select field with the ID of "foo"
touchselect by name "foo" Gets the sencha touch select field with the name of "foo"
touchselect by name "bar//foo" Gets the sencha touch select field with the name of "foo" in the div of "bar"

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

Look-up Methods

Example Description
touchlistitem by text "foo" Gets the touch list item with the text of "foo"
touchlistitem by text "bar//foo" Gets the touch list item with the text of "foo" in the div of "bar"

 

Sencha Touch Radio Button

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

sencha_radio

Look-up Methods

Example Description
touchradio by occurrence "2" Gets the second sencha touch radio button
touchradio by occurrence "bar//2" Gets the second sencha touch radio button in the "bar" div

 

Sencha Touch Slider

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

sencha_slider

Look-up Methods

Example Description
touchslider by occurrence "2" Gets the second sencha touch slider in the page
touchslider by occurrence "bar//2" Gets the second touch slider in the "bar" div

 

Anything Else

In the event none of the components here can deal with what you are trying to interact with, you have the ability to manually specify XPath by using the location expression element by xpath.  You can also use by xpath with any component to manually specify the XPath to use.

Example:

element by xpath "(//input)[2]"

The above XPath for return the second input component in the page.