Find Element Strategies

Context:

Before we perform any operations like click, set text, etc. on web elements, we will need to identify the element on the web page.  As we mentioned before, “identifying” means identifying it in the DOM and being able to specify our search criteria for the element so that we can find a unique match.

The search criteria is generally referred to as selector/locator. The selectors can be any(or multiple) of the following:

  • Id
  • Name
  • Class
  • LinkText
  • PartiallinkText
  • TagName
  • Custom
  • Attribute
  • Xpath
  • Css

Prerequisites:

You can remove the existing feature files and step definitions – UserRegistration.feature and UserRegistration.cs respectively.  Add the two feature files: HtmlLocators.feature and WebElements.feature.  Then add to corresponding step definitions: HtmlLocators.cs and WebElements.cs.  Once completed, you project structure should appear as it does below:

find_elements_project

Syntax:

  1.  Every HTML element in Selenium .NET is of type IWebElement
  2. An IWebElement can be compared to an in-memory (DOM) object representation of HTML tag
  3. To identify a tag (aka. web element) we might need any (one of) of the following:
    1. By.Id
    2. By.Name
    3. By.LinkText
    4. By.PartialLinkText
    5. By.ClassName
    6. By.CssSelector
    7. By.TagName
    8. By.XPath

Selector/Locator:

Lets hit the website http://www.practiceselenium.com/practice-form.html and right click on “firstname” text box and inspect element in Chromechrome_developer_tools browser.

  • We can see the HTML representation of the text field “firstname”.
  • It has attributes name=firstname and type=text
  • We will use By.Name(“firstname”) to identify this element in Selenium
  • This is the strategy we will follow to identify elements. If there are multiple attributes, then the order of preference can be id < name < class < tagName < className < cssSelector < xpath [We did not mention LinkText because it applies only to a link and not all Web Elements]
  • With this background, lets identify different HTML elements on this page and print its html

By Id:

By Name:

By LinkText:

By ClassName:

Retrieve HTML of Element:

To retrieve the HTML of IWebElement we print the attribute “OuterHTML” for the element.

To retrieve attributes, we use the method “GetAttribute” on the IWebElement.  We will discuss all the options in the training class, but for now, this should give you enough idea how to retrieve different values out of a HTML tag [aka. WebElement in Selenium language]

Let’s try to identify all elements on the above practiceselenium website and print its html.

The steps are the same as described in the videos and description on “Browser Commands”

Cucumber Features

NOTE: Mapping 1-1 feature to step definition is not a good practice as per cucumber, but for now our focus is to learn selenium java api first, so we can refactor this code later.

WebElements.feature

 HtmlLocators.feature

Step Definitions