Selenium, Selecting an element inside of a

问题

The error is:

Select only works on <select> elements, not on <span>.  Trying to accomplish this using PhantomJS & Selenium in Python.

Closest I've come to maybe finding an answer is this:

How can i select this span element?

Trying to learn Selenium automation, and figured working w/Gmail would be a challenege. Right now trying to select 'Birth Month' at the account creation stage.

https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ltmpl=default&hl=en

Right now, trying to select by xpath, as follows (and what results in error above).

select_birthday_month = Select(driver.find_element_by_xpath('//span[@id="BirthMonth"]')

Code on the Gmail page is:

<div class="form-element multi-field birthday" id="birthday-form-element">
  <fieldset>
  <legend><strong id="BirthdayLabel">Birthday</strong></legend>
  <label id="month-label" class="month">
  <span id="BirthMonthHolder" >
  <select id="BirthMonth" name="BirthMonth">
  <option value="">Month</option>
  <option value="01" >
  January</option>
  <option value="02" >
  February</option>
  <option value="03" >
  March</option>
  <option value="04" >
  April</option>
  <option value="05" >
  May</option>
  <option value="06" >
  June</option>
  <option value="07" >
  July</option>
  <option value="08" >
  August</option>
  <option value="09" >
  September</option>
  <option value="10" >
  October</option>
  <option value="11" >
  November</option>
  <option value="12" >
  December</option>
  </select>
  </span>
  </label>

I have tried:

 select_birthday_month = driver.find_element_by_xpath('//span[@id="BirthMonth"].click()

(as some other stackoverflow answers have suggested when encountering this problem). Then selecting x-path of a month value. But I'm getting error that says x-path for that can't be found.

Can anyone suggest best way to go about doing this? Do I need to click the element first? Is there a good way to get 'tricky' x-paths? Right click/inspect element on chrome works for basic things, but when getting into drop down lists--it doesnt cut it.

回答1:

The problem you have, is because that Select element from Google isn't implemented like normal Select Option. So technically you should avoid using Select.

However, there is a solution, first we inspect that element on how Google render the html select option, it shows something like this:

<span aria-invalid="false" class=" " id="BirthMonth">
<div aria-activedescendant=":0" title="Birthday" aria-haspopup="true" tabindex="0" aria-expanded="false" style="-moz-user-select: none;" role="listbox" class="goog-inline-block goog-flat-menu-button jfk-select">
<div aria-posinset="3" aria-setsize="12" role="option" id=":0" class="goog-inline-block goog-flat-menu-button-caption">March</div>
<div aria-hidden="true" class="goog-inline-block goog-flat-menu-button-dropdown">&nbsp;</div></div><div aria-haspopup="true" role="listbox" style="-moz-user-select: none; visibility: visible; left: 0px; top: -204px; display: none;" class="goog-menu goog-menu-vertical"><div id=":1" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">January</div></div><div id=":2" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">February</div></div><div id=":3" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">March</div></div><div id=":4" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">April</div></div><div id=":5" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">May</div></div><div id=":6" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">June</div></div><div id=":7" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">July</div></div><div id=":8" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">August</div></div><div id=":9" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">September</div></div><div id=":a" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">October</div></div><div id=":b" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">November</div></div><div id=":c" style="-moz-user-select: none;" role="option" class="goog-menuitem"><div class="goog-menuitem-content">December</div></div></div><input value="03" id="HiddenBirthMonth" name="BirthMonth" type="hidden"></span>
... and the rest ...

Google has rendered normal option into different dynamic divs under the span element, you wouldn't be able to Select a div or span so you have to think an alternative.

Which, luckily that dynamic div has classes called goog-inline-block goog-flat-menu-button jfk-select, you only need to find this element and send keys to simulate an action of Select <- I mean by sending typing keys.

Ok, here's the working solution:

...
# I find the div by class_name, of course you can use xpath
select_birthday_month = driver.find_element_by_class_name('jfk-select')
select_birthday_month.send_keys('January')
...

That's it! Sometimes you just need to think outside the box to tackle the similar issues, I hope this helps :)

See the result: