选择框
首先,将下面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()
评论