Selenium，选择 <span> 中的一个元素

Question

错误是：

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

我可能找到的最接近的答案是：

How can i select this span element?

尝试学习 Selenium 自动化，并认为工作 w/Gmail 将是一个挑战。现在正在尝试 select 'Birth Month' 在帐户创建阶段。

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

现在，正在尝试通过 xpath select，如下所示（以及导致上述错误的原因）。

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

Gmail 页面上的代码是：

<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>

我试过：

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

（正如其他一些 Whosebug 答案在遇到此问题时所建议的那样）。然后 selecting 一个月值的 x 路径。但我收到错误消息，提示无法找到它的 x 路径。

有人可以建议最好的方法吗？我需要先点击元素吗？有什么好的方法可以获取 'tricky' x 路径吗？ chrome 上的右 click/inspect 元素适用于基本的东西，但是当进入下拉列表时——它不会削减它。

Answer 1

您遇到的问题是因为 Google 中的 Select 元素未像正常 Select 选项那样实现。所以从技术上讲，你应该避免使用 Select.

但是，有一个解决方案，首先我们检查该元素，了解 Google 如何呈现 html select 选项，它显示如下：

<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 已将普通选项呈现为 divs 下的 span 元素，您不会无法 Select a div 或 span 所以你必须考虑替代方案。

其中，幸运的是动态 div 有类调用 goog-inline-block goog-flat-menu-button jfk-select，你只需要找到这个元素并将密钥发送到模拟 Select 的动作 <- 我的意思是发送输入键。

好的，这是可行的解决方案：

...
# 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')
...

就是这样！有时您只需要跳出框框思考即可解决类似问题，希望这对您有所帮助:)

查看结果：

Selenium，选择 <span> 中的一个元素

Selenium, Selecting an element inside of a <span>

python

xpath

selenium-webdriver

phantomjs

html-select