Note: You must provide your own Ext JS 4 SDK and run these examples locally.

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