selenium工具操作web页面中的下拉框元素

前言

1、在Web网页中经常会遇到下拉框(下拉列表)：比如说分页、每页显示的条数、语言的切换等功能，很多时候经常都是以下拉框的形式展现。

2、下拉列表是网页中一种最节省页面空间的选择方式，默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项进而进行选择。

3、在实际Web网页开发中下拉框的实现方式有很多：

⑴<select>和<option>实现下拉框

⑵<ul>和<li>实现下拉框

⑶其他

4、对于不同方式实现的下拉框，在使用Selenium工具对元素进行操作时会有一定的差距。所以在进行selenium工具对下拉框元素操作时最好分清楚下拉框的实现方式是什么。

5、selenium工具操作页面下拉框，一般来说分为两种情况，一种是标准的select标签下拉框；另一种是非select类下拉框，比如 ul-li 标签下拉框。

6、针对select标签的下拉框，selenium提供了一个select类；针对非select标签实现的下拉框，可以通过模拟鼠标点击的方式实现操作。

select标签下拉框

1、如下图所示，下拉框为select标签，此时可以使用select类提供的三种方法定位到下拉框中的元素。

2、select下拉框感觉是HTML中标准的下拉框实现方式（但是并不是很常见）（具体还是需要根据F12去浏览器的开发者模式查看）

3、在HTML中select下拉框是由<select>和<option>配合使用的。具体语法格式如下：

⑴<select>标签用来创建一个下拉列表
⑵<option>标签表示下拉列表中的每一项(条目)

4、针对select下拉框Selenium提供了专门的接口函数来操作对应的元素：Select类

from selenium.webdriver.support.select import Select

5、操作步骤：

 ⑴首先定位到select标签，然后进行实例化(获取一个select对象)
 ⑵通过select对象进行选项的定位选择等：通过选项下标、value、text

6、Select类有以下操作方法：

7、实例代码：

import time
from selenium import webdriver
from selenium.webdriver.support.select import Select

# 实例化浏览器，访问目标网页，窗口最大化
driver = webdriver.Chrome()
driver.get("file:///C:/User/Desktop/%E4%B8%8B%E6%8B%89%E6%A1%86%E7%BB%83%E4%B9%A0.html")
driver.maximize_window()
time.sleep(1)
# 定位下拉框,实例化select方法
ele = driver.find_element_by_id("poet")
select_ele = Select(ele)
# 方法一：通过索引选择下拉元素
select_ele.select_by_index(0)
time.sleep(1)
# 方法二：通过下拉元素的value选择下拉元素
select_ele.select_by_value("03")
time.sleep(1)
# 方法三：通过下拉元素的文本内容选择下拉元素
select_ele.select_by_visible_text("白居易")
time.sleep(1)
# 退出
driver.quit()

Selenium工具操作只能选取单个值的select下拉框

1、一般情况下我们遇到的(select)下拉框都是只能选择一个值(元素)的下拉框(不能选择多个值)；（当然也存在可以选择多个值(元素)的下拉框）

2、对于只能选择一个值(元素)的下拉框，在选择下一个元素后会自动取消上一次选择的元素(始终只能选择一个值)。

⑴select_by_index()、select_by_value()、select_by_visible_text()等方法已经有点击的功能了，所以不再需要在click()操作、

⑵相当于这些方法是：定位 + 点击

3、下拉框实现代码如下：

