How to locate the webelement 'User Role' under admin menu in opensource-demo.orangehrmlive.com using Selenium

I find difficult in finding the locator for the webelement 'User Role' within the website: https://opensource-demo.orangehrmlive.com/web/index.php/admin/saveSystemUser

Steps:

1. login to the above siteusing user id:admin,pwd:admin123
2. click on 'Admin' >'User Management'
3. click on 'Add user"
4. I want to choose 'ESS' from 'User Role' drop down
   But im not able to find the locator for ESS webelement.
   Pls help me out.

To locate the webelement for User Role within the website https://opensource-demo.orangehrmlive.com/web/index.php/admin/saveSystemUser you can use the following locator strategy:

• XPATH:

  //label[contains(., 'User Role')]//following::div[1]//div[@class='oxd-select-text-input']
  

Problem: The dropdown values are disappearing elements, which means you cannot inspect the elements and locate the desired element easily.

Solution: Refer below code. You need to click on the dropdown down arrow element first so that dropdown values are visible. Then locate the parent element of these dropdown values (//div[@role='listbox']). Using this element, you can easily locate its child elements(which basically will be the dropdown values).

• (//div[@role='listbox']//child::div)[3] -- This is to select ESS
• (//div[@role='listbox']//child::div)[2] -- This is to select Admin

# Click on dropdown downarrow element
driver.find_element(By.XPATH, "(//i[@class='oxd-icon bi-caret-down-fill oxd-select-text--arrow'])[1]").click()
# Click on ESS element
driver.find_element(By.XPATH, "(//div[@role='listbox']//child::div)[3]").click()

Check the complete working code and explanation below:

import time

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://opensource-demo.orangehrmlive.com/web/index.php/admin/saveSystemUser")
driver.maximize_window()
driver.implicitly_wait(30)

# below 3 lines will log into the application
driver.find_element(By.NAME, "username").send_keys("Admin")
driver.find_element(By.NAME, "password").send_keys("admin123")
driver.find_element(By.XPATH, "//button[@type='submit']").click()

# click on Admin menu
driver.find_element(By.XPATH, "//span[text()='Admin']").click()
# Click on Add user
driver.find_element(By.XPATH, "//button[contains(.,'Add')]").click()
# Click on dropdown downarrow element
driver.find_element(By.XPATH, "(//i[@class='oxd-icon bi-caret-down-fill oxd-select-text--arrow'])[1]").click()
# Click on ESS element
driver.find_element(By.XPATH, "(//div[@role='listbox']//child::div)[3]").click()
time.sleep(10)

RESULT:

<h2>UPDATE:</h2> Click <kbd>F12</kbd> key, and click on the User Role dropdown. You will notice, <div role="listbox"> element getting visible(see below screen).