1

I'm trying to create an automated web session where I log onto a website and select an option from a dropdown menu. I'm able to get to the page using selenium but I'm unable to click on the bar with opens a drop down menu and then select the option I want. Here is a screenshot of the page and it's HTML Code: [![enter image description here][1]][1] [![enter image description here][2]][2]

I would like to click on the 'Degraded Performance' option from the dropdown. I'm a bit stuck here because the HTML of the dropdown does not resemble [this one][3] at all (no way to 'select'). I've also tried watching YouTube videos to no success :(. Here is the script I'm running:

#login to status page if server status is not 'Ok'
driver = webdriver.Safari()

wait = WebDriverWait(driver, 20)

driver.get('https://manage.statuspage.io/login')

email = wait.until(EC.visibility_of_element_located((By.ID, "email")))
email.clear()
email.send_keys(user)
wait.until(EC.visibility_of_element_located((By.ID, "login-btn"))).click()
wait.until(EC.visibility_of_element_located((By.ID, "login-submit"))).click()
password = wait.until(EC.visibility_of_element_located((By.ID, "password")))
password.clear()
password.send_keys(passw)
driver.find_element_by_id('login-submit').click()

#Go to correct component

wait.until(EC.visibility_of_element_located((By.LINK_TEXT, "Components"))).click()
driver.get('https://manage.statuspage.io/pages/hfxvt9zqtn8m/components/g39hxh3gq0bc/edit')

#Change status 
wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "status-dropdown__value-container status-dropdown__value-container--has-value css-1b6odlt"))).click()

#here click on 'degraded performance'

#save
driver.find_element_by_id('btn-save-component').click()

The line ```wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "status-dropdown__value-container status-dropdown__value-container--has-value css-1b6odlt"))).click()``` returns a timeout exception. 
Any help would be really great!

HTML in text format:

<div class="status-dropdown__control css-4avucx-control"><div class="status-dropdown__value-container status-dropdown__value-container--has-value css-1b6odlt"><div class="status-dropdown__single-value css-lrg2au-singleValue" style="opacity: 1; transition: opacity 1ms;"><div class="_2cgnn8jOgeTLsVfOQFh5Rs"><i class="component-status page-colors text-color degraded_performance"></i><span style="padding-left: 8px; padding-bottom: 0px;">Degraded performance</span></div></div><input id="react-select-2-input" readonly="" tabindex="0" class="css-62g3xt-dummyInput" value=""></div><div class="status-dropdown__indicators css-t5ibhw"><div aria-hidden="true" class="status-dropdown__indicator status-dropdown__dropdown-indicator css-gg6ksl-indicatorContainer"><span role="img" aria-label="open" class="css-rq2oqu"><svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z" fill="currentColor" fill-rule="evenodd"></path></svg></span></div></div></div>


  [1]: https://i.stack.imgur.com/62NnJ.png
  [2]: https://i.stack.imgur.com/zMbo0.png
  [3]: https://stackoverflow.com/questions/7867537/how-to-select-a-drop-down-menu-value-with-selenium-using-python
Angry Physicist
  • 71
  • 7
  • 1
    also I would ask `#Change status wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "status-dropdown__value-container status-dropdown__value-container--has-value css-1b6odlt"))).click()` does this work in your automation ? – cruisepandey Aug 18 '21 at 13:11
  • Hi, sorry this is my mistake. This line doesn't work and returns a timeout exception – Angry Physicist Aug 18 '21 at 13:46
  • 1
    okay, Can you give me the HTML in text format, here this is what you have to do ,`Press F12 in Chrome -> go to element section -> then right click on the element you want to share the outer HTML - > select copy and then outer HTML` – cruisepandey Aug 18 '21 at 13:47
  • I edited the question and put the HTML in it for you to look. Thanks! – Angry Physicist Aug 18 '21 at 13:52

1 Answers1

1

See you can not use Select from Selenium since that is meant for drop down built using Select and option tag.

instead I would suggest you to click on Degraded Performance directly.

driver.find_element_by_xpath("//span[contains(text(),'Degraded Performance')]").click()

also I think first you will need to click on drop down bar, then the above code should work, probably will have to use Explicit wait as well.

Update 1 :

instead of

wait.until(EC.visibility_of_element_located((By.CLASS_NAME, "status-dropdown__value-container status-dropdown__value-container--has-value css-1b6odlt"))).click()

try this :

wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div[class^='status-dropdown__single-value']+input"))).click()
cruisepandey
  • 28,520
  • 6
  • 20
  • 38