selenium超全教程（4）-持續更新中

選與多選

單選比較好操作，先定位需要單選的某個元素，然后點擊一下即可。

多選好像也比較容易，依次定位需要選擇的元素，點擊即可。

下拉框

下拉框的操作相對復雜一些，需要用到Select模塊。

先導入該類

from selenium.webdriver.support.select import Select

在select模塊中有以下定位方法

'''1、三種選擇某一選項項的方法'''


select_by_index()           # 通過索引定位；注意：index索引是從“0”開始。
select_by_value()           # 通過value值定位，value標簽的屬性值。
select_by_visible_text()    # 通過文本值定位，即顯示在下拉框的值。


'''2、三種返回options信息的方法'''


options                     # 返回select元素所有的options
all_selected_options        # 返回select元素中所有已選中的選項
first_selected_options      # 返回select元素中選中的第一個選項                  




'''3、四種取消選中項的方法'''


deselect_all                # 取消全部的已選擇項
deselect_by_index           # 取消已選中的索引項
deselect_by_value           # 取消已選中的value值
deselect_by_visible_text    # 取消已選中的文本值

測試頁面

<html>


<body>


<form>
<select name="球">
<option value="籃球">籃球</option>
<option value="足球" selected="">足球</option>
<option value="排球">排球</option>
<option value="羽毛球">羽毛球</option>
</select>
</form>


</body>
</html>

然后，再演示下拉框的不同選擇的方式

from selenium import webdriver
from selenium.webdriver.support.select import Select
import time


url = 'file:///C:/Users/Gdc/Desktop/ball.html'


browser = webdriver.Chrome()


browser.get(url)
time.sleep(2)


# 根據索引選擇
Select(browser.find_element_by_name("球")).select_by_index("2")
time.sleep(2)
# 根據value值選擇
Select(browser.find_element_by_name("球")).select_by_value("羽毛球")
time.sleep(2)
# 根據文本值選擇
Select(browser.find_element_by_name("球")).select_by_visible_text("足球")
time.sleep(2)


# 關閉瀏覽器
browser.close()

多窗口切換之Frame切換

Selenium打開一個頁面之后，默認是在父頁面進行操作，此時如果這個頁面還有子頁面，想要獲取子頁面的節點元素信息則需要切換到子頁面進行擦走，這時候switch_to.frame()就來了。如果想回到父頁面，用switch_to.parent_frame()即可。

模擬鼠標操作之左鍵、右鍵與雙擊

既然是模擬瀏覽器操作，自然也就需要能模擬鼠標的一些操作了，這里需要導入ActionChains 類。

from selenium.webdriver.common.action_chains import ActionChains

左鍵

這個其實就是頁面交互操作中的點擊click()操作。

右鍵

context_click()

from selenium.webdriver.common.action_chains import ActionChains
from selenium import webdriver
import time  


browser = webdriver.Chrome()
browser.get(r'https://www.baidu.com')  
time.sleep(2)


# 定位到要右擊的元素，這里選的新聞鏈接
right_click = browser.find_element_by_link_text('新聞')


# 執行鼠標右鍵操作
ActionChains(browser).context_click(right_click).perform()
time.sleep(2)


# 關閉瀏覽器
browser.close()

在上述操作中

ActionChains(browser)：調用ActionChains()類，并將瀏覽器驅動browser作為參數傳入
context_click(right_click)：模擬鼠標雙擊，需要傳入指定元素定位作為參數
perform()：執行ActionChains()中儲存的所有操作，可以看做是執行之前一系列的操作

雙擊

double_click()

from selenium.webdriver.common.action_chains import ActionChains
from selenium import webdriver
import time  


browser = webdriver.Chrome()
browser.get(r'https://www.baidu.com')  
time.sleep(2)


# 定位到要雙擊的元素
double_click = browser.find_element_by_css_selector('#bottom_layer > div > p:nth-child(8) > span')


# 雙擊
ActionChains(browser).double_click(double_click).perform()
time.sleep(15)


# 關閉瀏覽器
browser.close()

模擬鼠標操作之拖拽

drag_and_drop(source,target)拖拽操作嘛，開始位置和結束位置需要被指定，這個常用于滑塊類驗證碼的操作之類。

from selenium.webdriver.common.action_chains import ActionChains
from selenium import webdriver
import time  


browser = webdriver.Chrome()
url = 'https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable'
browser.get(url)  
time.sleep(2)


browser.switch_to.frame('iframeResult')


# 開始位置
source = browser.find_element_by_css_selector("#draggable")


# 結束位置
target = browser.find_element_by_css_selector("#droppable")


# 執行元素的拖放操作
actions = ActionChains(browser)
actions.drag_and_drop(source, target)
actions.perform()
# 拖拽
time.sleep(15)


# 關閉瀏覽器
browser.close()

模擬鼠標操作之懸停move_to_element

from selenium.webdriver.common.action_chains import ActionChains
from selenium import webdriver
import time  


browser = webdriver.Chrome()
url = 'https://www.baidu.com'
browser.get(url)  
time.sleep(2)


# 定位懸停的位置
move = browser.find_element_by_css_selector("#form > span.bg.s_ipt_wr.new-pmd.quickdelete-wrap > span.soutu-btn")


# 懸停操作
ActionChains(browser).move_to_element(move).perform()
time.sleep(5)


# 關閉瀏覽器
browser.close()

模擬鍵盤操作

selenium中的Keys()類提供了大部分的鍵盤操作方法，通過send_keys()方法來模擬鍵盤上的按鍵。

引入Keys類

from selenium.webdriver.common.keys import Keys

常見的鍵盤操作

send_keys(Keys.BACK_SPACE)：刪除鍵(BackSpace)

send_keys(Keys.SPACE)：空格鍵(Space)

send_keys(Keys.TAB)：制表鍵(TAB)

send_keys(Keys.ESCAPE)：回退鍵(ESCAPE)

send_keys(Keys.ENTER)：回車鍵(ENTER)

send_keys(Keys.CONTRL,'a')：全選(Ctrl+A)

send_keys(Keys.CONTRL,'c')：復制(Ctrl+C)

send_keys(Keys.CONTRL,'x')：剪切(Ctrl+X)

send_keys(Keys.CONTRL,'v')：粘貼(Ctrl+V)

send_keys(Keys.F1)：鍵盤F1

send_keys(Keys.F12)：鍵盤F12

實例操作演示：

定位需要操作的元素，然后操作即可！

from selenium.webdriver.common.keys import Keys
from selenium import webdriver
import time


browser = webdriver.Chrome()
url = 'https://www.baidu.com'
browser.get(url)  
time.sleep(2)


# 定位搜索框
input = browser.find_element_by_class_name('s_ipt')
# 輸入python
input.send_keys('python')
time.sleep(2)


# 回車
input.send_keys(Keys.ENTER)
time.sleep(5)


# 關閉瀏覽器
browser.close()

延時等待

如果遇到使用ajax加載的網頁，頁面元素可能不是同時加載出來的，這個時候嘗試在get方法執行完成時獲取網頁源代碼可能并非瀏覽器完全加載完成的頁面。所以，這種情況下需要設置延時等待一定時間，確保全部節點都加載出來。

等待有三種方式：強制等待、隱式等待和顯式等待

1.強制等待

直接time.sleep(n)強制等待n秒，在執行get方法之后執行。

2.隱式等待

implicitly_wait()設置等待時間，如果到時間有元素節點沒有加載出來，就會拋出異常。

from selenium import webdriver


browser = webdriver.Chrome()


# 隱式等待，等待時間10秒
browser.implicitly_wait(10)  


browser.get('https://www.baidu.com')
print(browser.current_url)
print(browser.title)


