30分鐘上手Web自動化測試：Python+Selenium零基礎實戰指南
前言
在數字化轉型加速的今天，Web UI自動化測試已成為提升開發效率、保障產品質量的關鍵技能。本文專為初學開發者設計，從零開始手把手帶你搭建環境、掌握核心技能，最終實現完整的自動化測試流程。無需編程經驗，只需跟隨步驟操作，你將學會：
-
快速部署Python和PyCharm開發環境，避開新手常見配置陷阱；
-
靈活運用Selenium框架，精準定位網頁元素（按鈕、輸入框等），實現自動化交互；
-
實戰腳本解析，以“百度搜索”為例，7行代碼解鎖自動化測試核心邏輯；
-
八大元素定位技巧，覆蓋ID、XPath、CSS等策略，解決動態組件、加載延遲等難題。
無論你是測試工程師、開發者，還是希望提升效率的技術愛好者，本文均能助你30分鐘內跑通第一個自動化腳本，用技術解放重復勞動！
快速上手Web UI自動化測試開發。我們將從環境搭建開始，逐步安裝Python編程語言、PyCharm開發工具和Selenium瀏覽器自動化框架。掌握基礎配置后，會重點演示如何通過元素定位技術獲取網頁按鈕、輸入框等關鍵組件，我們現在開始進入web網頁UI自動化的流程：
一，先安裝Python和客戶端Pcharm
1、安裝Python環境
a、在官網去下載python:https://www.python.org/downloads/ 在官網下載時，根據自己電腦的操作系統選擇對應版本即可，
b、值得注意的是，在下載完成，正式安裝的時候，盡量選擇自定義安裝：安裝到非C盤，或者非系統文件夾。并且勾選將python添加到path環境變量，這樣就不用再手動去電腦的高級設置中去配置環境變量了，其他就是一直點下一步就行，沒什么需要特殊管的，具體如下圖。
c、安裝完成以后在cmd窗口中中，只要能像下圖一樣，輸入python進入交互式環境，即代表安裝成功，如果沒有，先檢查環境變量。
2、安裝PyCharm
a、官網地址：https://www.jetbrains.com/pycharm/download/?section=windows
需要需要：下載頁面，往下翻，下載社區版本：PyCharm Community Edition。免費的，足夠日常使用了。
b、下載完成以后，一樣，安裝路徑盡量自己去單獨創建一個新的文件夾存放，以后寫的代碼也會直接保存到創建的文件夾中。且也需勾選創建環境變量。剩下的就是一直點下一步即可。
二：安裝對應的框架。
?1、打開PyCharm終端?
點擊底部 Terminal 標簽頁，輸入以下命令?：
pip install selenium
若下載緩慢，可附加國內鏡像源地址：指定鏡像源加速下載?
pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple
2、安裝瀏覽器驅動
-華為鏡像云下載地址：進入網站后，直接按照自己瀏覽器的版本號去找對應或者接近的版本即可：
Chrome瀏覽器驅動：https://mirrors.huaweicloud.com/chromedriver/
FireFox瀏覽器的驅動： https://mirrors.huaweicloud.com/geckodriver/
Opera瀏覽器引擎驅動：https://mirrors.huaweicloud.com/operadriver/
下載好以后，解壓到電腦的本地地址，后續的代碼中會用到。
三：UI自動化腳本實操
我們寫了一個最簡單的代碼，一共7行，用來實現，使用Python，驅動瀏覽器打開百度的首頁，并搜索關鍵詞：“娃哈哈”。可以直接借鑒使用。
# 導入Selenium的webdriver模塊，用于控制瀏覽器 from selenium import webdriver # 從webdriver.chrome.service模塊導入Service類，用于指定ChromeDriver的路徑 from selenium.webdriver.chrome.service import Service # 初始化瀏覽器對象 # webdriver.Chrome()用于創建一個Chrome瀏覽器的實例 # service=Service(executable_path='D:\\chromedriver.exe')指定了ChromeDriver的路徑 # ChromeDriver是Selenium用于與Chrome瀏覽器通信的獨立服務器 driver = webdriver.Chrome(service=Service(executable_path='D:\\chromedriver.exe')) # 使用driver對象的get方法打開指定的網頁 # 此處打開的是百度首頁 driver.get('https://www.baidu.com') # 或者其他任何網站 # 執行搜索操作 # driver.find_element()方法用于在網頁中查找元素 # 第一個參數是定位元素的策略，此處使用'name'策略 # 'wd'是百度搜索框的name屬性值 # send_keys()方法用于模擬在輸入框中輸入文本 # 此處輸入的是'娃哈哈' driver.find_element('name', 'wd').send_keys('娃哈哈') # 再次使用driver.find_element()方法查找元素 # 此次使用'id'策略，'su'是百度搜索按鈕的id屬性值 # click()方法用于模擬鼠標點擊操作 # 此處點擊的是搜索按鈕 driver.find_element('id', 'su').click() # 使用input函數等待用戶輸入 # 這里的提示信息是"按回車鍵關閉瀏覽器..." # 當用戶按下回車鍵時，input函數返回，程序繼續執行下面的代碼 # 下面的代碼（未給出）通常會包含driver.quit()用于關閉瀏覽器和結束ChromeDriver進程 input("按回車鍵關閉瀏覽器...")
四：元素的定位以及使用
一、什么是元素？?
在Web自動化中，?元素（Web Element）? 是網頁的構成單元，對應HTML文檔中的標簽（Tag）及其內容。每個元素可以是以下任意一種：
可見組件?：如輸入框、按鈕、鏈接、圖片、下拉框等。
不可見組件?：如隱藏的<input>、<div>容器、元數據標簽（如<meta>）。
動態內容?：通過JavaScript生成的元素（如彈窗、異步加載的列表）。
元素的核心屬性?：
標簽名?：如<input>, <a>, <div>。
屬性?：如id, name, class, href, value等。
內容?：標簽內的文本（如<button>提交</button>中的“提交”）。
我們現在，在瀏覽器F12工具中，來觀察一下百度輸入框的元素，先打開F12工具，在選項卡中選擇“元素”，然后點擊左上角的定位工具，然后鼠標點擊輸入框，即可查看輸入框的元素信息。如下圖：
這個輸入框，我們可以用id定位器來定位，value為kw,也可以用name定位器，value為wd,當然也可用class定位器。
具體的實操，大家可以都嘗試一下。
二、元素定位的核心方法?
以下是8種常用定位策略，按優先級和效率排序：
1. 通過id定位?
語法?：
find_element(By.ID, "id_value")
原理?：id是HTML元素的唯一標識符。
示例?：
<input id="username" type="text"> #HTML代碼
driver.find_element(By.ID, "username").send_keys("test") #在python中實際用法
優點?：定位速度最快，且唯一性高。
缺點?：部分網站動態生成id（如含隨機字符串）。
2. 通過name定位?
語法?：
find_element(By.NAME, "name_value")
示例?：
<input name="password" type="password">
driver.find_element(By.NAME, "password").send_keys("123456")
適用場景?：表單元素常用name屬性。
3. 通過class name定位?
語法?：
find_element(By.CLASS_NAME, "class_value")
注意?：若class有多個值（如class="btn btn-primary"），需完全匹配其中一個。
示例?：
<button class="submit-btn">登錄</button>
driver.find_element(By.CLASS_NAME, "submit-btn").click()
4. 通過tag name定位?
語法?：
find_element(By.TAG_NAME, "tag_name")
適用場景?：定位特定標簽（如<table>, <img>）。
示例?：
<img src="logo.png" alt="Logo">
image = driver.find_element(By.TAG_NAME, "img")
5. 通過link text定位超鏈接?
語法?：
find_element(By.LINK_TEXT, "鏈接文本")
示例?：
<a href="/about">關于我們</a>
driver.find_element(By.LINK_TEXT, "關于我們").click()
6. 通過partial link text模糊匹配鏈接?
語法?：
find_element(By.PARTIAL_LINK_TEXT, "部分文本")
示例?：
<a href="/contact">聯系我們-2023</a>
driver.find_element(By.PARTIAL_LINK_TEXT, "聯系").click()
7. 通過XPath定位?
語法?：
find_element(By.XPATH, "xpath表達式")
核心語法?：
//：從任意位置搜索
[@attribute='value']：按屬性過濾
/或//：層級關系
示例?：
<div class="header"> <input id="search" placeholder="輸入關鍵詞"> </div>
# 絕對路徑（不推薦） driver.find_element(By.XPATH, "/html/body/div/input") # 相對路徑 + 屬性 driver.find_element(By.XPATH, "//input[@id='search']") # 文本匹配 driver.find_element(By.XPATH, "//button[text()='提交']") # 包含部分屬性值 driver.find_element(By.XPATH, "//input[contains(@class, 'search-input')]")
優點?：靈活性極高，支持復雜邏輯。
缺點?：性能略低，路徑易受頁面結構變化影響。
8. 通過CSS Selector定位?
語法?：
find_element(By.CSS_SELECTOR, "css選擇器")
核心語法?：
#id：按id選擇
.class：按class選擇
[attribute=value]：按屬性選擇
>：直接子元素
示例?：
<ul class="menu"> <li><a href="/home">首頁</a></li> </ul>
# 按class選擇 driver.find_element(By.CSS_SELECTOR, ".menu") # 層級選擇 driver.find_element(By.CSS_SELECTOR, "ul.menu > li > a") # 屬性選擇 driver.find_element(By.CSS_SELECTOR, "a[href='/home']")
優點?：執行速度快，語法簡潔。
缺點?：不支持文本直接匹配。
三、快速定位元素的技巧?
1. 使用瀏覽器開發者工具?
Chrome DevTools?：
右鍵頁面元素 → 選擇“檢查”（或按F12）。
在Elements面板中查看元素的HTML結構。
右鍵元素 → 選擇“Copy” → 復制XPath或CSS Selector。
2. 使用插件輔助?
ChroPath?：Chrome插件，自動生成XPath和CSS選擇器。
SelectorGadget?：交互式選擇元素并生成選擇器。
3. 動態元素處理?
部分匹配?：使用contains()或starts-with()：
# XPath部分匹配class driver.find_element(By.XPATH, "//div[contains(@class, 'dynamic-')]") # CSS選擇器匹配屬性開頭 driver.find_element(By.CSS_SELECTOR, "div[class^='dynamic-']")
4. 優先選擇穩定屬性?
避免使用以下屬性：
動態生成的id（如id="button-1690xxxxx"）。
可能重復的class（如class="item"）。
優先選擇：
業務相關的name或id（如name="email"）。
帶語義的data-*屬性（如data-testid="submit-button"）。
四、最佳實踐?
定位策略優先級?：
ID > Name > CSS Selector > XPath > 其他。
避免絕對路徑?：
使用相對XPath或CSS選擇器，減少對頁面結構的依賴。
處理加載延遲?：
結合顯式等待（Explicit Wait）確保元素加載完成：
from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC element = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "username")) )
處理iframe?：
切換至iframe后再定位內部元素：
driver.switch_to.frame("iframe-name")
五、常見錯誤與解決?
錯誤場景 解決方案
NoSuchElementException 檢查元素是否存在、是否在iframe中、是否需等待加載。
元素交互失敗（如點擊無效） 使用execute_script("arguments.click();", element)強制點擊。
XPath/CSS語法錯誤 通過在線驗證工具（如XPath Tester）調試。
通過以上方法，可以快速、精準地定位Web元素，提升自動化腳本的穩定性和可維護性。
結語
親愛的朋友：
希望本文中描述的問題以及解決方案，可以幫助到您。當然，我們深知，問題和挑戰總是層出不窮，新的情況也在不斷涌現。如果讀者朋友您有更好的方案，或者在實際應用中發現了文中的不足之處，請不吝分享您的寶貴建議。誠摯地邀請每一位讀者加入我們的行列，共同完善這份教程。
感謝您的閱讀與支持！
Dear frends,
We hope that the questions and solutions presented in this article can be of assistance to you. Of course, we are fully aware that problems and challenges are always emerging in an endless stream, and new situations are constantly arising. If you, our readers, have better solutions or have discovered any deficiencies in this article through practical application, please do not hesitate to share your valuable suggestions with us. We sincerely invite every reader to join us in continuously improving this tutorial.
Thank you for your reading and support!
See you,Parting is for better meeting！
浙公網安備 33010602011771號