3. Basic of HTML and Working with different element Locators - aankitmmishra/RobotFramework GitHub Wiki

To get the HTML for the element right-click on the element and select Inspect

Brief description of HTML format:

<input --> Start Tag
class="search_query form-control ac_input" --> Attribute
id="Search" --> Attribute
type="text" --> Attribute
name="search_query" placeholder="Search" --> Attribute
value="" autocomplete="off"> --> Attribute
Hello World --> Inner Text
/input> --> End Tag

Different Element Locators CSS format:

Use ID of the element

e.g. CSS = #Search

Use ID and Tag

e.g. CSS = input#Search

Use Class of the element

e.g. CSS = .search_query form-control ac_input

Use Class and Tag

e.g. CSS = input.search_query form-control ac_input

Use any attribute of the element

e.g. CSS = [type='text']

Use tag with any attribute

e.g. CSS = input[id='Search']

Use id with any attribute

e.g. CSS = #Search[type='text']

Use tag with id and nay attribute

e.g. CSS = input#Search[type='text']

Use Class with any attribute of the element

e.g. CSS = .search_query form-control ac_input[type='text']

Use tag with class and any other attribute

e.g. CSS = input.search_query form-control ac_input[type='text']

Different Element Locators XPATH format:

Use Single Attribute

e.g. XPATH = \input[@name='search_query" placeholder="Search']

Use multiple attributes with OR condition

e.g. XPATH = \input[@name='search_query" placeholder="Search' or @class='search_query form-control ac_input']

Use multiple attributes with AND condition

e.g. XPATH = \input[@name='search_query" placeholder="Search' and @class='search_query form-control ac_input']

Use * to replace attribute or tag name or both

e.g. XPATH = \input[@*='search_query" placeholder="Search' and @class='search_query form-control ac_input']
e.g. XPATH = \input[@*='search_query" placeholder="Search' and @*='search_query form-control ac_input']
e.g. XPATH = \*[@*='search_query" placeholder="Search' and @*='search_query form-control ac_input']

Use xpath with inner text

e.g. XPATH = //input[text()='Hello World']

Use xpath with partial inner text

e.g. XPATH = //input[contains(text()='Hello')]

Use xpath with attribute that matched the value partially

e.g. XPATH = //input[contains(@name,'search')]

Locate Element through its parent

Example HTML

e.g. XPATH = //table[@role='presentation']/tbody/tr[2]/td[1]/input

Locate element through its child

Example HTML

e.g. XPATH = //input[@type='email']/parent::td/parent::tf/parent::tbody/parent::table

Locate elements through their siblings

Example HTML

Use the following if the label was after the mentioned element which is the case mentioned above. e.g. XPATH = //input[@id='tab2']/following-sibling::label

Use preceding if the label was before the mentioned element e.g. XPATH = //input[@id='tab2']/preceding-sibling::label

Locate an element using all(Parent/Child/Sibling)

Example HTML

e.g. XPATH = //input[@id='email']/parent::td/following-sibling::td[1]/input