选择框

首先,将下面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()
上一篇 下一篇