选择框

并且按F12，观察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>

对应的代码如下

# 获取当前选中的元素
element = wd.find_element(By.CSS_SELECTOR, 
  '#s_radio input[name="teacher"]:checked')
print('当前选中的是: ' + element.get_attribute('value'))

# 点选 小雷老师
wd.find_element(By.CSS_SELECTOR, 
  '#s_radio input[value="小雷老师"]').click()

其中 #s_radio input[name="teacher"]:checked 里面的 :checked 是CSS伪类选择

表示选择 checked 状态的元素，对 radio 和 checkbox 类型的input有效

checkbox框

点击这里，边看视频讲解，边学习以下内容

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

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

比如, 我们要在下面的html中：选中小雷老师

<div id="s_checkbox">
  <input type="checkbox" name="teacher" value="小江老师">小江老师<br>
  <input type="checkbox" name="teacher" value="小雷老师">小雷老师<br>
  <input type="checkbox" name="teacher" value="小凯老师" checked="checked">小凯老师
</div>

我们的思路可以是这样：

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

示例代码

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

for element in elements:
    element.click()

# 再点击 小雷老师
wd.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开始），选择元素

注意：视频讲解中用的是老版本的seleium，那时是从 1 开始，

现在Selenium 4 是从 0 开始,

select_by_index(0) ，选择的是第1个选项，

select_by_index(1) ，选择的是第2个选项，依此类推

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(wd.find_element(By.ID, "ss_single"))

# 通过 Select 对象选中小雷老师
select.select_by_visible_text("小雷老师")

Select多选框

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

例如，我们选择示例多选框中的小雷老师和小凯老师

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

然后再通过 select_by_visible_text方法选择小雷老师和小凯老师。

示例代码如下：

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

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

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

# 选择小雷老师 和 小凯老师
select.select_by_visible_text("小雷老师")
select.select_by_visible_text("小凯老师")

您需要高效学习，找工作？点击咨询报名实战班

点击查看学员就业情况

课后练习

打开前面练习下载的白月SMS系统的测试用例文档，白月SMS系统的 安装步骤 可以参考 课程1的课后练习

完成用例 UI-0107 的自动化

实战班学员 ，请联系老师获取参考答案和视频讲解

游客 也可以分享课程领取练习视频讲解，点击这里查看

补充练习

实战班学员请联系老师获取补充练习题

选择框