# 關閉瀏覽器
browser.close()

3. 顯式等待

設置一個等待時間和一個條件，在規定時間內，每隔一段時間查看下條件是否成立，如果成立那么程序就繼續執行，否則就拋出一個超時異常。

from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import time


browser = webdriver.Chrome()
browser.get('https://www.baidu.com')
# 設置等待時間10s
wait = WebDriverWait(browser, 10)
# 設置判斷條件：等待id='kw'的元素加載完成
input = wait.until(EC.presence_of_element_located((By.ID, 'kw')))
# 在關鍵詞輸入：關鍵詞
input.send_keys('Python')


# 關閉瀏覽器
time.sleep(2)
browser.close()

WebDriverWait的參數說明：

WebDriverWait(driver,timeout,poll_frequency=0.5,ignored_exceptions=None)

driver: 瀏覽器驅動

timeout: 超時時間，等待的最長時間（同時要考慮隱性等待時間）

poll_frequency: 每次檢測的間隔時間，默認是0.5秒

ignored_exceptions:超時后的異常信息，默認情況下拋出NoSuchElementException異常

until(method,message='')

method: 在等待期間，每隔一段時間調用這個傳入的方法，直到返回值不是False

message: 如果超時，拋出TimeoutException，將message傳入異常

until_not(method,message='')

until_not 與until相反，until是當某元素出現或什么條件成立則繼續執行，until_not是當某元素消失或什么條件不成立則繼續執行，參數也相同。

其他等待條件

from selenium.webdriver.support import expected_conditions as EC


# 判斷標題是否和預期的一致
title_is
# 判斷標題中是否包含預期的字符串
title_contains


# 判斷指定元素是否加載出來
presence_of_element_located
# 判斷所有元素是否加載完成
presence_of_all_elements_located


# 判斷某個元素是否可見. 可見代表元素非隱藏，并且元素的寬和高都不等于0，傳入參數是元組類型的locator
visibility_of_element_located
# 判斷元素是否可見，傳入參數是定位后的元素WebElement
visibility_of
# 判斷某個元素是否不可見，或是否不存在于DOM樹
invisibility_of_element_located


# 判斷元素的 text 是否包含預期字符串
text_to_be_present_in_element
# 判斷元素的 value 是否包含預期字符串
text_to_be_present_in_element_value


#判斷frame是否可切入，可傳入locator元組或者直接傳入定位方式：id、name、index或WebElement
frame_to_be_available_and_switch_to_it


#判斷是否有alert出現
alert_is_present


#判斷元素是否可點擊
element_to_be_clickable


# 判斷元素是否被選中,一般用在下拉列表，傳入WebElement對象
element_to_be_selected
# 判斷元素是否被選中
element_located_to_be_selected
# 判斷元素的選中狀態是否和預期一致，傳入參數：定位后的元素，相等返回True，否則返回False
element_selection_state_to_be
# 判斷元素的選中狀態是否和預期一致，傳入參數：元素的定位，相等返回True，否則返回False
element_located_selection_state_to_be


#判斷一個元素是否仍在DOM中，傳入WebElement對象，可以判斷頁面是否刷新了
staleness_of

運行JavaScript

還有一些操作，比如下拉進度條，模擬javaScript，使用execute_script方法來實現。

from selenium import webdriver


browser = webdriver.Chrome()
# 知乎發現頁
browser.get('https://www.zhihu.com/explore')


browser.execute_script('window.scrollTo(0, document.body.scrollHeight)')
browser.execute_script('alert("To Bottom")')

Cookie

在selenium使用過程中，還可以很方便對Cookie進行獲取、添加與刪除等操作。

from selenium import webdriver


