Selenium(七):選擇框(radio框、checkbox框、select框)


1. 選擇框

本章使用的html代碼:

<!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中:

先打印當前選中的值

再選擇radio2

<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方法,模擬用戶點擊選擇。

需要注意的是,要選中checkbox的一個選項,必須先獲取當前該復選框的狀態,如果該選項已經勾選了,就不能再點擊。否則反而會取消選擇。

比如,我們要在下面的html中:選中checkbox2

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

我們的思路可以是這樣:

先把已經選中的選項全部點擊一下,確保都是未選狀態

再點擊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")


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM