Web Elements Locators

--> To learn about locators in various languages, click this link <<--

How to Inspect the web elements of a web page?

• Every web page has different web elements.
• To identify the web element, use the developer tool to inspect the element.
• For that, Right-Click on the Web Page ➡ Select Inspect ➡ Select the Element tab. (or Shortcut Key F12)
• Every web element contains tags.
• Those tags contain attributes.
• Attributes contain values.
• Example: <span class="DPvwYc GHpiyd" aria-hidden="true">Hello</span>

    Note: Web elements are common for all browsers.

---

What is findElement?

    It is the method used to locate elements on the webpage.

What is By?

    By is the mechanism used to locate elements within documents with the help of locator value.

What is a Locator?

    It is an address that identifies a web element uniquely within the web page.

---

---

Locators:

    There are eight types of locators.

1. id
2. name
3. xpath
4. cssSelector
5. className
6. tagName
7. linkText
8. partialLinkText

id Locator:

• We can identify elements by using the ‘id’ attribute.
• Syntax: <object>.findElement(By.id("id_value"));
• Example: driver.findElement(By.id("dollar"));

•     Example Program:

1. import org.openqa.selenium.By;
2. import org.openqa.selenium.WebDriver;
3. import org.openqa.selenium.chrome.ChromeDriver;
4. public class LocatorID {
5.    public static void main(String[] args) {
6.       WebDriver driver = new ChromeDriver();
7.       driver.get("https://testingcolleges.blogspot.com/");
8.       driver.findElement(By.id("dollar")).click();
9.    }
10. }

---

name Locator:

• Name attribute can also identify an element.
• Example: driver.findElement(By.name(“value”));

---

       xpath:

Xpath is an XML path used for navigation through the HTML structure of the page.

Right-click on the tag of the particular field (on - DOM) ➡Select copy ➡ Select copy x path

 

There are two types of XPath

1.    Absolute path:

a.    Full path from top to bottom /end.

b.    It starts with a single slash (/).

c.     Search from the root node

Example: /html/body/div/input/div[2]/ul/li[2]/……..

2.    Relative XPath:

a.    Middle of the path.

b.    It starts with a double slash (//).

c.     Search starts from the middle of the DOM

Example: //*[@id=’value’]

          Example: driver.findElement(By.xpath(“//input[@id=’value’]”))

• Example program:

1. import org.openqa.selenium.By;
2. import org.openqa.selenium.WebDriver;
3. import org.openqa.selenium.WebElement;
4. import org.openqa.selenium.chrome.ChromeDriver;
5. public class LocatorXpath {
6.    public static void main(String[] args) {
7.       WebDriver driver = new ChromeDriver();
8.       driver.get("https://testingcolleges.blogspot.com/");
9.       WebElement elm = driver.findElement(By.xpath("//*[@id=\'dollar\']/a/span/b/span"));
10.       elm.click();
11.    }
12. }

---

cssSelector:

CSS is used to create style rules for web pages and can be used to identify any web element.

Right-Click on a particular element tag à Select Copy à Select Copy Selector

1. It starts with #.
2. Xpath does not work in the Internet Explorer browser in that scenario they will use cssSelector.
3. XPath and cssSelectors are both the same.

• Example: driver.findElement(By.cssSelector(“#input[@attribute]”))

---

className:

    A ClassName operator uses a class attribute to identify an object.

        Example: driver.findElement(By.className(‘value’))

---

tagName:

    In real-time we rarely use it. Here we will assign the values based on the main tag, not an attribute.

• Example: driver.findElement(By.tagName(“INPUT”));

Note: The tag name can be declared using either capital or lowercase letters. 

• Example Program: Get the number of links on a web page using Selenium with Java?

1. import java.util.List;
2. import org.openqa.selenium.By;
3. import org.openqa.selenium.WebDriver;
4. import org.openqa.selenium.WebElement;
5. import org.openqa.selenium.chrome.ChromeDriver;
6. 
   
7. public class Links {
8. public static void main(String[] args) {
9. WebDriver driver = new ChromeDriver();
10. driver.get("https://www.google.com");
11. List<WebElement> l = driver.findElements(By.tagName("a"));
12. System.out.println(l.size());
13. driver.quit();
14. }
15. }
16. //Output: 25

---

linkText:

    Text (visible text) used in hyperlinks can also locate elements.

        Example: driver.findElement(By.linkText(“Gmail”));

• Example program:

1. import org.openqa.selenium.By;
2. import org.openqa.selenium.WebDriver;
3. import org.openqa.selenium.WebElement;
4. import org.openqa.selenium.chrome.ChromeDriver;
5. public class LocatoeLinkText {
6.    public static void main(String[] args) {
7.       WebDriver driver = new ChromeDriver();
8.       driver.get("https://testingcolleges.blogspot.com/");
9.       WebElement elm = driver.findElement(By.linkText("C# vs Java"));
10.       elm.click();
11.    }
12. }

---

partialLinkText:

    Part of the text in the link can also identify an element.

        Example: link text:- click here to download this song

            driver.findElement(By.partialLinkText(“click here”));

- Next Page: Navigation Commands