Finding Elements

Locating elements is an essential part in the automation process. Selenium web-driver provides various ways and methods to this effect.

Inspecting pages and elements

To inspect a page/element in chrome:
-Right click on component and select inspect.
-It opens developer tools where you can see the component details

In addition, chrome allows you to get the xpath to a particular element. To get it, right click on the inspected element, select Copy and click on Copy full XPath.

The findElement() method

This method returns an instance of a web element. If an element is not found, it returns an exception, NoSuchElementFound.

It takes a locator as an instance of By class as an argument.

findElements() method on the other hand returns a list of WebElements that match the search

1. Finding elements By ID
   find_element(:id, “<element-Id>) — locates attribute by Id

@driver.find_element(:id, 'email').send_keys 'jhan@rancenylt.ga'

2. By Name:

find_element(:name, “<element-name”>) — locates element using name attribute

@driver.find_element(:name, 'username').send_keys 'Crispytest'

3. By Class name:

find_element(:class, “<element-class”>) — locates element(s) using that attribute

@driver.find_element(:class, 'users')

4. By Tag Name:

find_element(:tag_name, “<htmltagname>”)

@driver.findElement(:tagName, 'input')

NB: This method is not reliable for locating individual elements incase a page has multiple instances of that element.

5. By Link text

find_element(:link_text, “<linktext>”)

6. By XPath:

find_element(:xpath, “<xpath link>”)

@driver.findElement(:xpath, '//*[@id="schedule_test"]')
@driver.findElement(:xpath, '/html/body/header/div/div/div[1]/a')

Finding elements using predicates

A predicate is a statement/function that returns a boolean and it’s embedded in square brackets[].

If there are similar elements, use an element’s index in the DOM to find it.

@driver.findElement(:xpath, '/html/body/div/div/main/div/div[1]/div/button[3]/span[1]')

7. By CSS:

find_element(:css, “<css selector>”)

Finding elements using CSS Selectors

Using cssSelector() method.

Specify the type of HTML tag, a dot followed by the value of class attribute

@driver.findElement(:cssSelector, 'input.schedule_test')

1. By ID selector

Specify the html tag, a # followed by the value of the class attribute

@driver.findElement(:cssSelector, 'input#schedule_test')

2. By Attributes selector

CSS allows finding elements using other element attributes. e.g name

@driver.findElement(:cssSelector, 'input[name=schedule_test]').click

Sometimes one attribute isn’t enough to locate an element hence the need to combine several attributes.

@driver.findElement(:cssSelector, 'input[type=submit][value=3]').click

Partial Match on Attribute Values

CSS selector enables you to find elements matching partial attribute values. This is dire when testing apps with dynamic values which change with every refresh/page request.

Selenium webdriver uses CSS parsing engine to locate elements on a page.

It provides methods, rules and patterns to locate an element.

Locating elements using text

When elements have not been assigned any attributes, css selector and xpath find elements based on text contents.

1. Xpath’s text functions.
   text() function — used to find if an element contains the specified text
2. Exact text value in XPath
   This locates the element matching the exact text

@driver.findElement(:xpath, “//td[.=’Item 1']”)

3. CSS selector contain() pseudo-class
contains() pseudo-class can be used to find out if an element contains the specified text.

@driver.findElement(:cssSelector, “td:contains(‘Item 1’)”)

CSS selector and Xpath have methods that find elements based on their text content.

Advanced CSS selectors

1. Finding child elements:
   > used to denote the parent-child relationship
   “td:contains(‘Item 1’)”

@driver.find_element(:cssSelector, “form#loginForm > input”)

nth-child()

@driver.find_element(:cssSelector, “form#loginForm :nth-child(2)”)

2. Finding sibling elements:
sibling elements can be located using + operator

3. User action pseudo-classes:
e.g focus, hover, active

4. UI state pseudo-classes:
Finds element for various states e.g when control is enabled, disables and checked.

Locating elements is a crucial process in the automation process and we covered various ways to find them.

The most preferred ways to find element is by id, name and class; however, when you’re in a situation where they aren’t available, then you have the other options.

References:

https://www.guru99.com/using-contains-sbiling-ancestor-to-find-element-in-selenium.html

https://www.softwaretestinghelp.com/css-selector-selenium-locator-selenium-tutorial-6/