select下拉框

前言

我们通常会遇到两种下拉框，一种使用的是html的标签select，另一种是使用input标签做的假下拉框。

后者我们通常的处理方式与其他的元素类似，点击或使用JS等。

而对于前者，selenium给了有力的支持，就是Select类。

本篇以百度设置下拉选项框为案例，详细介绍select下拉框相关的操作方法。

 

一、认识select

1.打开百度-设置-搜索设置界面，如下图所示

2.箭头所指位置，就是select选项框，打开页面元素定位，下方红色框框区域，可以看到select标签属性：<select id="nr" name="NR">

3.选项有三个：

<option selected="" value="10">每页显示10条</option>
<option value="20">每页显示20条</option>
<option value="50">每页显示50条</option>

 

二、二次定位

1.定位select里的选项有多种方式，这里先介绍一种简单的方法：二次定位
2.基本思路，先定位select框，再定位select里的选项            
3.代码如下：

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.implicitly_wait(10)
# 鼠标移动到"设置"按钮
mouse = driver.find_element_by_link_text("设置")
ActionChains(driver).move_to_element(mouse).perform()
driver.find_element_by_link_text("搜索设置").click() # 点击搜索设置
# 分两步：先定位下拉框，再点击选项
loc = driver.find_element_by_id("nr")
time.sleep(2) # 不加延时有时候会报错，提示ElementNotVisibleException: Message: element not visible: Element is not currently visible and may not be manipulated
loc.find_element_by_xpath("//option[@value='20']").click()

还有另外一种写法也是可以的，把最下面两步合并成为一步：

driver.find_element_by_id("nr").find_element_by_xpath("//option[@value='20']").click() # 这样有时候也还是会报错，提示ElementNotVisibleException: Message: element not visible: Element is not currently visible and may not be manipulated

 

三、直接定位

1.有很多小伙伴说firebug只能定位到select框，不能定位到里面的选项，其实是工具掌握的不太熟练。小编接下来教大家如何定位里面的选项。
2.用firebug定位到select后，下方查看元素属性地方，点select标签前面的+号，就可以展开里面的选项内容了。

 

3.然后自己写xpath定位或者css,一次性直接定位到option上的内容。（不会自己手写的，回头看前面的元素定位内容）

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.implicitly_wait(10)
# 鼠标移动到"设置"按钮
mouse = driver.find_element_by_link_text("设置")
ActionChains(driver).move_to_element(mouse).perform()
driver.find_element_by_link_text("搜索设置").click() # 点击搜索设置
# 直接定位
driver.find_element_by_xpath("//select[@id='nr']/option[@value='20']").click()
driver.find_element_by_xpath("//select[@id='nr']/option[2]").click() # 通过索引
driver.find_element_by_css_selector("select#nr>option[value='20']").click()
driver.find_element_by_css_selector("select#nr>option:nth-child(2)").click() # 通过索引
#注意，还是有可能出现报错。提示：ElementNotVisibleException: Message: element not visible: Element is not currently visible and may not be manipulated

 

四、Select模块(index)

1.除了上面介绍的两种简单的方法定位到select选项，selenium还提供了更高级的玩法，导入Select模块，直接根据属性或索引定位。
2.先要导入select方法：from selenium.webdriver.support.select import Select       
3.然后通过select选项的索引来定位选择对应选项（从0开始计数），如选择第二个选项:select_by_index(1)

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.implicitly_wait(10)
# 鼠标移动到"设置"按钮
mouse = driver.find_element_by_link_text("设置")
ActionChains(driver).move_to_element(mouse).perform()
driver.find_element_by_link_text("搜索设置").click() # 点击搜索设置
# 通过索引，select_by_index()
loc = driver.find_element_by_id("nr")
time.sleep(1) # 加上延时，防止出现ElementNotVisibleException
Select(loc).select_by_index(1) # 索引从0开始计数

 

五、Select模块(value)

1.Select模块里面除了index的方法，还有一个方法，通过选项的value值来定位。每个选项，都有对应的value值（注意：value是option标签的一个属性值，并不是显示在下拉框中的值），如

<select id="nr" name="NR">
    <option selected="" value="10">每页显示10条</option>
    <option value="20">每页显示20条</option>          
    <option value="50">每页显示50条</option>

2.第二个选项对应的value值就是"20"：select_by_value("20")

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.implicitly_wait(10)
# 鼠标移动到"设置"按钮
mouse = driver.find_element_by_link_text("设置")
ActionChains(driver).move_to_element(mouse).perform()
driver.find_element_by_link_text("搜索设置").click() # 点击搜索设置
# 通过value，select_by_value()
loc = driver.find_element_by_css_selector("#nr")
time.sleep(1)
Select(loc).select_by_value("20")

 

六、Select模块(text)

1.Select模块里面还有一个更加高级的功能，可以直接通过选项的文本内容来定位。
2.定位“每页显示20条”：select_by_visible_text("每页显示20条")（注意：visible_text是在option标签中间的值，是显示在下拉框的值）

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.select import Select
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.implicitly_wait(10)
# 鼠标移动到"设置"按钮
mouse = driver.find_element_by_link_text("设置")
ActionChains(driver).move_to_element(mouse).perform()
driver.find_element_by_link_text("搜索设置").click() # 点击搜索设置
# 通过text，select_by_visible_text()
loc = driver.find_element_by_css_selector("#nr")
time.sleep(1)
Select(loc).select_by_visible_text("每页显示20条")

 

七、Select模块其它方法

1.select里面方法除了上面介绍的三种，还有更多的功能如下

select_by_index()  :通过索引定位
select_by_value()  :通过value值定位
select_by_visible_text() :通过文本值定位
deselect_all()          ：取消所有选项
deselect_by_index()     ：取消对应index选项
deselect_by_value()      ：取消对应value选项
deselect_by_visible_text() ：取消对应文本选项
first_selected_option()  ：返回第一个选项
all_selected_options()   ：返回所有的选项

 

补充：

1、导入（import）

你可以用以下方式导入：

from selenium.webdriver.support.ui import Select
# 或者直接从select导入
# from selenium.webdriver.support.select import Select

这两种方法没有本质的区别，你如果去看ui库，你会发现，它也只是把select import进去。

 

2、选择（select）

Select类提供了三种选择某一选项的方法：

select_by_index(index)
select_by_value(value)
select_by_visible_text(text)

注意：

  1. index从 0 开始
  2. value是option标签的一个属性值，并不是显示在下拉框中的值
  3. visible_text是在option标签中间的值，是显示在下拉框的值

 

3、反选（deselect）

自然的，有选择必然有反选，即取消选择。Select提供了四个方法给我们取消原来的选择：

deselect_by_index(index)
deselect_by_value(value)
deselect_by_visible_text(text)
deselect_all()

前三种分别于select相对应，第四种是全部取消选择，是的，你没看错，是全部取消。有一种特殊的select标签，即设置了multiple=”multiple”属性的select，这种select框是可以多选的，你可以通过多次select，选择多项选项，而通过deselect_all()来将他们全部取消。

全选？NO，不好意思，没有全选，不过我想这难不倒你，尤其是看了下面的这几个属性。

4、选项（options）

当我们选择了选项之后，想要看看选择的是哪项，所选的是否是我想选的，怎么办？别担心，Select为你提供了相应的方法（或者应该说是属性了）： 

options
all_selected_options
first_selected_option

上面三个属性，分别返回这个select元素所有的options、所有被选中的options以及第一个被选中的option。示例如下：

<html>
<head><title></title></head>
<body>
<script>
function oc(){
    alert(document.f1.t1.value());
}
</script>
<form>
<select id="s1Id">
<option></option>
<option value="o1" id="id1">o1</option>
<option value="o2" id="id2">o2</option>
<option value="o3" id="id3">o3</option>
</select>

<br/><br/>

<select id="s2Id">
<option></option>
<option value="o1">o1</option>
<option value="o2">o2</option>
<option value="o3">o3</option>
</select>

<br/><br/>

<select id="s3Id">
<option></option>
<option value="o1val">o1</option>
<option value="o2val">o2</option>
<option value="o3val">o3</option>
<option value="o4val">    With spaces</option>
<option value="o4val">&nbsp;&nbsp;&nbsp;&nbsp;With nbsp</option>
</select>

<br/><br/>

<select id="s4Id" multiple="multiple" size="6">
<option></option>
<option value="o1val">o1</option>
<option value="o2val">o2</option>
<option value="o3val">o3</option>
<option value="o4val">    With spaces</option>
<option value="o4val">&nbsp;&nbsp;&nbsp;&nbsp;With nbsp</option>
</select>


<table>
<tr>
<td>Preferred Contact Mode</td>
</tr>
<tr>
<td>
<select id="s1">
<option value="-1">--SELECT--</option>
<option value="46">Business Phone</option>
<option value="47">Cell Phone</option>
<option value="48">Email</option>
<option value="49">Fax</option>
<option value="51">Home Phone</option>
<option value="50">Mail</option>
</select>

</td>
</tr>
</table>

</form>
</body>
</html>

 

（1）想查看一个select所有的选项

...

s1 = Select(driver.find_element_by_id('s1Id'))

for select in s1.options:
    print select.text

...

结果：（一共四项，第一项为空字符串。）

（2）想查看我已选中的选项

...

s4 = Select(driver.find_element_by_id('s4Id'))

s4.select_by_index(1)
s4.select_by_value("o2val")
s4.select_by_visible_text("With spaces")
s4.select_by_visilbe_text("    With nbsp")

for select in s4.all_selected_options:
    print select.text

...

结果：

输出所有被选中的选项，适合于能多选的框，仅能单选的下拉框有更合适的方法（当然用这种方法也可以）。这里需要注意的是两种不同空格的选择：

空格‘ ’，这种在以visible_text的方式选择时，不计空格，从第一个非空格字符开始
网页空格& nbsp;，对于这种以nbsp为空格的选项，在以visible_text的方式选择时，需要考虑前面的空格，每一个nbsp是一个空格

（3）想要查看选择框的默认值，或者我已经选中的值

...

s2 = Select(driver.find_element_by_id('s2Id'))

print s2.first_selected_option.text

s2.select_by_value("o2")
print s2.first_selected_option.text

...

结果：

第一行输出默认选项的文本——空字符串”“；第二行输出选中的选择的文本——”o2”。

 

总结：

Select提供了三种选择方法：

select_by_index(index) ——通过选项的顺序，第一个为 0 
select_by_value(value) ——通过value属性 
select_by_visible_text(text) ——通过选项可见文本

同时，Select提供了四种方法取消选择：

deselect_by_index(index) 
deselect_by_value(value) 
deselect_by_visible_text(text) 
deselect_all()

此外，Select提供了三个属性方法给我们必要的信息：

options ——提供所有的选项的列表，其中都是选项的WebElement元素 
all_selected_options ——提供所有被选中的选项的列表，其中也均为选项的WebElement元素 
first_selected_option ——提供第一个被选中的选项，也是下拉框的默认值

通过Select提供的方法和属性，我们可以对标准select下拉框进行任何操作。

但是对于非select标签的伪下拉框，就需要用其他的方法了，通常的处理方式与其他的元素类似，点击或使用JS等。

 

posted @ 2018-12-28 22:23  风聆  阅读(69)  评论(0)    收藏  举报