Xpath and CSS selector , Developer Console XPath Parent : https://www.guru99.com/xpath-selenium.html

Contains Attribute:

//input[contains(@value,"Approve")]

Contains text alternative

https://stackoverflow.com/questions/23543044/how-to-use-xpath-preceding-sibling-correctly

//label[contains(.,"Name")]

contains attributes

//img[contains(@src,"wla")]

element attribute or condition

parent::tr/td/span[text()="Accepted" or text()="Processed"]

https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Press%20Keys

Press Keys  ENTER

text contains after line break <br>

//li/a[contains(.,'FREIGHT')]
https://stackoverflow.com/questions/36718817/xpath-for-text-after-br



ancestor with attributes

//span[text()="Update"]/ancestor::div[@class="ng-star-inserted"]



particular cell and text contains
td position

tr/td[2][text()="${From}"]/ancestor::tr/td[3][text()="${To}"]/ancestor::tr/td[4]//span[contains(text(),"${VtsStatus}")]

multiple class

//div[@class="dropdown-menu show"]//a[contains(text(),"User Management")]



href contains

//li/a[contains(@href,"warehouse")]


https://stackoverflow.com/questions/26640746/xpath-syntax-for-and-not-contains/26641239

Class not contains
//div[text()="10" and not(contains(@class,'mute'))]



Xpath 2:

What browsers support Xpath 2.0?

https://stackoverflow.com/questions/16658799/what-browsers-support-xpath-2-0

element and child element with conditions

https://stackoverflow.com/questions/10247978/xpath-with-multiple-conditions

//category[@name='Sport' and ./author/text()='James Small']

text case insensitive  & check in lower case

https://stackoverflow.com/questions/8474031/case-insensitive-xpath-contains-possible

equal:
//table/tbody/tr[2]/td[5][translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz')= 'port']

contains:

//td[contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'company113054')]

//table/tbody/tr[2]/td[5][contains(translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz'), 'textvaluexyz')]


Not tried yet:
https://stackoverflow.com/questions/2893551/case-insensitive-matching-in-xpath



Select index and Attributes (Property)

//table/tbody/tr[1]/td[1][contains(.,'Permits and Certificates_Daily')]


https://stackoverflow.com/questions/16732508/how-to-find-2nd-td-in-html-using-xpath


contains id:

//div[contains(@id,"content-body")]//p

document.evaluate('//*[@id="kwindowVesselCallSp"]/div/div[1]/div[7]/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerText



preceding-sibling can be indexing it will go relative to the element

${elementLoc}/preceding-sibling::td[1]

Xpath Multiple column data verification:
Verifying two values in the table column

ex:  name = "Pradeep"
       place = ""Mysore

//table/tbody/tr/td[1]/span[contains(text(),"Pradeep")]/../../td[4][contains(text(),"Mysore")]


XPath Ancestor:

//div[text()='building1' and @class='wrap']/ancestor::tr/td/div/div[@class='x-grid-row-checker']


Attributes:
//div[@name="Quantity"]
//*[@name="Quantity"]


Following-Sibling searches for the all the attributes   ::td/div/i

//*[@id="other"]/table//td[contains(@title," Services")]/following-sibling::td/div/i


following-sibling::td[2]

//*[@id="other"]/table//td[contains(@title,"Services")]/following-sibling::td[contains(text(),"VA")]/following-sibling::td[2]

Identify the controls in the developer command prompt or internet console with JavaScript and JQuery

https://stackoverflow.com/questions/22571267/how-to-verify-an-xpath-expression-in-chrome-developers-tool-or-firefoxs-firebug


Click through XPath:

https://stackoverflow.com/questions/5626168/automating-a-javascript-button-click

var xPathRes = document.evaluate ('//div[1]/a[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

xPathRes.singleNodeValue.click();

Get Inner Text XPath:

${value}=  Execute JavaScript  return document.evaluate('//h5[contains(text(),"abc")]/following-sibling::h4', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.innerHTML




document.getElementsByName("q")[0].value="search"
document.getElementsByName("q")[0].click()
document.getElementById("abcd").click()

$("input[name='q']").value="j"
$("input[name='btnK']").click()

document.getElementsByName("btnK")[1].style.border="5px solid red";
$("input[name='q']").className

Class with multiple atrributes:

(//div[text()="Enter Port"]/../div[@class="ng-value ng-star-inserted"]/span[@class="ng-value-label ng-star-inserted"])[2]

(//div[text()="Enter Terminal"]/../div[@class="ng-value ng-star-inserted"]/span[@class="ng-value-label ng-star-inserted"])[1]

Xpath Ancestor with attributes:
https://stackoverflow.com/questions/10076618/xpath-to-find-ancestor-node-containing-css-class

./ancestor::div[contains(concat(' ', @class, ' '), ' x-grid-view ')][1]

https://www.youtube.com/watch?v=W9_q7tZon2M&list=PLhW3qG5bs-L83gLEZVIDHOvgTTz27po_0

Open web page : F12 -Developer tool bar

//    :relative Xpath
/     :absolute XPath

//tagname[@attribute='value']         //input[@name='q']

Chrome extensions to find XPath:

• eskry
• chropath

And Condition:

Syntax:
//tag[@attribute='value1'][@attribute2='value2'] 
Examples:
 //input[@type='text'][@name='txtUsernmae']
//*[@type='text'][@name='txtUsernmae']

Search By Text:
//a[text()='Share This']

Contains:

//a[contains(text(),'Share')]


Starts with:

//*[starts-with(@id,'home')]

//*[starts-with(@id,'home')  or @id='txtUsername' ]


And  Or Condition

//*[@id='txtUsername'  and @name='txtUsername' ]
//*[@id='txtUsername'  or @name='txtUsername' ]



XPath Parent:

https://stackoverflow.com/questions/28237694/xpath-get-parent-node-from-child-nodeUse with the parent node's name.

//*[title="50"]/parent::store

This XPath will only select the parent node if it is a store.

But you can also use one of these

//*[title="50"]/parent::*
//*[title="50"]/..

todo read
https://stackoverflow.com/questions/22571267/how-to-verify-an-xpath-expression-in-chrome-developers-tool-or-firefoxs-firebug


Xpath finding in Chrome:
https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/

xpath in Developer Tool bar Console Tab
$x("XPATH") 
$x(".//div")       or   $x('.//input')


CSS Path in Developer Tool bar Console Tab
$$("header")
$("#btnNo").css("border-color","red");


http://aksahu.blogspot.in/2014/01/selenium-tricks-for-css-and-xpath-locators.html


(4) Direct Child:
A direct child of an element is denoted as "/" in Xpath and ">" in CSS selector. See the example below for a direct child "li" for a "ul" element:
In Xpath locator 

1

//ul/li

In CSS selector 

1	css=ul > li

(5) Child or Subchild:
A direct child of an element is denoted as "//" in Xpath and a wehite-space(" ") in CSS selector. See the example below for a child/subchild "li" for a "ul" element:
In Xpath locator 

1

//ul//li

In CSS selector 

1

css=ul li

Note that "ul li" and "ul > li" are different. If you are confusing please go through this article.