WebApp-Testing Skill 入门指南：从零搭建自动化测试框架

9次阅读

共计 2596 个字符，预计需要花费 7 分钟才能阅读完成。

在快速迭代的 Web 开发中，手动测试逐渐暴露出三大核心问题：

重复劳动：表单提交、导航跳转等基础场景需要反复验证
兼容性黑洞：不同浏览器渲染差异导致肉眼检查效率极低
回归成本：每次功能更新需要全量测试，人力投入呈指数增长

以电商下单流程为例，手动测试完成全部浏览器覆盖需要 4 人天，而自动化脚本可在 2 小时内完成 200 次迭代测试。

维度	Selenium WebDriver	Cypress
API 设计	多语言支持(Java/Python 等)	仅 JavaScript
执行速度	依赖浏览器驱动(较慢)	直接运行在浏览器(快 30%)
调试体验	需结合 IDE 断点	内置时间旅行调试器
学习曲线	中等	较低

选型建议：长期复杂项目选 Selenium，快速验证场景用 Cypress

# conftest.py - 全局测试配置
import pytest
from selenium import webdriver

@pytest.fixture(scope="module")
def browser():
    # Chrome 无头模式配置 时间复杂度 O(1)
    options = webdriver.ChromeOptions()
    options.add_argument("--headless")
    driver = webdriver.Chrome(options=options)
    yield driver  # 测试结束后销毁
    driver.quit()

# 最佳实践：组合等待与多定位策略
def safe_click(driver, selector, timeout=10):
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.common.by import By

    # 优先 CSS 选择器，降级到 XPath 时间复杂度 O(n)
    element = WebDriverWait(driver, timeout).until(lambda d: d.find_element(By.CSS_SELECTOR, selector) or \
                  d.find_element(By.XPATH, selector)
    )
    element.click()

# base_page.py
import logging
from selenium.webdriver.support import expected_conditions as EC

class BasePage:
    def __init__(self, driver):
        self.driver = driver
        self.logger = logging.getLogger(__name__)

    def wait_for_element(self, locator, timeout=10):
        try:
            # 显式等待 平均时间复杂度 O(n)
            return WebDriverWait(self.driver, timeout).until(EC.presence_of_element_located(locator)
            )
        except Exception as e:
            self.logger.error(f"Element not found: {locator}")
            raise

ID 定位法：优先使用稳定 iframe ID
```
driver.switch_to.frame("fixed-iframe-id")
```

索引回退：通过父子 frame 索引导航

driver.switch_to.parent_frame()  # 返回上级

EC 判断法：等待 iframe 可用性

WebDriverWait(driver,10).until(EC.frame_to_be_available_and_switch_to_it((By.ID,"loading-iframe"))
)

通过 CDP 协议拦截 API 请求：

# Chrome DevTools Protocol 实现
async def mock_api_response():
    async with driver.bidi_connection() as session:
        await session.execute(
            "Network.enable",
            {"patterns": [{"urlPattern": "*/api/cart*"}]}
        )
        # 注入模拟响应数据

典型错误：

# 错误示范：直接操作未加载完成的元素
driver.find_element("#submit-btn").click()  # 可能抛出 NoSuchElementException

正确做法：

# 添加 AJAX 完成判断
WebDriverWait(driver, 10).until(lambda d: d.execute_script("return jQuery.active == 0")
)

数据库快照：每个用例前回滚初始状态

UUID 命名：创建测试用户时生成唯一标识

import uuid
test_user = f"user_{uuid.uuid4().hex[:8]}"

Cookie 隔离：清理会话存储

driver.delete_all_cookies()  # 时间复杂度 O(n)

GitLab Pipeline 配置示例：

test:
  stage: test
  parallel: 4  # 并行执行
  retry: 1     # 失败自动重试
  script:
    - pytest tests/ --browser=remote --html=report.html
  artifacts:
    paths:
      - report.html

尝试为以下场景添加视觉回归测试：
1. 使用 pytest-image-diff 库捕获按钮 Hover 状态
2. 对比基准图片与运行时截图差异
3. 设置 5% 的像素容错阈值

提示代码结构：

def test_button_hover(browser):
    button = browser.find_element(".btn-primary")
    ActionChains(browser).move_to_element(button).perform()
    # 添加截图比对逻辑

通过系统化搭建测试框架，开发者可将回归测试效率提升 10 倍以上。建议从核心业务流程开始逐步扩展覆盖，同时注意保持测试用例的原子性。

正文完