Relative Locators ‘Above’ method in Selenium 4 with C#
Welcome to 2nd article in Selenium 4 new features series. We would learn about new feature ‘Relative Locators’ in Selenium 4 with C Sharp.
What you will Learn:
Relative locators - Introduction
Relative Locator ‘above’ method (Example 1)
Example 2
Code snippet for example 1
Code snippet for example 2
Relative Locators - Introduction
Relative locators is a new advancement that got introduced in Selenium 4. Let us learn their usage with C sharp language.
Relative Locator ‘Above’ method
Launch the website
https://opensource-demo.orangehrmlive.com/
The use case is: we want to locate the ‘Password’ text box field that is Above the ‘LOGIN’ button and then write some text inside the ‘Password’ field (see below).
You might be wondering as to why do we need to do that? Why can’t we simply locate the ‘Password’ field and write some text into it? Why should we use the ‘above’ method to locate ‘Password’ field that is above the LOGIN field?
The answer to this question is that, there might be a scenario in which a specific element does not have a unique identifier (example: id, name, class etc). In this scenario, we can look for another element that has a unique property and then use relative locator methods to identify another element that does not have unique property.
Let us assume here that ‘Password’ field does NOT have a unique property to identify it. Hence we would be taking the help of LOGIN button to locate ‘Password’ field.
Let us see in practical. On inspecting LOGIN button, we see it has unique ‘id’ property that we can use
So we can write as shown below
Next let us inspect ‘Password’ text field. Notice that it is represented by tagname ‘input’. Notice that ‘Password’ field does have the unique ‘id’ property, but for time being, just assume that ‘id’ property is not present
Let us now type driver.FindElement(RelativeBy.)
As seen above, we can see ‘WithLocator’ method inside the RelativeBy class.
Next, see below. There is ‘Above’ method that we can use to identify another element that is above LOGIN button
We are now asking selenium to locate an element Above loginBtn element whose tagname is ‘input’
Let us capture this element
Next, let us send some keys to this password field
The complete C sharp script is as below:
Save and run the script.
Notice below that selenium has successfully located the ‘Password’ field above the LOGIN button and typed the text “hello” inside it
Another Example
Let us take another example. Launch https://www.way2automation.com/angularjs-protractor/registeration/#/login
Inspect Username, Password and Username *
Notice below that all 3 are represented by tagname ‘label’ and none of them have a unique property
The below code will help us get the text of Username * label
Run this script. Notice below that the console output prints the text Username *
Similarly you can print the values of Password and Username labels.
This is how we can use the relative locator’s Above method in Selenium4 with C Sharp.
Code snippet for example 1
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace RelLoc_Above
{
class Program
{
static void Main(string[] args)
{
IWebDriver driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://opensource-demo.orangehrmlive.com/");
IWebElement loginBtn = driver.FindElement(By.Id("btnLogin"));
IWebElement inpt = driver.FindElement(RelativeBy.WithLocator(By.TagName("input")).Above(loginBtn));
inpt.SendKeys("hello");
}
}
}
Code snippet for example 2
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
namespace RelLoc_Above
{
class Program
{
static void Main(string[] args)
{
IWebDriver driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://www.way2automation.com/angularjs-protractor/registeration/#/login");
Thread.Sleep(2000);
IWebElement uname2Field = driver.FindElement(By.Id("formly_1_input_username_0"));
Console.WriteLine(driver.FindElement(RelativeBy.WithLocator(By.TagName("label")).Above(uname2Field)).Text);
}
}
}
Thank you for reading!