10.4 Selenium:Web 自动化测试框架


文章目录

  • 前言
  • [一、 安装](#一、 安装)
    • [1.1 安装 Selenium](#1.1 安装 Selenium)
    • [1.2 安装 WebDriver](#1.2 安装 WebDriver)
  • [二、 浏览器操作](#二、 浏览器操作)
    • [2.1 启动浏览器](#2.1 启动浏览器)
    • [2.2 窗口控制](#2.2 窗口控制)
  • [三、 元素定位](#三、 元素定位)
  • [四、 等待机制](#四、 等待机制)
    • [4.1 显式等待](#4.1 显式等待)
    • [4.2 隐式等待](#4.2 隐式等待)

前言

Selenium 是一个用于 Web 应用程序测试的框架,其测试直接在浏览器中运行,能够模拟真实用户的操作行为。它支持多平台(Windows、Linux、macOS)、多语言(Python、Perl、PHP、C# 等)以及多浏览器(Chrome、Firefox、IE、Safari 等)。


一、 安装

1.1 安装 Selenium

bash 复制代码
bash
pip install selenium

1.2 安装 WebDriver

各主流浏览器的 WebDriver 下载地址:

Chrome:https://chromedriver.chromium.org/

Firefox:https://github.com/mozilla/geckodriver/releases

IE:https://selenium.dev/downloads/

配置示例(Chrome on Windows):

下载与本地 Chrome 版本对应的 chromedriver

解压后将 chromedriver.exe 放置于 Python 安装目录下(或添加到系统 PATH)

二、 浏览器操作

2.1 启动浏览器

1)基础启动方式

python 复制代码
python
from selenium import webdriver

# Chrome
browser = webdriver.Chrome()
browser.get('https://mail.163.com/')

# Firefox
browser = webdriver.Firefox()
browser.get('https://mail.163.com/')

# IE
browser = webdriver.Ie()
browser.get('https://mail.163.com/')

2)加载用户配置启动

python 复制代码
python
from selenium import webdriver

option = webdriver.ChromeOptions()
# 使用指定用户配置目录(注意路径转义)
option.add_argument('--user-data-dir=C:\\Users\\admin\\AppData\\Local\\Google\\Chrome\\User Data')
browser = webdriver.Chrome(options=option)
browser.get('https://mail.163.com/')
browser.quit()

提示:执行前请确保浏览器已完全关闭

3)无头(Headless)模式

python 复制代码
python
from selenium import webdriver

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('--headless')      # 无界面模式
chrome_options.add_argument('--disable-gpu')   # 禁用 GPU 加速

browser = webdriver.Chrome(options=chrome_options)
browser.get('https://mail.163.com/')
print(browser.page_source)  # 获取页面源码
browser.quit()

2.2 窗口控制

python 复制代码
python
# 最大化窗口
browser.maximize_window()

# 最小化窗口
browser.minimize_window()

# 自定义窗口尺寸(宽×高)
browser.set_window_size(500, 800)

# 前进/后退
browser.forward()
browser.back()

三、 元素定位

假设目标页面源码如下:

html 复制代码
html
<html>
 <body>
  <form>
   <input id="fid" name="fid" type="text" />
   <input id="firstName" name="fname" class="fname" type="text" />
   <input id="lastName" name="fname" class="fname" type="text" />
   <a href="index.html">index</a>
  </form>
 </body>
</html>

常用定位方法:

python 复制代码
python
# 1. 通过 ID 定位
browser.find_element_by_id('fid')

# 2. 通过 Name 定位
browser.find_element_by_name('fname')      # 首个匹配元素
browser.find_elements_by_name('fname')     # 所有匹配元素(列表)

# 3. 通过 Class 定位
browser.find_element_by_class_name('fname')
browser.find_elements_by_class_name('fname')

# 4. 通过标签名定位
browser.find_element_by_tag_name('input')
browser.find_elements_by_tag_name('input')

# 5. CSS 选择器定位
browser.find_element_by_css_selector('.fname')
browser.find_elements_by_css_selector('.fname')

# 6. 链接文本定位
browser.find_element_by_link_text('index')           # 完整文本匹配
browser.find_element_by_partial_link_text('ind')     # 部分文本匹配

# 7. XPath 定位
browser.find_element_by_xpath("//input[@id='fid']")
browser.find_elements_by_xpath("//input[@name='fname']")

四、 等待机制

为处理动态加载内容,Selenium 提供两种等待方式:

4.1 显式等待

python 复制代码
python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

browser = webdriver.Chrome()
browser.get('https://mail.163.com/')

try:
    # 最多等待5秒,每0.5秒检查一次条件
    element = WebDriverWait(browser, 5).until(
        EC.presence_of_element_located((By.ID, 'lbNormal'))
    )
    print(element)
finally:
    browser.quit()

4.2 隐式等待

python 复制代码
python
from selenium import webdriver

browser = webdriver.Chrome()
browser.implicitly_wait(5)  # 设置全局等待时间
browser.get('https://mail.163.com/')

element = browser.find_element_by_id('lbNormal')
print(element)
browser.quit()

与 time.sleep() 的区别:隐式等待在超时时间内若元素加载完成则立即继续执行,而非强制等待固定时长。


相关推荐
明月_清风1 天前
打字机效果优化:用 requestAnimationFrame 缓冲高频文字更新
前端·javascript
明月_清风1 天前
Markdown 预解析:别等全文完了再渲染,如何流式增量渲染代码块和公式?
前端·javascript
掘金安东尼1 天前
用 CSS 打造完美的饼图
前端·css
掘金安东尼1 天前
纯 CSS 实现弹性文字效果
前端·css
牛奶1 天前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶1 天前
Vue 底层原理 & 新特性
前端·vue.js·面试
anOnion1 天前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er1 天前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart1 天前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星1 天前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code