Selenium: Locators

In Selenium, locators are used to identify elements on a webpage so that Selenium can interact with them. There are several types of locators in Selenium, including:

1. ID: This locator is used to find elements based on their id attribute. For example, driver.find_element_by_id("elementId") will find the element with the id attribute of "elementId".
2. Name: This locator is used to find elements based on their name attribute. For example, driver.find_element_by_name("elementName") will find the element with the name attribute of "elementName".
3. Class Name: This locator is used to find elements based on their class attribute. For example, driver.find_element_by_class_name("className") will find the element with the class attribute of "className".
4. Tag Name: This locator is used to find elements based on their HTML tag name. For example, driver.find_element_by_tag_name("p") will find the first <p> element on the page.
5. Link Text: This locator is used to find elements based on the text of a link. For example, driver.find_element_by_link_text("link text") will find the first link on the page with the text "link text".
6. Partial Link Text: This locator is used to find elements based on a partial match of the text of a link. For example, driver.find_element_by_partial_link_text("partial link text") will find the first link on the page with text containing "partial link text".
7. CSS Selector: This locator is used to find elements using a CSS selector. For example, driver.find_element_by_css_selector("#elementId") will find the element with the id attribute of "elementId" using the CSS selector "#elementId".
8. Xpath: This locator is used to find elements based on the element's relationship to other elements in the HTML document. For example, driver.find_element_by_xpath("//input[@type='submit']") will find the first input element of type submit on the page.

All of these locators have a corresponding find_elements method that can be used to find multiple elements at once.

Notes:

1. ID - driver.findElement(By.id("ch_login_email"))
2. Name - driver.findElement(By.name("email"));
3. Linktext - driver.findElement(By.linkText("Blog"))
4. Partial Linktext - driver.findElement(By.PartialLinkText("Testing"))
5. Class Name - driver.findElement(By.className("form-control mt-3 form-control-lg "))
6. Tag Name - driver.findElements(By.tagName(a));
7. Xpath - driver.findElement(By.xpath(“//input[@name= ’email’]”))
8. CSS Selector - css=(Html tag )(#) (value of the ID attribute)

Xpath

1. Standard Xpath - driver.findElement(By.xpath(“//input[@name= ’email’]”))
2. Using Contains - driver.findElement(By.xpath(“//input[contains(@class, ‘form-control’)]”))
3. Using Xpath with AND & OR - driver.findElement(By.xpath(“//input[@type='email' AND @name='email’]))
4. Using starts-with - driver.findElement(By.xpath(“//input[starts-with(@name,'pass')]”))
5. Using text in Xpath - driver.findElement(By.xpath(“//p[@text()=’ SIGN UP’]”))

XPath Axes -

Using following -
will return the immediate element of the particular component.
Xpath=//*[@type='text']//following::input
Using Preceding -
will return the preceding element of the particular element.
Xpath= //*[@type='submit']//preceding::input
Using Following Sibling -finding next node on the basis of one node"//a[@href='/accounting.html']/following-sibling::h4"
Using Preceding Sibling -finding previous node on the basis of one node"//select[@id='day']/preceding-sibling::select"
Using Parent -
selects the parent node of the input tag of Id='email'.
Ex: //input[@id='email']/parent::*
the above can also be re-written as
//input[@id='email']/..
Using Descendant -
will return the descendant element of the particular element.
Xpath= //*[@id='rt-feature']//descendant::a
Using Ancestor -
To find an element on the basis of the parent element
"//a[contains(text(),'Inside div block 2.')]/ancestor::div//a"

CSS Selector -

Tag and ID - driver.findElement(By.cssSelector("input# ch_login_email"))
Tag and Class - driver.findElement(By.cssSelector("input.form-control"))
Tag and Attribute - driver.findElement(By.cssSelector("input[name= ‘phone’]"))
Tag, Class and Attribute - driver. findElement(By.cssSelector(“button.className[type = submit]”))
Matches (Starts with, Ends with, Contains) driver.findElement(By.cssSelector("input[name^='em']"))
driver.findElement(By.cssSelector("input[name$=’ail’]"))
driver.findElement(By.cssSelector("input[class*=’control’]"))Child elementsto get 3rd element in a list -
driver.findElement(By.cssSelector(“ul. overview-list li:nth-of-child(3)”);
to get last element in a list -
driver.findElement(By.cssSelector(“ul. overview-list li:last-child”);

Important Notes

• Classes should not have spaces- Compound classes cannot be accepted
• If there are multiple values - Selenium identifies the first one and scans from top left
• Double quotes inside double quotes are not accepted, use single quotes
• Xpath/CSS  can be defined in n number of ways
• Rightclick copy on blue highlighted html code to generate xpath
• when xpath starts with html-Not reliable- Switch browser to get another one
• There is no direct way to get CSS in chrome.
• xpath syntax: //tagName[@attribute='value']
• xpth regEx: //tagName[contains(@attribute,'value')]
• css syntax: tagName[attribute='value'], tagName#id, tagname.classname
• css regEx: tagName[Atrribute*='value'] - Css regular expression