硒，在< span>中选择元素. [英] Selenium, Selecting an element inside of a <span>
问题描述
错误是:
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:
尝试学习Selenium自动化，并认为使用Gmail可以正常工作.现在，在帐户创建阶段尝试选择出生月份".
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.
现在，尝试按xpath进行选择，如下所示(以及导致上述错误的原因).
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"]')
Gmail页面上的代码为:
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>
我尝试过:
select_birthday_month = driver.find_element_by_xpath('//span[@id="BirthMonth"].click()
(遇到此问题时，建议使用其他一些stackoverflow答案).然后选择一个月值的x路径.但是我收到一条错误消息，指出找不到x-path.
(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.
有人可以建议这样做的最佳方法吗?我需要首先单击该元素吗?是否有获取棘手" x路径的好方法? chrome上的右键单击/检查元素适用于基本功能，但是进入下拉列表时，它不会剪切.
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.
推荐答案
您遇到的问题是，由于Google的Select元素没有像普通的Select Option那样实现.因此，从技术上讲，您应该避免使用选择.
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.
但是，有一个解决方案，首先我们检查该元素有关Google如何呈现html 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"> </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已将 span 元素下的普通选项转换为不同的动态 div ，您将无法选择一个 div 或 span ，因此您必须考虑其他方法.
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.
幸运的是，动态 div 具有名为goog-inline-block goog-flat-menu-button jfk-select的类，您只需找到此元素并发送键以模拟进行 Select <-我的意思是发送打字键.
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 :)
查看结果:
这篇关于硒，在< span>中选择元素.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
