如何用Selenium在多平台打开响应式页面并适配控件尺寸？

Hey there! 我在做响应式页面自动化测试时经常遇到这个需求，下面是几个经过实战验证的方法，帮你轻松搞定跨设备的Selenium测试，包括控件适配的细节：

这是最推荐的方案，它能完整模拟设备的视口尺寸、用户代理（UA）、甚至触摸事件，效果和你在Chrome开发者工具里切换设备完全一致，能最大程度还原真实用户的访问场景。

举个Python的实战示例，模拟iPhone 14、iPad和桌面设备：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# 定义不同设备的配置（可根据需求扩展）
device_configs = {
    "iPhone 14": {
        "width": 390,
        "height": 844,
        "user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1",
        "is_mobile": True
    },
    "iPad Air": {
        "width": 820,
        "height": 1180,
        "user_agent": "Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1",
        "is_mobile": True
    },
    "Desktop (1080p)": {
        "width": 1920,
        "height": 1080,
        "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36",
        "is_mobile": False
    }
}

for device_name, config in device_configs.items():
    chrome_options = Options()
    driver = webdriver.Chrome(options=chrome_options)
    
    # 用CDP设置设备视口与屏幕属性
    driver.execute_cdp_cmd(
        "Emulation.setDeviceMetricsOverride",
        {
            "width": config["width"],
            "height": config["height"],
            "deviceScaleFactor": 3,  # 设备像素比，按需调整
            "mobile": config["is_mobile"],
            "screenOrientation": {"type": "portraitPrimary", "angle": 0}
        }
    )
    # 覆盖用户代理
    driver.execute_cdp_cmd(
        "Network.setUserAgentOverride",
        {"userAgent": config["user_agent"]}
    )
    
    # 打开目标响应式页面
    driver.get("https://your-target-page.com")
    
    # 示例测试逻辑：根据设备类型交互不同控件
    if config["is_mobile"]:
        # 点击移动端汉堡菜单
        hamburger_menu = driver.find_element("css selector", ".mobile-menu-toggle")
        hamburger_menu.click()
    else:
        # 点击桌面端导航栏选项
        desktop_menu_item = driver.find_element("css selector", ".desktop-nav > .nav-item:nth-child(3)")
        desktop_menu_item.click()
    
    # 测试完成后关闭浏览器
    driver.quit()

如果你的测试需要支持Firefox等不依赖CDP的浏览器，或者不想用CDP，可以直接设置浏览器窗口尺寸，并修改UA头，实现基础的设备模拟。

示例（Python + Firefox）：

from selenium import webdriver
from selenium.webdriver.firefox.options import Options

firefox_options = Options()
# 设置窗口大小
firefox_options.add_argument("--width=390")
firefox_options.add_argument("--height=844")
# 覆盖用户代理
firefox_options.set_preference("general.useragent.override", "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1")

driver = webdriver.Firefox(options=firefox_options)
driver.get("https://your-target-page.com")

# 测试逻辑...
driver.quit()

光模拟设备还不够，不同设备上控件的位置、大小甚至选择器可能都不一样，这几个技巧能帮你避免定位失败：

• 拒绝绝对坐标定位：永远不要用driver.find_element_by_xpath("//*[@x='100' and @y='200']")这种绝对坐标，改用CSS选择器的相对定位（比如.nav-bar > .menu-item:nth-child(2)）或者XPath的轴定位。
• 显式等待动态元素：响应式页面经常会根据视口加载不同元素，用WebDriverWait等待元素可见/可点击，避免因元素未加载完成报错：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  wait = WebDriverWait(driver, 10)
  submit_button = wait.until(EC.element_to_be_clickable(("css selector", ".submit-btn")))
  submit_button.click()
  

• 处理触摸操作：模拟移动端时，部分控件需要触摸而非点击，用TouchActions实现：

  from selenium.webdriver.common.touch_actions import TouchActions
  
  touch_actions = TouchActions(driver)
  touch_actions.tap(hamburger_menu).perform()
  

• 根据视口切换选择器：如果元素在不同设备上的选择器不同，可通过视口宽度判断使用哪个选择器：

  viewport_width = driver.execute_script("return window.innerWidth")
  if viewport_width < 768:  # 移动端断点
      menu = driver.find_element("css selector", ".mobile-menu")
  else:
      menu = driver.find_element("css selector", ".desktop-menu")
  

• 批量测试设备：把常用设备配置存在JSON/YAML文件里，用循环批量跑测试，减少重复代码。
• 验证视口设置：每次打开页面后，用driver.execute_script("return window.innerWidth")验证视口是否正确设置。
• UA要匹配设备：从Chrome开发者工具复制真实设备的UA，避免生成不匹配的UA导致页面渲染异常。

内容的提问来源于stack exchange，提问作者Bharati Belgaonkar