Selenium 4 Relative Locator - How to locate the First Name input box using Selenium with Java

Question

I am unable to enter the text in the input box which is to the right of the label "FirstName" using selenium 4 toRightOf.

WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://demo.opencart.com/index.php?route=account/register&language=en-gb");
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));
WebElement fName = driver.findElement(By.xpath("//label[text()='First Name']"));
System.out.println(fName.isDisplayed());
driver.findElement(RelativeLocator.with(By.tagName("input")).toRightOf(fName)).sendKeys("Testuser1");

Answer 1

Relative Locators

Relative Locators (previously called as Friendly Locators) was introduced in selenium4. These locators are helpful when it is a bit difficult to construct a locator for the desired element, but easy to describe spatially the desired element where the element is in relation to an element that does have an easily constructed locator.

Selenium uses the JavaScript function getBoundingClientRect() to determine the size and position of elements on the page, and can use this information to locate neighboring elements. Relative locator methods can take as the argument for the point of origin, either a previously located element reference, or another locator.

---

Solution

To send a character sequence to the First Name <input> you can use the following solution:

driver.get("https://demo.opencart.com/index.php?route=account/register&language=en-gb");
WebElement labelFirstName =  driver.findElement(By.xpath("//label[contains(., 'First Name')]")); By
firstName = RelativeLocator.with(By.tagName("input")).near(labelFirstName);
driver.findElement(firstName).sendKeys("Bimlesh");

Optimizing the code:

driver.get("https://demo.opencart.com/index.php?route=account/register&language=en-gb");
driver.findElement(RelativeLocator.with(By.tagName("input")).near(driver.findElement(By.xpath("//label[contains(., 'First Name')]")))).sendKeys("Bimlesh");

Inducing WebDriverWait:

driver.get("https://demo.opencart.com/index.php?route=account/register&language=en-gb");
new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(RelativeLocator.with(By.tagName("input")).near(driver.findElement(By.xpath("//label[contains(., 'First Name')]"))))).sendKeys("Bimlesh");

Browser Snapshot:

---

This usecase

Having said that, it's appears sending a text to the First Name <input> box would be easier using either of the regular locator strategies as follows:

• Using cssSelector:

  driver.get("https://demo.opencart.com/index.php?route=account/register&language=en-gb");
  new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input#input-firstname"))).sendKeys("Bimlesh");
  

• Using xpath:

  driver.get("https://demo.opencart.com/index.php?route=account/register&language=en-gb");
  new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@id='input-firstname']"))).sendKeys("Bimlesh");