选择框

首先，将下面html代码保存到一个文件中

后续的代码小案例都是访问此html的

<!DOCTYPE html>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>web自动化 - 选择框</title>
  <style class="mpa-style-fix ImageGatherer">.FotorFrame{position:fixed!important}</style>
  <style class="mpa-style-fix SideFunctionPanel">.weui-desktop-online-faq__wrp{top:304px!important;bottom:unset!important}.weui-desktop-online-faq__wrp .weui-desktop-online-faq__switch{width:38px!important}</style>
</head>
  <body mpa-version="7.16.14" mpa-extension-id="ibefaeehajgcpooopoegkifhgecigeeg">
  <h3 style="color: brown">radio框</h3>
  <div id="s_radio">
    <input type="radio" name="astronomica" value="太阳">太阳<br>
    <input type="radio" name="astronomica" value="月亮">月亮<br>
    <input type="radio" name="astronomica" value="星星" checked="checked">星星
  </div>
  <hr>
  <h3 style="color: brown">checkbox框</h3>
  <div id="s_checkbox">
    <input type="checkbox" name="astronomica" value="太阳">太阳<br>
    <input type="checkbox" name="astronomica" value="月亮">月亮<br>
    <input type="checkbox" name="astronomica" value="星星" checked="checked">星星
  </div>

  <hr>

  <h3 style="color: brown">select框</h3>
  <div>

  <h4 style="color: rgb(22, 118, 173)">单选</h4>

  <p>星体:</p>
  <select id="ss_single">
      <option value="太阳">太阳</option>
      <option value="月亮">月亮</option>
      <option value="星星" selected="selected">星星</option>
  </select>
  <hr>
  <h4 style="color: rgb(22, 118, 173)">多选</h4>
  <p>星体:</p>
  <select id="ss_multi" multiple="">
    <option value="太阳">太阳</option>
    <option value="月亮">月亮</option>
    <option value="星星" selected="selected">星星</option>
  </select>
  </div>
  </body>
</html>

常见的选择框包括： radio框、checkbox框、select框

radio框

radio框选择选项，直接用WebElement的click方法，模拟用户点击就可以了。

比如, 我们要在下面的html中：

先打印当前选中的星体名字
再选择月亮

<div id="s_radio">
  <input type="radio" name="teacher" value="太阳">太阳<br>
  <input type="radio" name="teacher" value="月亮">月亮<br>
  <input type="radio" name="teacher" value="星星" checked="checked">星星
</div>

对应的代码如下

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2022/1/8 10:40
# @Author  : shisuiyi
# @File    : select1.py
# @Software: win10 Tensorflow1.13.1 python3.9
from time import sleep

from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select
from selenium import webdriver

driver = webdriver.Chrome()

# 将html文件更改为自己的路径
driver.get("D:\Lemon\py45\webatuo\select.html")
driver.maximize_window()
# 获取当前选中的元素
element = driver.find_element(By.CSS_SELECTOR, '#s_radio input[checked=checked]')
print('当前选中的是: ' + element.get_attribute('value'))

# 点选 月亮
driver.find_element(By.CSS_SELECTOR, '#s_radio input[value="月亮"]').click()
sleep(5)
driver.quit()

checkbox框

对checkbox进行选择，也是直接用 WebElement 的 click 方法，模拟用户点击选择。

需要注意的是，要选中checkbox的一个选项，必须 先获取当前该复选框的状态 ，如果该选项已经勾选了，就不能再点击。否则反而会取消选择。

比如, 我们要在下面的html中：选中星星

<div id="s_checkbox">
    <input type="checkbox" name="astronomica" value="太阳">太阳<br>
    <input type="checkbox" name="astronomica" value="月亮">月亮<br>
    <input type="checkbox" name="astronomica" value="星星" checked="checked">星星
  </div>

我们的思路可以是这样：

先把已经选中的选项全部点击一下，确保都是未选状态
再点击星星

示例代码

# 先把 已经选中的选项全部点击一下
elements = driver.find_elements(By.CSS_SELECTOR, '#s_checkbox input[checked="checked"]')

for element in elements:
    element.click()
sleep(5)
# 再点击 星星
driver.find_element(By.CSS_SELECTOR, "#s_checkbox input[value='星星']").click()

select框

radio框及checkbox框都是input元素，只是里面的type不同而已。

select框则是一个新的select标签，大家可以对照浏览器网页内容查看一下

对于Select 选择框， Selenium 专门提供了一个 Select类 进行操作。

Select类提供了如下的方法

select_by_value

根据选项的 value属性值 ，选择元素。

比如，下面的HTML，

<option value="foo">Bar</option>

就可以根据 foo 这个值选择该选项，

s.select_by_value('foo')

select_by_index

根据选项的 次序 （从0开始），选择元素

select_by_visible_text

根据选项的 可见文本 ，选择元素。

比如，下面的HTML，

<option value="foo">Bar</option>

就可以根据 Bar 这个内容，选择该选项

s.select_by_visible_text('Bar')

deselect_by_value

根据选项的value属性值， 去除 选中元素

deselect_by_index

根据选项的次序，去除 选中元素

deselect_by_visible_text

根据选项的可见文本，去除 选中元素

deselect_all

去除 选中所有元素

Select单选框

对于 select单选框，操作比较简单：

不管原来选的是什么，直接用Select方法选择即可。

例如，选择示例里面的太阳，示例代码如下

# 导入Select类
from selenium.webdriver.support.ui import Select

# 创建Select对象
select = Select(driver.find_element(By.ID, "ss_single"))

# 通过 Select 对象选中太阳
select.select_by_visible_text("太阳")

或者点击 select 元素当中 option 使用 el.click()选择月亮

# 或者使用
el = driver.find_element('xpath', "//*[@id = 'ss_single']/option[text()='月亮']")
el.click()

Select多选框

对于select多选框，要选中某几个选项，要注意去掉原来已经选中的选项。

例如，我们选择示例多选框中的月亮和星星

可以用select类的deselect_all方法，清除所有已经选中的选项。

然后再通过 select_by_visible_text方法选择月亮和星星。

示例代码如下：

# 导入Select类
from selenium.webdriver.support.ui import Select

# 创建Select对象
select = Select(driver.find_element(By.ID, "ss_multi"))

# 清除所有 已经选中 的选项
select.deselect_all()

# 选择月亮 和 星星
select.select_by_visible_text("月亮")
select.select_by_visible_text("星星")

或者点击 select 元素当中 option 使用 el.click()太阳与星星

# 或者使用
el = driver.find_element('xpath', "//*[@id = 'ss_multi']/option[text()='太阳']")
el.click()
# 或者使用
el = driver.find_element('xpath', "//*[@id = 'ss_multi']/option[text()='星星']")
el.click()

框架生成的 select

点击外层元素，div 标签或者 input

通过选项右击检查，定位该元素的源代码，编写表达式

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2022/1/8 12:33
# @Author  : shisuiyi
# @File    : select2.py
# @Software: win10 Tensorflow1.13.1 python3.9
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get('https://element.eleme.cn/#/zh-CN/component/select')

driver.maximize_window()
driver.find_element('xpath', "(//*[@class = 'el-input el-input--suffix']//input[@class ='el-input__inner' ])[1]").click()
sleep(2)
driver.find_element('xpath', "/html/body/div[3]/div[1]/div[1]/ul/li[1]/span").click()
sleep(3)
driver.quit()

selenium 针对各种选择框与下拉框的操作-8

选择框