types of locators in selenium code example

Example 1: types of locators in selenium

--> WHAT ARE LOCATORS? 
    - Locators are methods that are used to locate HTML web elements for 
      Selenium browser driver.
      
--> WHAT IT IS USED FOR? 
    - It is used to locate any specific web element 
    on the UI of AUT (application under test)

--> HOW MANY Selenium LOCATORS?
   - There are 8 locators.
    - id, class, name, linktext, partialLinktext, cssSelector, xpath, tagName

Example 2: locators in selenium

- There are 8 locators.
    - id, class, name, linktext, partialLinktext,
      cssSelector, xpath, tagName
      
 - First I would check for id. If there is id,
  and it is not dynamic, I would go for id.
- If not, I would quickly check for it if 
  there is unique class or name attribute value
-If it is link, I would use linkText or
  partiallinktext
-If none available than I would go for xpath

Example 3: locators in selenium

LOCATORS
id: ID attribute value is unique to that specific webElement.
driver.findElement(By.id("id attribute's value")); 
Dynamic attribute value -> Refresh the page and 
check if the id attribute value is changing or not. 
name: looks for the value of the name attribute 
and returns the matching web element- it is not always unique.
driver.findElement(By.name("h131"));
className: looks for the value of class attribute. 
driver.findElement(By.className("h461"));
tagName: locates the webElement by tagName itself. 
-returns the first matching tagName 
driver.findElement(By.tagName("a"))  
linkText: locates the webElement by the text of the link
driver.findElement(By.linkText("Click here to go Google"));
partialLinkText: Only checks if the given text is contained in the link. 
driver.findElement(By.partialLinkText("TEXT"));  
cssSelector: It has its own syntax. 
It helps us create custom locators to locate webElements 
using different attributes and values. 
-> We are not just stuck using: id, name, class, linkText. 
-> We can use any attribute and their values to locate.
tagName[attribute='value'] / tagName.value 
==> looks for tagName with given class attribute value
How do we go from child to parent using cssSelector? 
-> You can NOT go to parent from child using cssSelector.
8- Xpath:
1- Absolute Xpath: - It starts with / "single slash" -> 
When we say /, it will go to the direct child of the given webElement
- Absolute xpath starts from root element 
- It is not recommended to use absolute xpath
- Because it is very fragile. Easily breaks when there is 
any minimal structural changes on HTML code.
/html/body/div/div/a --> This would return line C.    
2- Relative xpath: -> Starts with // "double slash” 
When we say // it allows us to start from anywhere in the html code.
-> When we say //, it will jump and return all of the 
given webElements inside of the HTML 
Commonly used relative xpath syntaxes:
1- //tagName[@attribute='value']  2- //*[@attribute='value']  
3- //tagname[.='text'] 
If we are using attribute value with xpath, and it is returning 
us more than 1 option.
We need to surround the whole xpath with paranthesis. 
ex: (//button[@class='btn btn-primary'])[2]