browser = webdriver.Chrome()
# 知乎發現頁
browser.get('https://www.zhihu.com/explore')
# 獲取cookie
print(f'Cookies的值：{browser.get_cookies()}')
# 添加cookie
browser.add_cookie({'name':'球類', 'value':'足球'})
print(f'添加后Cookies的值：{browser.get_cookies()}')
# 刪除cookie
browser.delete_all_cookies()
print(f'刪除后Cookies的值：{browser.get_cookies()}')

輸出：

Cookies的值：[{'domain': '.zhihu.com', 'httpOnly': False, 'name': 'Hm_lpvt_98beee57fd2ef70ccdd5ca52b9740c49', 'path': '/', 'secure': False, 'value': '1640537860'}, {'domain': '.zhihu.com', ...]
添加后Cookies的值：[{'domain': 'www.zhihu.com', 'httpOnly': False, 'name': '球類', 'path': '/', 'secure': True, 'value': '足球'}, {'domain': '.zhihu.com', 'httpOnly': False, 'name': 'Hm_lpvt_98beee57fd2ef70ccdd5ca52b9740c49', 'path': '/', 'secure': False, 'value': '1640537860'}, {'domain': '.zhihu.com',...]
刪除后Cookies的值：[]

希望本文對你有所幫助~~如果對軟件測試、接口測試、自動化測試、面試經驗交流感興趣可以私聊我或關注公眾號“特斯汀軟件測試”。免費領取最新軟件測試大廠面試資料和Python自動化、接口、框架搭建學習資料！技術大牛解惑答疑，同行一起交流。

用JavaScript訪問和操作的HTML DOM對象的例子。

Document 對象

使用 document.write() 輸出文本
使用 document.write() 輸出 HTML
返回文檔中錨的數目
返回文檔中第一個錨的 innerHTML
返回文檔中表單的數目
返回文檔中第一個表單的名字
返回文檔中的圖像數
返回文檔中第一個圖像的ID
返回文檔中的鏈接數
返回文檔中的第一個鏈接的ID
返回文檔中的所有cookies的名稱/值對
返回加載的文檔的服務器域名
返回文檔的最后一次修改時間
返回加載的當前文檔的URL
返回文檔的標題
返回文檔的完整的URL
打開輸出流，向流中輸入文本
write() 和 writeln()的不同
用指定的ID彈出一個元素的innerHTML
用指定的Name彈出元素的數量
用指定的tagname彈出元素的數量

Anchor 對象

返回和設置鏈接的charset屬性
返回和設置鏈接的href屬性
返回和設置鏈接的hreflang屬性
返回一個錨的名字
返回當前的文件和鏈接的文檔之間的關系
改變鏈接的target屬性
返回一個鏈接的type屬性的值

Area 對象

返回圖像映射某個區域的替代文字
返回圖像映射某個區域的坐標
返回一個區域的href屬性的錨部分
返回的主機名：圖像映射的某個區域的端口
返回圖像映射的某個區域的hostname
返回圖像映射的某個區域的port
返回圖像映射的某個區域的href
返回圖像映射的某個區域的pathname
返回圖像映射的某個區域的protocol
返回一個區域的href屬性的querystring部分
返回圖像映射的某個區域的shape
返回圖像映射的某個區域的target的值

Base 對象

返回頁面上所有相對URL的基URL
返回頁面上所有相對鏈接的基鏈接

Button 對象

當點擊完button不可用
返回一個button的name
返回一個button的type
返回一個button的value
返回一個button所屬表的ID

Form 對象

返回一個表單中所有元素的value
返回一個表單acceptCharset屬性的值
返回一個表單action屬性的值
返回表單中的enctype屬性的值
返回一個表單中元素的數量
返回發送表單數據的方法
返回一個表單的name
返回一個表單target屬性的值
重置表單
提交表單

Frame/IFrame 對象

對iframe排版
改變一個包含在iframe中的文檔的背景顏色
返回一個iframe中的frameborder屬性的值
刪除iframe的frameborder
改變iframe的高度和寬度
返回一個iframe中的longdesc屬性的值
返回一個iframe中的marginheight屬性的值
返回一個iframe中的marginwidth屬性的值
返回一個iframe中的name屬性的值
返回和設置一個iframe中的scrolling屬性的值
改變一個iframe的src

Image 對象

對image排版
返回image的替代文本
給image加上border
改變image的高度和寬度
設置image的hspace和vspace屬性
返回image的longdesc屬性的值
創建一個鏈接指向一個低分辨率的image
返回image的name
改變image的src
返回一個客戶端圖像映射的usemap的值

Event 對象

哪個鼠標鍵被點擊了？
被按下的鍵盤鍵的keycode？
鼠標的坐標？
鼠標相對于屏幕的坐標？
shift鍵被按下了嗎？
哪個元素被按下了？
哪個事件發生了？

Option 和 Select 對象

禁用和啟用下拉列表
獲得有下拉列表的表單的ID
獲得下拉列表的選項數量
將下拉列表變成多行列表
在下拉列表中選擇多個選項
彈出下拉列表中所有選項
彈出下拉列表中被選中的選項的索引
改變下拉列表中被選中的選項的文本
刪除下拉列表中的選項

Table, TableHeader, TableRow, TableData 對象

改變表格邊框的寬度
改變表格的cellpadding和cellspacing
指定表格的frame
為表格指定規則
一個行的innerHTML
一個單元格的innerHTML
為表格創建一個標題
刪除表格中的行
添加表格中的行
添加表格行中的單元格
單元格內容水平對齊
單元格內容垂直對齊
對單個單元格的內容水平對齊
對單個單元格的內容垂直對齊
改變單元格的內容
改變單元格橫跨的列數(colspan屬性)

因

vue3實現一個區域多選的選擇框。

用戶需求是可以選擇服務區域，本來想找個省市縣級聯的一個選擇框就好了，但是又要求多選，而且是用戶自己給出區域，無奈寫一個，特記錄下，順便幫助后來者。

實現效果

效果展示

實現思路

使用一個div將添加區域給放起來，display設置為none，當點擊添加時將這個div的display設置為block，實現添加區域的隱藏和顯示
下拉框值改變時去改變選中索引（provinceIndex）這個變量，實現citybox中顯示的城市內容的改變
點擊城市內容時觸發選中/取消選中方法，其實為同一個方法，通過判斷當前點擊元素的class（class中包含is-selected則是已經選中的）來分辨是選中還是取消選中
在選中方法里將選中的對象添加到一個存放選中內容的列表（citys）中，并給點擊元素的class添加上is-selected類，如果是取消選中則會在在citys列表做一個篩選，將取消的內容給去除
清空方法則是將citys列表清空，并且將有is-selected類的class設置為正常

實現代碼

template部分

<template>
    <div class="form-item">
        <label for="city" class="form-label">服務區域</label>
        
        <span>
            <span style="background-color: rgb(245,247,249);margin-right: 5px;" v-for="item in citys" :key="item">{{
                item.name }}</span>
            <span @click="ClickAddCity" style="color: #0bbfbc;">點擊添加</span>
        </span>

        <!-- 顯示/隱藏部分 -->
        <div ref="citysDom" class="citysbox">
            <div class="citysbox-top">
           
                <div class="top-left">
                    <label for="city" class="form-label1">省份：</label>
                    <select required id="city" name="city" class="form-input form-input-select"
                        style="width: auto;color: #303030;" v-model="provinceIndex">
                        <option v-for="(item, index) in Provinces" :key="index" :value="index">
                        {{ item.name}}                        </option>
                    </select>
                </div>
                
                <div class="top-right">
                    <button type="button" class="btn-close" @click="ClickAddCity">關閉</button>
                    <button type="button" class="btn-confirm" @click="ClickReastBtn">清空</button>
                    <button type="button" class="btn-confirm" @click="ClickAddCity">確認</button>
                </div>
            </div>
            <!-- 城市內容部分 -->
            <div class="citysbox-body">
                <div v-for="item in Provinces[provinceIndex].city" :key="403 Forbidden"
                :class="citys.includes(item) ? 'box-item is-selected' : 'box-item'"
                @click="SelectChange(item, $event)">
                    {{ item.name }}</div>
            </div>
            
        </div>
    </div></template>

script部分

<script setup>
	import { ref } from 'vue';
	// 省市信息
	const Provinces = [
	    {
	        "id": 24,
	        "name": "北京市",
	        "city": [
	            {
	                "id": 268,
	                "name": "東城區",
	                "province": 24
	            },
	            {
	                "id": 269,
	                "name": "西城區",
	                "province": 24
	            }
	        ]
	
	    },
	    {
	        "id": 9,
	        "name": "福建省",
	        "city": [
	            {
	                "id": 109,
	                "name": "福州市",
	                "province": 9
	            },
	            {
	                "id": 110,
	                "name": "廈門市",
	                "province": 9
	            },
	            {
	                "id": 116,
	                "name": "龍巖市",
	                "province": 9
	            }
	        ]
	    }
	]
	// 添加服務區域相關
	var citysDom = ref() // dom對象
	var provinceIndex = ref(0) // 當前選擇獲取值
	var citys = ref([]) // 已選擇城市
	
	// 點擊添加時顯示地址選擇div
	function ClickAddCity() {
	    if (citysDom.value.style.display !== 'block')
	        citysDom.value.style.display = 'block';
	    else citysDom.value.style.display = 'none';
	}
	
	// 選中地址
	function SelectChange(item, e) {
	    
	    let domClass = e.currentTarget.getAttribute("class")
	    // 判斷item的class區別兩種情況，一種是點擊未選中的item選中 , 一種是點擊已選中的取消選中
	    if (domClass == "box-item") {
	        e.currentTarget.className = "box-item is-selected"
	        // 將選中對象添加到citys列表中
	        citys.value.push(item)
	    } else {
	        e.currentTarget.className = "box-item"
	        // 將取消選中對象從citys列表中去除
	        citys.value = citys.value.filter(val => val.id != 403 Forbidden)
	    }
	    console.log('citys:', citys.value)
	}
	
	// 清空地址區域
	function ClickReastBtn() {
	    citys.value = []
	    let items = document.getElementsByClassName("is-selected");
	    console.log('length',items.length);
	    console.log('items:',items, typeof(items));
	    // 清空已選擇的樣式
	    Array.prototype.forEach.call(items, function (item) {
	        item.className = "box-item" 
	    });
	}
	</script>

css部分

<style scoped>
	.form-item {
	    margin-right: 24px;
	    margin-bottom: 24px;
	}
	
	.form-label {
	    height: 14px;
	    font-size: 14px;
	    color: #39475A;
	    letter-spacing: 0;
	    text-align: right;
	    line-height: 14px;
	    font-weight: 400;
	    margin-right: 12px;
	}
	.citysbox {
	    width: 700px;
	    max-width: 750px;
	    min-width: 360px;
	    padding: 10px;
	    min-height: 100px;
	    display: none;
	    position: absolute;
	    background: rgb(245, 247, 249);
	    border-radius: 10px;
	}
	
	.citysbox-top{
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	}
	.citysbox-body {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	}
	
	.box-item {
	    margin: 10px 10px 0 0;
	    border: rgb(197, 208, 223) solid 1px;
	    border-radius: 4px;
	    padding: 3px;
	}
	
	.is-selected {
	    border: rgb(11, 192, 188) solid 1px;
	    color: rgb(11, 192, 188);
	}</style>

總結

以上

內容已經說得比較詳細了，特此記錄

如對你有所幫助的話可以幫我點個贊，感謝

在線咨詢

上一篇：在 CSS 中隱藏元素的 10 種方法
下一篇：HTML學習教程1-介紹HTML以及實例解析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商