Selenium WebDriver - Different Type of Locators and Find Element Commands

-

Find Element Commands

These are the different commands to locate/find the GUI elements on the web page using 8 different locators. We can perform actions on elements only after finding them. You can use any of the one locator to find element. Below is the command to find any element on Web page.









// Find Element
driver.findElement(arg0);

All Find Element Commands:
/**************************
 * Find Element Commands  * 
 **************************
*/

// Find Single WebElemnt
driver.findElement(arg0);

// Find Multiple WebElements, it returns a list of WebElements
driver.findElements(arg0);

// Find by different locators
driver.findElement(By.className("class-name"));
driver.findElement(By.cssSelector("some-css-selctor"));

driver.findElement(By.id("some-id"));

driver.findElement(By.linkText("some-link-text"));

driver.findElement(By.name("some-name"));

driver.findElement(By.partialLinkText("some-partial-link-text"));

driver.findElement(By.tagName("some-html-tag-name"));

driver.findElement(By.xpath("some-xpath-expression"));

// Find web element and store value in WebElement variable for re-usability
WebElement element = driver.findElement(By.xpath("/some/xpath");

Selenium Locators

Locators are used to tell Selenium that on which GUI element (text box, radio boxes, links, buttons etc.) action has to be performed. We must have basic knowledge of HTML in order to learn locator techniques. There are total of 8 locators  by which we can find element in Selenium Webdriver. Here is the list:
  1. ID
  2. Class Name
  3. Name
  4. Link Text
  5. Partial Link Text
  6. Tag Name
  7. Xpath
  8. Css Selector

1. Locate by ID, Name and ClassName

  • These three are the most common type of locators. 
  • Id, Name and ClassName are the attributes used along with html tags. 
  • These attributes are given by Front-end developers for CSS designing.
  • Automation testers make use of these attributes for locating elements.
HTML Code for Sample Login Page with Id, Name and ClassName attributes:

 

</span> Sample Login Page <span style="color: rgb(0, 119, 0);">

 type='text' id='username' name='user' classname='user'/>
 type='password' id='password' name='pwd'/>
In above sample html code, there are three elements present:
  1. Input tag for username text box, it has id, name and classname attributes. We can use anyone of it for locating username textbox.
  2. Input tag for password box, it has id and name attributes only. We can use anyone of the two.
  3. Button tag for login button, it has only id attribute so we can only use id.
Example:

Code for Id- driver.findElement(By.id("some-id"));

Code for Name - driver.findElement(By.name("some-name"));

Code for ClassName - driver.findElement(By.className("some-className"));



How to find ID of an element on a Web Page?

 Now let's find id of 'Male' radio box
  1. Click on the cursor icon on left side of firebug.
  2. Now move the cursor to the element whose id you want to find. We will move cursor to 'Male' radio box and click on it.
  3. You will observe in the firebug some html code will be highlighted. It is the html code of 'Male' radio box.
  4. In that html code find something like id='some_value'. It is the id to be used in selenium command. For 'male' radio box id is 'sex-0'.
  5. Code - driver.findElement(By.id("sex-0"));
  6. Refer following pic.
 Similarly, Name and ClassName can be find from html code.
Key Points to remember about Id, Name and ClassName:






  • Html tag can have one, two or all three attributes.





  • If html tag has more than one attribute, we can pick one whose value is unique in the whole html code.





  • If Html tag don't have any of the three attribute in that case we have to use xpath or css selector.





  • Ids have to be unique for each element in html as per w3 standards. 





  • Id locator is the most reliable and fast locator.





  • If we have duplicate ids say more than one tag/element has same id, then also we have to use xpath or css selector.


    •

    2. Locate by Link Text and Partial LinkText
    • Both these locators are used to click on links.
    • LinkText is used to click on a static link, whose value is not changing.
    • And Partial link text is used to click on a link which is half dynamic. A link whose half text is static and half text is changing. 
      • Like Profile Page link, XYZ Profile.
      • Here XYZ is name of person, which will be different for every user/person but 'Profile' text will remain unchanged.
    Example:
    1. Open https://www.techlistic.com/
    2. I want to click on any menu link let's say on 'Selenium Tutorial' link using Selenium.
    3. You have to write text of the link (which is displaying on the page) in the Selenium command.
    Code for Link Text - driver.findElement(By.linkText("Selenium Tutorial"));

    Code for Partial Link Text -  driver.findElement(By.partialLinkText("some-partial-link-text"));

    3. Locate by Tag Name

    Using this command one locate elements using html tag name.

     Code Example:

     
    // Example - Get all options from a dropdown and print them
WebElement select = driver.findElement(By.tagName("select"));

// Get all options in a list with tagname 'option'
List allOptions = select.findElements(By.tagName("option"));
    We will learn about xpath and css selector in upcoming tutorials.



    Browser & Navigation Commands  << Previous      ||      Next >>  Wait Commands 

    Refer Complete Selenium Wbedriver Tutorials Series
    Join Telegram channel at https://t.me/techlistic
    Feel free to ask queries or share your thoughts in comments or email me.

    Comments

    Post a Comment

    Popular Posts

    Top 10 Demo Websites to Practice Selenium Webdriver Online

    -
    Image
    In this post you will find links of top demo websites/pages which Automation Professionals can use for practice purpose. Here is the list of demo websites:
    1. AUTOMATION PRACTICE FORM Level - BeginnerAbout - This form contains all the important form elements which we come across daily like text box, radio button, check box, select drop downs, multi-select box, button, links, File Upload, Download link.


    2. AUTOMATION PRACTICE TABLE Level - IntermediateAbout - This web page contains table data. You can test your Selenium and Java skills. It would require Selenium commands and java loops, conditions to read table data. 

    3. PRACTICE WINDOWS & ALERTS Level - IntermediateAbout - This web page contains buttons/ links which produces new web windows, javascript alerts etc. You can practice selenium commands to handle windows/alerts on this page.

    4. E-Commerce Practice Website Level - Intermediate/ProAbout - It’s a full featured e-commerce website simulator and my favorite. Here you can test anythi…
    Read more

    How To Handle Dynamic Xpaths (Web Table) in Selenium WebDriver

    -
    In this selenium webdriver post, we will learn how to handle dynamic web table. There might occur some scenarios where every time a page loads with different number of rows and columns or different columns for each row.

    For that, we have to put two for loops,
    1. first loop will iterate all the rows and
    2. second loop inside it will iterate the columns of each row


    publicclassDynamicTable{ WebDriver driver =new FirefoxDriver();@BeforeTestpublicvoidsetup()throws Exception { driver.manage().window().maximize(); driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); driver.get("https://www.techlistic.com/p/demo-selenium-practice.html");}@AfterTestpublicvoidtearDown()throws Exception { driver.quit();}@Testpublicvoidtest_Dynamic_Webtable(){// Locate table WebElement mytable = driver.findElement(By.xpath(".//*[@id='post']/div[1]/table/tbody"));// Locate rows of table and save locators of each row in a list List rows_table = mytable.findEl…
    Read more

    How to Take Screenshot and Partial Screenshot in Selenium WebDriver

    -
    Image
    In this tutorial we will learn to take full screenshot and partial screenshot. In automation we capture the screenshots for reference. To capture screenshot in Selenium 'TakeScreenshot' interface is used.




    Take Screenshot Command:
    /************************************ * Capture Screenshot * ************************************ *//* Create object of File class of Java * And capture screenshot using getScreenshotAs() method of Webdriver * Set Output type of screenshot taken as 'File'*/File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); /* Use FileUtils class of Java * Call it's copyFile method * Copy screenshot file to a location with some name and extension you want*/FileUtils.copyFile(screenshot,new File("D:\\screenshot.jpg"));



    How to Take Partial Screenshot:

    Sometimes we don't want to take screenshot of the full screen. Reasons might be, full size images would last in huge memory storage for image directory or…
    Read more

    Selenium WebDriver - Browser and Navigation Commands

    -
    Browser commands are the starting point of your Selenium Webdriver script. These commands used to launch browser, maximize it, open URL to be tested and other navigation commands.
    1. Browser Commands i. Set Path of browser/driver executable:
    This would be the first line of your webdriver script. You have to download the browser executable file for the browser you are using and set path of the driver executbale to system property.Like for firefox you have to download geckodriver.exe and place in your project. Similarly for other browsers you have to download their browser/driver executables.Download Driver Executables link - https://www.seleniumhq.org/download/Below is an example for Firefox.


    // Set Path of driver executable String driver_executable_path = "./src/com/techlistic/utils/geckodriver.exe"; System.setProperty("webdriver.gecko.driver", driver_executable_path);

    ii. Launch Broswer: // Launch Browser - Creating a Firefox instance WebDriver driver = new FirefoxDri…
    Read more

    Automation Framework Building 1st step - Implementing Code Re-usablility

    -
    Image
    In this post, you will learn kind of coding pattern which is very helpful in maintaining our automation code. This post is written insight to help beginners. We'll learn that instead of writing a linear script, we should create page (action) methods which in general contain actions which we are going to perform on our web software. 

    Let's say, we have a login functionality in our software and we have to automate it. In that case we'll create a method named login and write the commands like, entering username, password and click login in that method. Now we can use that method wherever we need it in other test cases as well. Benefits of using action methods are:

    Code Re-usabilityBetter maintainability of codeSharing below a sample script, in which I'm entering data in a web form using action methods:





    You can also place these action methods in some other class like Common.java. And if you want to re-use any of the methods in your Selenium script, just create the object Comm…
    Read more