"""
#下拉框语法：
    <select>
        <option></option>
    </select>
#示例：后面就以这个HTML为例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                <!-- 下拉框 -->
<!--            <select id="mouse" multiple="multiple">-->
                <select id="mouse" >
                    <option id="0" value="guangzhou">广州</option>
                    <option id="1" value="shenzheng">深圳</option>
                    <option id="2" value="shandong">山东</option>
                    <option id="3" value="beijing">北京</option>
                    <option id="4" value="shanghai">上海</option>
                    <option id="5" value="chengdu">成都</option>
                </select>
            </div>
        </form>
    </div>
</body>
</html>

4、Select类源码

#Select类源码：可以看到首先需要传入一个元素的Element对象来实例化一个Select对象
# 这个传入的Element对象就是Select标签元素
class Select(object):
 
    def __init__(self, webelement):
        """
        Constructor. A check is made that the given element is, indeed, a SELECT tag. If it is not,
        then an UnexpectedTagNameException is thrown.
        :Args:
         - webelement - element SELECT element to wrap
        Example:
            from selenium.webdriver.support.ui import Select \n
            Select(driver.find_element_by_tag_name("select")).select_by_index(2)
        """
        if webelement.tag_name.lower() != "select":
            raise UnexpectedTagNameException(
                "Select only works on <select> elements, not on <%s>" %
                webelement.tag_name)
        self._el = webelement
        multi = self._el.get_attribute("multiple")
        self.is_multiple = multi and multi != "false"

5、selenium工具操作下拉框

import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
 
# 获取浏览器对象
driver = webdriver.Chrome()
# 设置浏览器窗口大小
driver.maximize_window()
# 进入页面
driver.get('C:\\Py_Demo\\Demo\\Py_Project\\demo.html')
time.sleep(2)
 
# 定位select标签
selectTag = driver.find_element_by_id('mouse')
# 实例化一个select对象：传入Select标签元素的Element对象
select = Select(selectTag)
print(select)
print(type(select))
 
# 通过select对象进行下拉框选项操作
# 根据下标进行选择，从0开始
select.select_by_index(1)
time.sleep(2)
# 根据value的值选择
select.select_by_value('beijing')
time.sleep(2)
# 根据text选择
select.select_by_visible_text('成都')
time.sleep(2)
 
"""
# 选择下一个元素后会自动取消上一次选择的元素
<selenium.webdriver.support.select.Select object at 0x000001FBC9D18DA0>
<class 'selenium.webdriver.support.select.Select'>
"""

Selenium工具操作可以选取多个值的select下拉框

1、select下拉框是可以选择多个值：在<select>标签中设置 multiple="multiple" 属性，就可以实现多选功能

⑴在windows下：Ctrl键+单击，可以选择多个选项
⑵在Mac下：Command+单击，可以选择多个选项

2、代码实例：

import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
 
# 获取浏览器对象
driver = webdriver.Chrome()
# 设置浏览器窗口大小
driver.maximize_window()
# 进入页面
driver.get('C:\\Py_Demo\\Demo\\Py_Project\\demo.html')
time.sleep(2)
 
# 定位select标签
selectTag = driver.find_element_by_id('mouse')
# 实例化一个select对象：传入Select标签元素的Element对象
select = Select(selectTag)
 
# 通过select对象进行下拉框选项操作
# 根据下标进行选择，从0开始
select.select_by_index(1)
time.sleep(2)
# 根据value的值选择
select.select_by_value('beijing')
time.sleep(2)
# 根据text选择
select.select_by_visible_text('成都')
 
# 返回第一个已选择的选项
firstSelected = select.first_selected_option
print(firstSelected) # 返回一个Element对象
print(firstSelected.text)
"""
<selenium.webdriver.remote.webelement.WebElement (session="7f41759611e5d9ad1e4c3c6b8d421611", element="f97ec79a-4e59-4a4d-a9bd-a6aa46657011")>
深圳
"""
 
# 返回所有已选择的选项
allSelected = select.all_selected_options
print(allSelected) # 返回一个列表
"""
[<selenium.webdriver.remote.webelement.WebElement (session="d5d4ba2a653680a9084badc6026cb5e6", element="4e99e280-be34-4b8e-ad69-9cf0be590b60")>]
"""
 
# 返回所以的选择项
allSelect = select.options
print(allSelect) # 返回一个列表
"""
[<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="ec18421f-0fb3-4d75-aa8a-c0c48102ac96")>,
<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="9253ba45-053f-4eb3-be68-dffb57f3b4e4")>, 
<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="a3d7123a-6eb6-4f7a-9b40-bd7abe0ee3f5")>,
<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="816ee30a-11ba-46a2-a950-fbc53bb7e7d2")>, 
<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="63019040-180a-4a60-98ec-eb18740ddef5")>,
<selenium.webdriver.remote.webelement.WebElement (session="e1757096543346b61f5789285c8fc7e3", element="035dfdfa-3f6e-401f-8566-8112ae9dbb5c")>]
"""
time.sleep(2)
# 取消对应index选项，用于多选
select.deselect_by_index(1)
 
time.sleep(2)
# 取消所有选项，用于多选
select.deselect_all()

Selenium工具使用常规方法选择下拉框中的值（元素）

1、不管怎么说Select下拉框中的元素都是在HTML页面中的，既然在HTML页面中那么就可以使用常规的定位方式进行定位和操作。

⑴使用常用的8种定位方法

⑵使用click()方法进行点击选择

2、Select类只是说对于Select下拉框提供了单独的、更多的处理方法。但并不会影响使用常规方法来操作下拉框。

3、在选择下拉框中的值（元素）后可以使用 element_located_to_be_selected 方法来判断元素是否已经被选中。

4、代码实例：

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select
from selenium.webdriver.support import expected_conditions as EC
 
# 获取浏览器对象
driver = webdriver.Chrome()
# 设置浏览器窗口大小
driver.maximize_window()
# 进入页面
driver.get('C:\\Py_Demo\\Demo\\Py_Project\\demo.html')
time.sleep(2)
 
# 直接定位所需选择的元素
Tag = driver.find_element_by_id('1')
print(Tag)
Tag.click()
# 判断元素是否被选中
result = EC.element_located_to_be_selected((By.ID,'1'))(driver)
print(result)
 
time.sleep(2)
# 再次点击元素：表示取消选择
driver.find_element_by_id('1').click()
# 判断元素是否被选中
print(EC.element_located_to_be_selected((By.ID,'1'))(driver))
 
"""
<selenium.webdriver.remote.webelement.WebElement (session="30e6d4b9ea519ab6570e423d5914e214", element="8f61ff14-279e-4235-948d-cf4745531287")>
True
False
"""

注意：如果需要鼠标悬浮或者点击后才会出现下拉框中的值（元素），最好先执行悬浮或者点击操作后再定位元素并操作。

比如下拉框：先点击、悬浮下拉框按钮，使下拉框中的元素展示出来后，再定位下拉框中的元素，如果是直接定位下拉框中的元素的话(没有执行悬浮、点击操作)，有可能定位不到元素。

Selenium工具操作非select-option标签方式实现的下拉框

1、随着Web网页技术的发展，下拉框功能不仅仅可以使用 select 标签实现，还可以使用其他的标签实现该功能。

2、目前的话我感觉比较常见的下拉框实现方式还是使用<ul>和<li>组合

⑴<ul>用于定义一个无序列表
⑵<li>标签定义列表项目

3、前面介绍的Select类是专门针对于select下拉框的，因此在非select下拉框中可能并不适用。

因此对于非select下拉框，更多的还是需要通过常规的元素定位方法来操作：①先定位下拉框按钮②在定位下拉框中的选项

4、错误的操作方式：

import time
from selenium import webdriver
from selenium.webdriver.support.select import Select
 
# 获取浏览器对象
driver = webdriver.Chrome()
# 设置浏览器窗口大小
driver.maximize_window()
# 进入页面
driver.get('https://www.luffycity.com/signup')
 
# 定位下拉框按钮
selectTag = driver.find_element_by_xpath('//*[@id="__layout"]/div/div/div[1]/div/div[2]/div[1]/img[2]')
select = Select(selectTag)
select.select_by_index(1)
 
"""
# 可以看到Select类方法是不能用于非select标签的
selenium.common.exceptions.UnexpectedTagNameException: Message: Select only works on <select> elements, not on <img>
"""

5、正确的操作方式代码实例：

import time
from selenium import webdriver
 
# 获取浏览器对象
driver = webdriver.Chrome()
# 设置浏览器窗口大小
driver.maximize_window()
# 进入页面
driver.get('https://www.luffycity.com/signup')
time.sleep(3)
# 定位下拉框按钮
selectTag = driver.find_element_by_xpath('//*[@id="__layout"]/div/div/div[1]/div/div[2]/div[1]/img[2]').click()
# 定位下拉框元素并点击
element = driver.find_element_by_xpath('//*[@id="__layout"]/div/div/div[1]/div/div[2]/div[1]/ul/li[3]')
element.click()
print(element)
#<selenium.webdriver.remote.webelement.WebElement (session="c0e543f5da6db28befc06ec4aa7820b3", element="743018a3-16a9-430a-a19e-66d188ab9970")>

6、实例2

页面下拉框实现方式如下：

python操作下拉框代码如下：

import time
from selenium.webdriver import ActionChains
from selenium import webdriver

# 实例化浏览器，访问目标网页，窗口最大化
driver = webdriver.Chrome()
driver.get("https://www.eteams.cn")
driver.maximize_window()
driver.implicitly_wait(5)
# 登录
driver.find_element_by_id("username").send_keys("12345YH@163.com")
driver.find_element_by_id("password").send_keys("123456")
driver.find_element_by_xpath("//button[text()='登 录']").click()
# 进入任务页面
driver.find_element_by_xpath("//a[@type='button']").click()
driver.find_element_by_xpath("//li/a/span[text()='任务']").click()
time.sleep(2)
# 展开下拉框，直接点击选项
action = ActionChains(driver)
action.move_to_element(driver.find_element_by_xpath("//a[text()='视图']")).perform()
driver.find_element_by_xpath("//li[@data-useractionid='task_004000600_0005302']").click()
time.sleep(2)
# 退出
driver.quit()