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

Question

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.

Answer 1

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:

UPDATE:

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