0

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.
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Madhu
  • 13
  • 5

2 Answers2

1

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']
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
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:

enter image description here

UPDATE:

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

enter image description here

Shawn
  • 4,064
  • 2
  • 11
  • 23
  • I ran ur code and it worked out perfectly,I can understand everything except this one, //div[@role='listbox']//child::div)[3], can u pls explain me this one? Thanks for your quick & prompt response. – Madhu Jun 30 '23 at 14:53
  • Glad it worked! What part did you not understand? – Shawn Jun 30 '23 at 14:55
  • So that's the XPath which will actually locate the value `ESS` from dropdown. There is a `
    ` node which is parent to the 3 dropdown values(which are '--Select--', Admin and ESS). You can inspect the page and click on dropdown, this `div` node will be visible. However inside this `div` exists the 3 child `div` elements which are the dropdown values. So what we are doing in this XPath expression is, locating the 3rd `div` child element of the parent `div` element. Let me know if you are not clear.
     – Shawn Jun 30 '23 at 15:05
  • I understand ur explanation but from where did u fetch this '@role' attribute, below is my HTML code,
    -- Select --
     – Madhu Jul 01 '23 at 02:59
  • Shawn,pls explain me @role attribute because I didnt see that in my HTML code – Madhu Jul 03 '23 at 04:56
  • @Madhu - Check the updated answer. Let me know if you still cannot find it. – Shawn Jul 03 '23 at 08:34
  • -- Select --
     – Madhu Jul 03 '23 at 10:38
  • Yes beneath this element(in your above comment), you should see `
    `. You will see it when you click on the dropdown.
     – Shawn Jul 03 '23 at 10:44
  • Admin
    when I click from the dropdown,the values gets changed like Admin/ESS based on our selection and I didnt find any code like yours with@role attr     – Madhu Jul 03 '23 at 10:51
  • ***"when I click from the dropdown,the values gets changed like Admin/ESS based on our selection"*** YOU SHOULD NOT SELECT THE OPTION FROM DROPDOWN. JUST EXPAND THE DROPDOWN SELECTIONS. – Shawn Jul 03 '23 at 11:35
  • yep ,I found that, Thanks for your great help, you are an amazing mentor :) – Madhu Jul 03 '23 at 15:33
  • Glad you managed to find it, finally :) [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) – Shawn Jul 03 '23 at 15:39