{"id":90572,"date":"2017-07-20T10:51:47","date_gmt":"2017-07-20T10:51:47","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=90572"},"modified":"2017-09-08T14:32:54","modified_gmt":"2017-09-08T14:32:54","slug":"element-locators-in-selenium","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/element-locators-in-selenium\/","title":{"rendered":"Element Locators In Selenium WebDriver"},"content":{"rendered":"

In the previous<\/a> blog we learnt how to\u00a0configure Eclipse with selenium<\/a> and to create an environment where we can start write some script.
\nConsider we are writing a selenium script to open a website (say webkul.com). Now, how to verify if the page opened at the execution is of webkul itself. Is it the same page we were looking for? To achieve this, we need to find some elements in page which verifies that it is correct. We have different element locators in selenium to locate elements and perform actions like – click, type, select etc. So, knowledge of element locators is necessary to work with selenium.
\nBelow are the locators which are supported by selenium :<\/p>\n

    \n
  1. By ID<\/li>\n
  2. By Name<\/li>\n
  3. By Class Name<\/li>\n
  4. By Tag Name<\/li>\n
  5. By Link Text Or Partial Link Text<\/li>\n
  6. By cssSelector<\/li>\n
  7. By XPath<\/li>\n<\/ol>\n
    \n
    \n

    Locating Element By ID<\/h3>\n<\/div>\n
    \n

    If a web application page has an element with unique and a static Id, we can locate that element by it\u2019s Id. For example, In the below image we have a search input with it\u2019s id as \u201csearch\u201d. Here, we will get the element by its id and will write a keyword which we wanted to search.<\/p>\n

    Driver.findElementBy.Id(\u201csearch\u201d).sendkeys(\u201cMarketplace for shopify\u201d);<\/strong><\/p>\n

    \n
    \"\"<\/div>\n<\/div>\n

    Below example will show how to get element by it’s id and send some keys to that element:<\/p>\n

    package elementById;\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.chrome.ChromeDriver;\r\nimport org.testng.annotations.AfterTest;\r\nimport org.testng.annotations.BeforeTest;\r\nimport org.testng.annotations.Test;\r\n\r\npublic class FindElementByID {\r\n\tWebDriver driver;\r\n\t@BeforeTest\r\n\tpublic void setUp() throws Exception {\r\n\t\tString chrome_path = System.getProperty(\"user.dir\")+\"\/chromedriver\";  \/\/ setting the driver executable for chrome browser\r\n\t\tdriver = new ChromeDriver();\t\t\t\t\/\/ created a new instance for chrome driver\r\n\t\tdriver.manage().window().maximize(); \r\n\t}\r\n\t@Test\r\n\tpublic void findElementById() \r\n\t\t\tthrows InterruptedException\r\n\t{\r\n\t\tdriver.navigate().to(\"http:\/\/store.webkul.com\");\r\n\t\tThread.sleep(1000);\r\n\t\tdriver.findElement(By.id(\"search\")).sendKeys(\"MarketPlace for shopify\");\r\n\t}\r\n\t\r\n\t@AfterTest\r\n\tpublic void tearDown() throws Exception {\r\n\t    driver.quit();\r\n\t}\r\n}<\/pre>\n<\/div>\n<\/div>\n
    \n
    \n
    Locating Element By Name<\/h3>\n<\/div>\n
    \n
    When we locate an element by it\u2019s name, the web driver looks for name attribute specified by us. Finding an element by \u201cID\u201d or by \u201cName\u201d is same. The only difference is, for ID web driver looks element with specified ID and incase of Name it search for specified name.
    \nIn the above example we found element by id. Lets get the same element via its attribute name instead of ID.
    \nDriver.findElementBy.Name(\u201cq\u201d).sendkeys(\u201cMarketplace for shopify\u201d);<\/strong><\/strong><\/strong><\/p>\n
    \n
    \"\"<\/a><\/div>\n<\/div>\n
     <\/p>\n
    package elementByName;\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.chrome.ChromeDriver;\r\nimport org.testng.annotations.AfterTest;\r\nimport org.testng.annotations.BeforeTest;\r\nimport org.testng.annotations.Test;\r\n\r\npublic class FindElementByName {\r\n\tWebDriver driver;\r\n\t@BeforeTest\r\n\tpublic void setUp() throws Exception {\r\n\t\tString chrome_path = System.getProperty(\"user.dir\")+\"\/chromedriver\";  \/\/ setting the driver executable for chrome browser\r\n\t\tdriver = new ChromeDriver();\t\t\t\t\/\/ created a new instance for chrome driver\r\n\t\tdriver.manage().window().maximize(); \r\n\t}\r\n\t@Test\r\n\tpublic void findElementByName() \r\n\t\t\tthrows InterruptedException\r\n\t{\r\n\t\tdriver.navigate().to(\"http:\/\/store.webkul.com\");\r\n\t\tThread.sleep(1000);\r\n\t\tdriver.findElement(By.name(\"q\")).sendKeys(\"MarketPlace for shopify\");\r\n\t}\r\n\t\r\n\t@AfterTest\r\n\tpublic void tearDown() throws Exception {\r\n\t    driver.quit();\r\n\t}\r\n}<\/pre>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    Locating Element By Class Name<\/h3>\n<\/div>\n<\/div>\n
    \n
    We have seen how to locate elements by IDs and Name. But, what if an element neither has an ID nor a Name in its attribute? So, locating an element by its class name is a good choice when we don\u2019t have a ID or name to locate with.<\/p>\n
    Driver.findElementBy.ClassName(“logo”);<\/strong><\/p>\n
     <\/p>\n
    \n
    <\/div>\n<\/div>\n
    In the above image, we don\u2019t have any Id or name to locate the logo which contains \u201cWebkul Store\u201d. Here, we can see that the element has a class associated \u201clogo\u201d. We can use this class to get the text inside this element. Lets see the code below:<\/p>\n
    package elementByClassName;\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.chrome.ChromeDriver;\r\nimport org.testng.annotations.AfterTest;\r\nimport org.testng.annotations.BeforeTest;\r\nimport org.testng.annotations.Test;\r\n\r\npublic class FindElementByClassNme {\r\n\tWebDriver driver;\r\n\t@BeforeTest\r\n\tpublic void setUp() throws Exception {\r\n\t\tString chrome_path = System.getProperty(\"user.dir\")+\"\/chromedriver\";  \r\n\t\tdriver = new ChromeDriver();\t\t\t\t\r\n\t\tdriver.manage().window().maximize(); \r\n\t}\r\n\t@Test\r\n\tpublic void findElementByClassName() \r\n\t\t\tthrows InterruptedException\r\n\t{\r\n\t\tdriver.navigate().to(\"http:\/\/store.webkul.com\");\r\n\t\tThread.sleep(1000);\r\n\t\tString logoText= driver.findElement(By.className(\"logo\")).getText();\r\n\t\tif(logoText.equalsIgnoreCase(\"webkul store\"))\r\n\t\t{\r\n\t\t\tSystem.out.println(\"We are at the home page of webkul store\");\r\n\t\t}else\r\n\t\t\tSystem.out.println(\"We are not at the home page of webkul store\");\r\n\t}\r\n\t\r\n\t@AfterTest\r\n\tpublic void tearDown() throws Exception {\r\n\t    driver.quit();\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    Locating Element By Tag Name<\/h3>\n<\/div>\n<\/div>\n
    \n
    Till now, we have located elements using ID,Name and Class Name. Considering, if an element don\u2019t have an Id, Class and Name attribute. Here, we have another selector in selenium which looks for element\u2019s tag name in the web page.
    \nAlthough, their are other selectors like xpath or css selector to look for elements with no id or name. We can also use tag name to find elements. This strategy is not much popular because in a web page there are many elements with same tag name. So, it would be difficult to get the tag we are looking for (a page could have\u00a0hundreds of elements with same tag).
    \nIn the below image we have to click on drop-down to select the currency for the website.To get this we can use the tag name selector, perhaps, we can get this element by Id :<\/p>\n
    driver.findElement(By.tagName(“select”))<\/strong><\/p>\n
    \n
    \"\"<\/a><\/div>\n<\/div>\n
     <\/p>\n
    The practical implementation foe selecting element by tag name is given below:<\/p>\n
    package elementByTagName;\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.chrome.ChromeDriver;\r\nimport org.testng.annotations.AfterTest;\r\nimport org.testng.annotations.BeforeTest;\r\nimport org.testng.annotations.Test;\r\n\r\npublic class FindElementByTagName {\r\n\tWebDriver driver;\r\n\t@BeforeTest\r\n\tpublic void setUp() throws Exception {\r\n\t\tString chrome_path = System.getProperty(\"user.dir\")+\"\/chromedriver\";  \r\n\t\tdriver = new ChromeDriver();\t\t\t\t\r\n\t\tdriver.manage().window().maximize(); \r\n\t}\r\n\t@Test\r\n\tpublic void findElementByTagName() \r\n\t\t\tthrows InterruptedException\r\n\t{\r\n\t\tdriver.navigate().to(\"http:\/\/store.webkul.com\");\r\n\t\tThread.sleep(1000);\r\n\t\tString SupportedCurrenry= driver.findElement(By.tagName(\"select\")).getText();\r\n\t\tSystem.out.println(\"The currencies supported by webkul are :\\n \"+ SupportedCurrenry);\r\n\t}\r\n\t\r\n\t@AfterTest\r\n\tpublic void tearDown() throws Exception {\r\n\t    driver.quit();\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    Locating Element By Link Text Or By Partial\u00a0Link Text<\/h3>\n<\/div>\n<\/div>\n
    \n
    Suppose, we want to target a link and if you know the text under link area, the best selector we can use is By link text or By partial link text.
    \nIf we are using Link text, we need to specify the full text and if we don\u2019t know the full link text then, we can use a part of link via partial link text.
    \nIn the below image we have a link text as \u201dwe\u2019re hiring \u201c. Now, we will see the implementation by Link-text as well as by Partial-link text.<\/p>\n
    driver.findElement(By.linkText(“we\u2019re hiring”));<\/strong>
    \ndriver.findElement(By.partialLinkText(“we\u2019re”));<\/strong><\/p>\n
    \n
    \"\"<\/a><\/div>\n<\/div>\n
    Below is the implementation for using element by Link or partial link:<\/p>\n
    package elementByLinkText;\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.chrome.ChromeDriver;\r\nimport org.testng.annotations.AfterTest;\r\nimport org.testng.annotations.BeforeTest;\r\nimport org.testng.annotations.Test;\r\n\r\npublic class FindElementByLinkText {\r\n\tWebDriver driver;\r\n\t@BeforeTest\r\n\tpublic void setUp() throws Exception {\r\n\t\tString chrome_path = System.getProperty(\"user.dir\")+\"\/chromedriver\";  \r\n\t\tdriver = new ChromeDriver();\t\t\t\t\r\n\t\tdriver.manage().window().maximize(); \r\n\t}\r\n\t@Test\r\n\tpublic void findElementByLinkText() \r\n\t\t\tthrows InterruptedException\r\n\t{\r\n\t\tdriver.navigate().to(\"http:\/\/webkul.com\");\r\n\t\tThread.sleep(1000);\r\n\t\tdriver.findElement(By.linkText(\"we\u2019re hiring\")).click(); \/\/ we can use any \"linkText\" or \"PartialLinkText\"\r\n\/\/\t\tdriver.findElement(By.partialLinkText(\"we\u2019re\")).click(); \r\n\t}\r\n\t\r\n\t@AfterTest\r\n\tpublic void tearDown() throws Exception {\r\n\t    driver.quit();\r\n\t}\r\n}<\/pre>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    Locating Element by Css Selector<\/h3>\n<\/div>\n<\/div>\n
    \n
    CSS is \u201cCascading Style Sheets\u201d, defined to display HTML in structured styles at the webpage. It is a combination of element selectors and selector value which identifies the element. If we don\u2019t have an option to select an element via Id or class, we can use css selector.<\/p>\n
    Consider the first element (the search box), we located the input by Id. Now, lets see how can we do the same using Css Selector:
    \ndriver.findElement(By.cssSelector(“input[name=’q’]”));<\/strong><\/strong><\/strong><\/p>\n
     <\/p>\n
    package elementByCssSelector;\r\nimport org.openqa.selenium.By;\r\nimport org.openqa.selenium.WebDriver;\r\nimport org.openqa.selenium.chrome.ChromeDriver;\r\nimport org.testng.annotations.AfterTest;\r\nimport org.testng.annotations.BeforeTest;\r\nimport org.testng.annotations.Test;\r\n\r\npublic class FindElementByCssSelector {\r\n\tWebDriver driver;\r\n\t@BeforeTest\r\n\tpublic void setUp() throws Exception {\r\n\t\tString chrome_path = System.getProperty(\"user.dir\")+\"\/chromedriver\";  \r\n\t\tdriver = new ChromeDriver();\t\t\t\t\r\n\t\tdriver.manage().window().maximize(); \r\n\t}\r\n\t@Test\r\n\tpublic void findElementByCssSelector() \r\n\t\t\tthrows InterruptedException\r\n\t{\r\n\t\tdriver.navigate().to(\"http:\/\/webkul.com\");\r\n\t\tThread.sleep(1000);\r\n\t\tdriver.findElement(By.cssSelector(\"input[name='q']\")).sendKeys(\"Marketplace for shopify\");;\r\n\r\n\t}\r\n\t\r\n\t@AfterTest\r\n\tpublic void tearDown() throws Exception {\r\n\t    driver.quit();\r\n\t}\r\n}<\/pre>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    Locating Element By\u00a0Xpath<\/h3>\n<\/div>\n<\/div>\n
    \n
    XPath is defined as XML path. We can find any element on the web page using XML path expression of that particular element.\u00a0It is most popular and best way to locate element in WebDriver.
    \nBelow is a basic syntax of xpath experssion :
    \nxpath=\/\/tagname[@attribute=’value’] <\/strong>, where<\/p>\n