selenium xpath/CSS patterns

In this post, mostly we will be talking about relative xpath patterns (find elements based on some conditions).
Refer Absolute and Relative XPATH for xpath types.

Element with attribute(A) with value (V) :
[Any element on the DOM having attrbuteA with ValueV irrespective of the element type]
xpath: //*[@A = 'V']
CSS: [A = 'V']


With tag name(T) and attribute(A) with out value(V):
[All the ElementsT with attributeA, doesn't matter what is the attribute value]
xpath: //T[@A]
CSS: T[A]

With tag name(T) and attribute(A) with value(V):

[ElementT having attributeA with valueV]

xpath: //T[@A= 'V']  
           //T[@A= 'V'][@A1= 'V1']
CSS: T[A= 'V']
         T[A= 'V'][A1= 'V1']

xpath: //T[contains(@A, 'V')] or //T[contains(text(), 'V')]
CSS: T[A*= 'V']

xpath: //T[starts-with(@A, 'V')] or //T[starts-with(@A, 'V')]
CSS: T[A^= 'V']

Example: 
    Navigate to this demo site

We can use any of the following xpath to identify the FullName text field
xpath: //input[@id='username'][name='uname']
Note: identify input tag (element) with both id and name attribute.

xpath: //input[@id='username' or name='uname']
Note: identify input tag (element) with either id or name attribute that matches.

If we find xpath with //input[type='text'], then may be getting no. of text boxes on the page and selenium may be confusing which one to act upon.

If the attribute value changes partially each time we navigate to page, that time
//input[contains(@id,'usern')]   //partial attribute value

let's say, on the same page, we need to identify the link "Testing Basics!" and can't remember big
text,

then we can use - //a[contains(text() , 'Testing')] 
Note: text is not an attribute, so mentioned as method without @, this will search all the links on the web page with link text contains the word Testing. 

following-sibling

From the above screenshot, under div, we have 2 elements label and input.
so if we want to access the input(username) field of label(Full Name), we can use - 

driver.findelement(by.xpath("//label[@id='lblname']/following-sibling::input")); 
or "//label[@id='lblname']/following-sibling::input[1]"

The above will return the text box below to the label "Full Name"

preceding-sibling
If we have the input field known, and we want to find out the label for the text box, then use

driver.findelement(by.xpath("//input[@id='username']/preceding-sibling::label")); 
or "//input[@id='username']/preceding-sibling::label[1]"

xpath with table:
on the demo site

To access the 2nd row and 2nd column data: i.e value is GUI from the above table

xpath: .//table[@id='table01']//tr[2]//td[2]

css: #table01.2.2  or #table01 tr:nth-child(2) td:nth-child(2) or  table[@id='table01'].2.2

<-extras-> To check the elements that are disabled on the web page

driver.findelements(By.xpath("//input[@disabled]"); //input[not(@disabled)]"
driver.findelements(By.cssselector("input:disabled"); //"input:enabled"

To find elements (radio buttons or check boxes) that are checked

driver.findelements(By.xpath("//input[@checked]");
driver.findelements(By.cssselector("input:checked");

InnerText and TextContent

driver.findelement(By.xpath("//input[innertext='value']"));
or
driver.findelement(By.xpath("//td[textcontent='value']"));

References: 
https://saucelabs.com/selenium/css-selectors