【接口自動化測試】selenium旗艦版Web測試理論篇

一、Web自動化測試

1.1 簡介

1.2 優(yōu)勢?

1.3 E2E測試

二、主流的Web自動化測試工具

三、SeleniumWeb自動化測試

3.1 conda終端一鍵搭建命令

3.2?測試Web步驟①：自動打開瀏覽器

3.3?測試Web步驟②：元素的定位：八大定位策略分三組

3.3.1?分組①：根據(jù)文本定位標簽

3.3.2?分組②：根據(jù)屬性，定位任意元素

3.3.3?分組③：通用定位策略：可以定位到任意元素??

3.3?測試Web步驟③：元素的操作

四、 牛刀小試！CSS定位百度搜索框

一、Web自動化測試

1.1 簡介

Web自動化測試是指使用自動化工具模擬用戶在瀏覽器中的操作，例如點擊、輸入文本、登陸賬號等，以驗證Web應用程序是否按照預期工作。這種測試可以大量的節(jié)省時間和人力成本。本文將講解Web自動化測試，并簡單的測試百度功能。

1.2 優(yōu)勢?

Web自動化測試的優(yōu)點有很多，這里只列出幾個重要的優(yōu)勢：

1. 提高測試效率：自動化測試可以快速的同時模擬多個用戶進行測試；
2. 提高測試覆蓋率：自動化測試可以重復執(zhí)行測試用例，確保每一個功能都被檢測到；
3. 提高軟件質(zhì)量：可以發(fā)現(xiàn)軟件缺陷得以關(guān)閉；

1.3 E2E測試

Web自動化測試屬于E2E測試，是軟件質(zhì)量保證的探測器。

E2E測試是指端到端測試（End-to-End Testing），它是一種軟件測試方法，用于測試整個系統(tǒng)在實際運行環(huán)境中的功能和性能。

E2E測試從開始到結(jié)束測試整個系統(tǒng)，包括所有的組件、服務和系統(tǒng)之間的交互。這種測試方法旨在模擬真實的用戶場景和使用情況，以便發(fā)現(xiàn)系統(tǒng)中的任何問題和潛在的缺陷。

E2E測試是軟件開發(fā)過程中最關(guān)鍵的測試之一，它可以確保軟件系統(tǒng)的正確性、穩(wěn)定性和可靠性。

二、主流的Web自動化測試工具

Web自動化測試的主流框架有：

1. Selenium: selenium是最早出現(xiàn)的自動化測試框架之一，它支持多種瀏覽器和多種編程語言。目前世界各地使用它的公司是最廣的，它擁有著豐富的社區(qū)和文檔，遇到的問題幾乎都有人遇到過，一搜既有大量的經(jīng)驗借鑒。
2. Cypress:cypress是一個新的自動化測試框架，它的特點是速度快、穩(wěn)定性高、易用性強。它可以在Chrome、Firefox和Electron中運行，支持JavaScript語言。它使用了類似于React的虛擬DOM管理頁面元素，可以提高測試效率。但是，Cypress不支持多瀏覽器測試。
3. Playwright:playwright是由Microsoft開發(fā)的自動化測試框架，也支持多種瀏覽器和編程語言，可以運行多種操作系統(tǒng)上。它支持多瀏覽器測試，而且執(zhí)行速度比Selenium還有快，也比Cypress更靈活、支持更多的瀏覽器操作。但是，Playwright還比較新，社區(qū)和文檔方面還不夠成熟，可能遇到錯誤沒有地方查找資料。

掌握任何一個Web自動化測試工具都可以進行自動化測試，所以我們需要選擇一個來專研。Selenium我們有許多們選擇它的理由：

• 瀏覽器支持最多，兼容最好
• 最新的Selenium4綜合各方面都非常棒
• 生態(tài)成熟，文檔豐富，歷史悠久
• 同時還可以進行App端的自動化測試

三、SeleniumWeb自動化測試

3.1 conda終端一鍵搭建命令

pip install webdriver_helper==1.0.1 -i https://pypi.mirrors.ustc.edu.cn/simple

?必須設(shè)定版本號為1.0.1??

不然會出現(xiàn)以下錯誤：

ImportError: cannot import name 'get_webdriver' from 'webdriver_helper' (unknown location)

這是因為，更高版本的webdriver_helper是要收費的，而pip自動下載的是最高版本的庫。

3.2?測試Web步驟①：自動打開瀏覽器

from webdriver_helper import *
'''
with ... as ... 語句可以無需使用driver.quit()關(guān)閉瀏覽器，當程序結(jié)束時會自動做這個操作。
complex sample:
driver = get_webdriver()
driver.get("htpps://baidu.com")
driver.quit()
'''
with get_webdriver() as driver:
    driver.get("https://baidu.com")

webdriver-helper做了什么事情呢？

• 自動獲取操作系統(tǒng)的類型和瀏覽器的版本；
• 自動下載安裝瀏覽器的驅(qū)動；
• 自動創(chuàng)建和返回WebDriver對象。

3.3?測試Web步驟②：元素的定位：八大定位策略分三組

from selenium.webdriver.common.by import By

由selenium提供的定位策略，一共有八個，大致按照原理可以分為三組。第一二組一般不會使用，因為一二組本質(zhì)上也是使用第三組來寫的底層，所以只需要了解一二組，掌握第三組的方法。

使用定位策略函數(shù)：(driver為定義好的get_webdriver()對象)

1. driver.find_element_by_id() 【棄用】
2. driver.find_element(By.ID, "")【常用】
3. driver.find_elements(By.ID, "")【在2的基礎(chǔ)上加上s：找到一組多個元素】

3.3.1?分組①：根據(jù)文本定位<a></a>標簽

當且僅當可以定位<a></a>標簽，這個標簽一般長這樣，href超鏈接，中間位文本，用于網(wǎng)頁跳轉(zhuǎn)：

<a >登錄</a>

根據(jù)文本定位<a><a/>標簽有兩種辦法：

• LINK_TEXT：精確定位，輸入完整的文本。如：登錄，使用方法為：

element = driver.find_element(By.LINK_TEXT,"登陸") 
# 兩個參數(shù)：?1.選擇定位策略為文本定位，2.根據(jù)<a></a>中間的文本”登陸“定位對應的文本框。

• PARTIAL_LINK_TEXT：模糊定位，輸入文本部分內(nèi)容。如：登，使用方法為：

element = driver.find_element(By.PARTIAL_LINK_TEXT,"登") 
# 兩個參數(shù)：?1.選擇定位策略為文本定位，2.根據(jù)<a></a>中間的文本”登“定位對應的文本框。

3.3.2?分組②：根據(jù)屬性，定位任意元素

假設(shè)我們要定位input搜索框元素，使用如下HTML語言來刨析：

<div class="search-group">
<input
    id="search-input"
    name="wd"
    type="text"
    placeholder="其實搜索很簡單！"
    value=""
    autocomplete="off">
<button 
    type="submit 
    id="ai-topsearch
    class=submit am-btn">...
</button>
</div>

根據(jù)屬性定位有四種辦法：

• ID：根據(jù)元素的id進行定位，如：search-input，使用方法如下：

element = driver.find_element(By.ID,"search-input")
 # 定位input元素

• NAME：根據(jù)元素的name進行定位，如：wd，使用方法如下：

element = driver.find_element(By.NAME,"wd") 
# 定位input元素

• CLASS_NAME：根據(jù)元素的class屬性進行定位，如：submit am-btn，使用方法如下：

element = driver.find_element(By.CLASS_NAME,"submit am-btn")
 # input元素無class標簽定位button元素

會報錯：無法找到這個元素，提示請使用CSS來查找這個元素。

實際上這個方法是通過分組3的CSS來完成定位的，底層其實還是用的CSS。所以當?shù)诙€參數(shù)位“submit am-btn”時，不符合CSS的語法，導致無法使用這個參數(shù)的內(nèi)容進行定位。

• TAG_NAME：根據(jù)元素的名字來進行定位，如：input，使用方法如下：

element = driver.find_element(By.TAG_NAME,"input") 
# 定位input元素

3.3.3?分組③：通用定位策略：可以定位到任意元素??

通用定位策略有兩種CSS和XPath，其中Selenium框架官方推薦使用css，因為其定位率高于Xpath。

假設(shè)我們要定位?button 或者?input?元素，使用如下HTML語言來刨析：

<div class="search-group">
<input
    id="search-input"
    name="wd"
    type="text"
    placeholder="其實搜索很簡單！"
    value=""
    autocomplete="off">
<button 
    type="submit 
    id="ai-topsearch
    class=submit am-btn">
<i class="am-icon-search"></i>
<span>搜索</span>
</button>
</div>

Ⅰ、CSS：根據(jù)CSS選擇器語法和元素屬性的標識性，進行定位，其中常用的選擇器語法有4種：

• 語法1【ID選擇器】：使用#符號后跟元素的ID名稱來定位元素。

# 例如：CSS根據(jù)ID定位button元素語法為：button#my-element。 
element = driver.find_element(By.CSS_SELECTOR, "button#ai-topsearch")

• 語法2【類選擇器】：使用.符號后跟元素的類名稱來定位元素。例如：button.submit am-btn，如果名稱如“submit am-bin"包含空格，那么意味著該button同時包含①submit和②am-btn兩個類，需要使用.號分隔，即.submit.am-btn。

# 例如：CSS根據(jù)類定位button元素語法為：button.submit.am-btnt。 
element = driver.find_element(By.CSS_SELECTOR, "button.submit.am-btn")

• 語法3【屬性選擇器】：使用元素的屬性來進行定位，ID和類是特殊的屬性。例如：input[type="text"] .

# CSS根據(jù)屬性定位input元素
search_box = driver.find_element(By.CSS_SELECTOR, "input[type='text']")

除此之外還可以進行★★★CSS模糊查詢★★★：

1. [屬性^='開頭的字母'] # 獲取指定屬性以指定字母開頭的元素
2. [屬性$='結(jié)束的字母'] # 獲取指定屬性以指定字母結(jié)束的元素
3. [屬性*='包含的字母'] # 獲取指定屬性包含指定字母的元素

# 語法1：[屬性^='開頭的字母'] # 獲取指定屬性以指定字母開頭的元素
search_box  = driver.find_element(By.CSS_SELECTOR, "[class^='s_i']").send_keys('CSDN')
# 語法2：[屬性$='結(jié)束的字母'] # 獲取指定屬性以指定字母結(jié)束的元素
search_box  = driver.find_element(By.CSS_SELECTOR, "[class$='pt']").send_keys('CSDN')
# 語法3：[屬性*='包含的字母'] # 獲取指定屬性包含指定字母的元素
search_box  = driver.find_element(By.CSS_SELECTOR, "[autocomplete*='f']").send_keys('CSDN')
sleep(3)
# 關(guān)閉網(wǎng)頁
driver.quit()

• 語法4【組合選擇器】：使用一組多個屬性同時定位元素，使用方法如下：

# CSS根據(jù)一組屬性定位button元素
input_elem = driver.find_element(By.CSS_SELECTOR, "input#search-input[name='wd'][type='text'][placeholder='其實搜索很簡單！'][autocomplete='off']")

?????????直接自動生成css路徑步驟如下????????

Ⅱ、Xpath（不常用簡單介紹以下用法）：Xpath策略有多種，無論使用哪一種策略（方法），定位的方法都是同一個，不同策略只決定方法的參數(shù)的寫法，XPath常用的定位策略：

• 絕對路徑：從最外層元素到指定元素之間所有經(jīng)過元素層級的路徑，所以根據(jù)HTML語言的語法，絕對路徑是以??/html? 根節(jié)點開始的，使用?/?來分割元素層級。

? ? ? ? ?語法：?/html/body/div/button,?絕對路徑對頁?結(jié)構(gòu)要求比較嚴格，不建議使??。。?！

• 相對路徑：匹配任意層級的元素，不限制元素的位置 ，相對路徑是以?//?開始，?//?跟元素名稱，不知元素名稱可以使用?*代替。

? ? ? ??語法：//button? 或者 //*

3.3?測試Web步驟③：元素的操作

Selenium提供了許多對元素進行操作的方法，包括：

# 輸入文本
element.send_keys("hello world")

# 點擊元素
element.click()

# 獲取元素文本
text = element.text

# 獲取元素屬性值
value = element.get_attribute("value")

# 判斷元素是否可見
visible = element.is_displayed()

# 判斷元素是否選中（適用于復選框和單選框）
checked = element.is_selected()

# 模擬下拉框選擇
from selenium.webdriver.support.ui import Select

select = Select(driver.find_element_by_id("select_id"))
select.select_by_value("option_value")

這些方法可以幫助開發(fā)者實現(xiàn)對網(wǎng)頁元素的自動化操作。

四、 牛刀小試！CSS定位百度搜索框

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

search_input = driver.find_element(By.CSS_SELECTOR, "input#search-input")
search_input.clear()  # 清空輸入框
search_input.send_keys("Python")  # 輸入關(guān)鍵詞

driver.quit()  # 關(guān)閉瀏覽器
from selenium import webdriver

# 創(chuàng)建瀏覽器對象
browser = webdriver.Chrome()

# 打開百度首頁
browser.get('https://www.baidu.com/')

# 定位輸入框并輸入CSDN
input_box = browser.find_element(By.CSS_SELECTOR, '#kw')
input_box.send_keys('CSDN')

# 點擊搜索按鈕
search_button = browser.find_element(By.CSS_SELECTOR, '#su')
search_button.click()

# 關(guān)閉瀏覽器
browser.quit()

解釋：（核心操作——先定位元素，再操作該元素。）

1. 首先導入webdriver和By庫。

2. 打開Chrome瀏覽器，然后進入百度首頁。

3. 使用find_element方法通過CSS選擇器定位到輸入框元素。其中，#kw 表示 id 為 kw 的元素，#su 表示 id 為 su 的元素。

4. send_keys 方法用于在輸入框中輸入文本，click 方法用于點擊按鈕。

5. 最后，使用 quit 方法關(guān)閉瀏覽器。文章來源地址http://www.zghlxwxcb.cn/news/detail-447296.html

到了這里，關(guān)于【接口自動化測試】selenium旗艦版Web測試理論篇的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！