Selectors. Lection 22

Element selection
WebElement cheese = driver.findElement(By.id("cheese"));

Locating by ID
WebElement elem = driver.findElement(By.id("email"));

Locating by ClassName
WebElement elem = driver.findElement(By.className("inputtext"));

Locating by Name
WebElement elem = driver.findElement(By.name("userName"));

Locating by TagName
WebElement elem = driver.findElement(By.tagName("strong"));

Locating by Link text
WebElement elem = driver.findElement(By.linkText("REGISTER"));

Locating by Partial link text
WebElement elem = driver.findElement(By.partialLinkText("STER"));

Locating by xpath
WebElement elem = driver.findElement(By.xpath("//img[@src=’/images/hdr_right.gif’]"));

Locating by cssSelector
WebElement elem = driver.findElement(By.cssSelector("input.inputtext[tabindex=1]"));

Xpath

Xpath
Xpath - It is a syntax or language for finding any element on the web page using XML path expression. XPath is used to find the location of any element on a webpage using HTML DOM structure
Xpath=//tagname[@attribute='value']
// : Select current node.
Tagname: Tagname of the particular node.
@: Select attribute.
Attribute: Attribute name of the node.
Value: Value of the attribute.

Syntax

Types of X-path
1) Absolute XPath
html/body/div[1]/section/div[1]/div/div/div/div[1]/div/div/div/div/div[3]/div[1]/div/h4[1]/b
2) Relative XPath. For Relative Xpath the path starts from the middle of the HTML DOM structure
Relative xpath: //*[@class='featured-box']//*[text()='Testing']

1) Basic XPath:
Xpath=//input[@name='uid']
Xpath=//input[@type='text']
Xpath= //label[@id='message23']
Xpath= //input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='http://demo.guru99.com/']
Xpath= //img[@src='//cdn.guru99.com/images/home/java.png']

2) Contains():
Xpath=//*[contains(@type,'sub')]
Xpath=//*[contains(@name,'btn')]
Xpath=//*[contains(@id,'message')]
Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

3) Using OR & AND:
Xpath=//*[@type='submit' or @name='btnReset']
Xpath=//input[@type='submit' and @name='btnLogin']

4) Starts-with function:
Id=" message12"
Id=" message345"
Id=" message0873"
Id=" message8769"
Xpath=//label[starts-with(@id,'message')]

5) Text():
Xpath=//td[text()='UserID']

6) XPath axes methods:
a) Following - Selects all elements in the document of the current node
Xpath=//*[@type='text']//following::input
Xpath=//*[@type='text']//following::input[1]
b) Ancestor - selects all ancestors element (grandparent, parent, etc.) of the current node
Xpath=//*[text()='Enterprise Testing']//ancestor::div
c) Child - Selects all children elements of the current node
Xpath=//*[@id='java_technologies']//child::li
d) Preceding - Select all nodes that come before the current node
Xpath=//*[@type='submit']//preceding::input
e) Following-sibling - Select the following siblings of the context node
xpath=//*[@type='submit']//following-sibling::input
f) Parent - Selects the parent of the current node
Xpath=//*[@id='rt-feature']//parent::div
g) Self - Selects the current node or 'self' means it indicates the node itself
Xpath =//*[@type='password']//self::input
h) Descendant - Selects the descendants of the current node
Xpath=//*[@id='rt-feature']//descendant::a
nodes: https://www.w3schools.com/xml/xpath_nodes.asp

Predicates

CSS

Css selectors
When we don't have an option to choose Id or Name, we should prefer using CSS locators as the best alternative.
CSS has more Advantage than Xpath
CSS is much more faster and simpler than the Xpath.
Looks shorter
tagName[attributename=attributeValue]
Example 1: input[id=email]
Example 2: input[name=email][type=text]
Example 3: input#email
Example 4: input[class=menu4]
Example 5: input.menu4

Css selector and classes
172, 238);">
Log in
WebElement ele1 = driver.findElement(By.cssSelector(".primary-btn"));
WebElement ele2 = driver.findElement(By.cssSelector(".btn.primary-btn"));
WebElement ele3 = driver.findElement(By.cssSelector(".submit.primary-btn")); 172, 238);">
Log in

Special characters
1. '^' symbol, represents the starting text in a string.
2. '$' symbol represents the ending text in a string.
3. '*' symbol represents contains text in a string.
css=input[id^='ema']
css=input[id$='mail']
css=input[id*='mai']

xpath or css

{
table_header_id_and_class: {
css: "table#large-table thead .column-50",
xpath: "//table[@id='large-table']//thead//*[@class='column-50']"
},
table_header_id_class_and_direct_desc: { css: "table#large-table > thead .column-50",
xpath: "//table[@id='large-table']/thead//*[@class='column-50']"
},
table_header_traversing: {
css: "table#large-table thead tr th:nth-of-type(50)",
xpath: "//table[@id='large-table']//thead//tr//th[50]"
},
table_header_traversing_and_direct_desc: {
css: "table#large-table > thead > tr > th:nth-of-type(50)",
xpath: "//table[@id='large-table']/thead/tr/th[50]"
},
table_cell_id_and_class: {
css: "table#large-table tbody .column-50",
xpath: "//table[@id='large-table']//tbody//*[@class='column-50']"
},
table_cell_id_class_and_direct_desc: {
css: "table#large-table > tbody .column-50",
xpath: "//table[@id='large-table']/tbody//*[@class='column-50']"
},
table_cell_traversing: {
css: "table#large-table tbody tr td:nth-of-type(50)",
xpath: "//table[@id='large-table']//tbody//tr//td[50]"
},
table_cell_traversing_and_direct_desc: {
css: "table#large-table > tbody > tr > td:nth-of-type(50)",
xpath: "//table[@id='large-table']/tbody/tr/td[50]"
}
}

Xpath vs Css
XPath we can traverse both forward and backward
Any set of conditions for the nodes in the path
Queries return any number of results, including zero
Xpath engines are different in each browser, hence make them inconsistent
Easy to read and write
Faster