Selenium(七)：选择框(radio框、checkbox框、select框)

时间 2019-11-26

标签 selenium 选择 radio checkbox select 栏目 HTML 繁體版

原文原文链接

1. 选择框

本章使用的html代码：css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3 style="color: brown">radio框</h3>
        <div id="s_radio">
              <input type="radio" name="radios" value="radio1">radio1<br>
              <input type="radio" name="radios" value="radio2">radio2<br>
              <input type="radio" name="radios" value="radio3" checked="checked">radio3
        </div>

        <hr>

        <h3 style="color: brown">checkbox框</h3>

        <div id="s_checkbox">
              <input type="checkbox" name="checkboxs" value="checkbox1">checkbox1<br>
              <input type="checkbox" name="checkboxs" value="checkbox2">checkbox2<br>
              <input type="checkbox" name="checkboxs" value="checkbox3" checked="checked">checkbox3
        </div>
        <hr>

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

        <select id="ss_single">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3" selected="selected">option3</option>
        </select>

        <hr>

        <h4 style="color: rgb(22, 118, 173)">多选</h4>
        <select  id="ss_multi" multiple>
              <option value="options1">options1</option>
              <option value="options2">options2</option>
              <option value="options3" selected="selected">options3</option>
        </select> 
    </body>
</html>

1.1 radio框

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

好比，咱们要在下面的html中：ios

先打印当前选中的值web

再选择radio2chrome

<div id="s_radio">
    <input type="radio" name="radios" value="radio1">radio1<br>
    <input type="radio" name="radios" value="radio2">radio2<br>
    <input type="radio" name="radios" value="radio3" checked="checked">radio3
</div>

对应的代码以下：浏览器

from selenium import webdriver

wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe')
wd.implicitly_wait(10)

wd.get('http://127.0.0.1:8020/day01/index.html')

# 获取当前选中的元素
element = wd.find_element_by_css_selector(
  '#s_radio input[checked=checked]')
print('当前选中的是: ' + element.get_attribute('value'))

# 点选radio2
wd.find_element_by_css_selector('#s_radio input[value="radio2"]').click()

1.2 checkbox框

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

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

好比，咱们要在下面的html中：选中checkbox2code

<div id="s_checkbox">
    <input type="checkbox" name="checkboxs" value="checkbox1">checkbox1<br>
    <input type="checkbox" name="checkboxs" value="checkbox2">checkbox2<br>
    <input type="checkbox" name="checkboxs" value="checkbox3" checked="checked">checkbox3
</div>

咱们的思路能够是这样：htm

先把已经选中的选项所有点击一下，确保都是未选状态

再点击checkbox2

示例代码：

from selenium import webdriver

wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe')
wd.implicitly_wait(10)

wd.get('http://127.0.0.1:8020/day01/index.html')

# 先把 已经选中的选项所有点击一下
elements = wd.find_elements_by_css_selector(
  '#s_checkbox input[checked="checked"]')

for element in elements:
    element.click()

# 再点击checkbox2
wd.find_element_by_css_selector("#s_checkbox input[value='checkbox2']").click()

1.3 select框

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

select框则是一个新的select标签，你们能够对照浏览器网页内容查看一下。

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

1.3.1 经常使用方法

Select类提供了以下的方法：

(1) select_by_value

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

好比，下面的HTML：

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

就能够根据 foo 这个值选择该选项：

s.select_by_value('foo')

(2) select_by_index

根据选项的次序(从1开始），选择元素。

(3) select_by_visible_text

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

好比，下面的HTML：

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

就能够根据Bar这个内容，选择该选项：

s.select_by_visible_text('Bar')

(4) deselect_by_value

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

(5) deselect_by_index

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

(6) deselect_by_visible_text

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

(7) deselect_all

去除选中全部元素。

1.3.2 Select单选框

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

无论原来选的是什么，直接用Select方法选择便可。

例如，选择示例里面的option2，示例代码以下：

from selenium import webdriver

wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe')
wd.implicitly_wait(10)

wd.get('http://127.0.0.1:8020/day01/index.html')

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

# 建立Select对象
select = Select(wd.find_element_by_id("ss_single"))

# 经过 Select 对象选中option2
select.select_by_visible_text("option2")

1.3.3 Select多选框

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

例如，咱们选择示例多选框中的options2和options3。

能够用select类的deselect_all方法，清除全部已经选中的选项。

而后再经过select_by_visible_text方法选择options2和options3。

示例代码以下：

from selenium import webdriver

wd = webdriver.Chrome(r'E:\webdrivers\chromedriver.exe')
wd.implicitly_wait(10)

wd.get('http://127.0.0.1:8020/day01/index.html')

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

# 建立Select对象
select = Select(wd.find_element_by_id("ss_multi"))

# 清除全部已经选中的选项
select.deselect_all()

# 选择options2和options3
select.select_by_visible_text("options2")
select.select_by_visible_text("options3")