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")

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。