升级至Selenium 3后Firefox媒体查询异常问题求助

针对你升级Selenium至3.11.0并使用Grid运行测试时，Firefox出现媒体查询错误的问题，我整理了几个实用的排查和解决方向，你可以逐一尝试：

• 确认Geckodriver与Firefox版本兼容
  Selenium 3.11.0搭配Firefox 59.0.2时，对应的Geckodriver版本需要匹配（推荐使用v0.21.0版本）。你可以在Jenkins从节点上执行geckodriver --version查看当前版本，若不匹配请下载对应版本替换。

• 显式设置窗口尺寸与视图端口
  Grid环境下Firefox的默认窗口大小可能不符合测试预期，导致媒体查询触发错误。初始化FirefoxDriver时，可以直接指定窗口尺寸：

  FirefoxOptions options = new FirefoxOptions();
  WebDriver driver = new RemoteWebDriver(new URL(gridUrl), options);
  // 设置为测试预期的窗口大小，比如1920x1080
  driver.manage().window().setSize(new Dimension(1920, 1080));
  

  也可以通过启动参数直接配置：

  options.addArguments("--width=1920", "--height=1080");
  

• 禁用Firefox自动缩放功能
  系统级或浏览器默认的缩放设置会导致实际渲染的视图尺寸偏离预期，可通过偏好设置关闭：

  options.addPreference("layout.css.devPixelsPerPx", "1.0");
  options.addPreference("browser.zoom.siteSpecific", false);
  options.addPreference("browser.zoom.full", false);
  

• 检查Grid节点的显示环境配置
  确保Jenkins从节点的系统显示设置没有缩放（比如Windows的显示缩放比例、Linux的X11缩放配置），这些设置会影响Firefox的实际视图尺寸，进而触发错误的媒体查询。

• 验证实际视图尺寸与预期断点
  在测试中加入日志或截图，输出当前窗口的实际尺寸和视图端口大小：

  // 获取窗口外部尺寸
  Dimension windowSize = driver.manage().window().getSize();
  // 获取实际视图端口尺寸（排除浏览器边框）
  Map<String, Long> viewportSize = (Map<String, Long>) ((JavascriptExecutor) driver)
          .executeScript("return {width: window.innerWidth, height: window.innerHeight}");
  

  将这些值和你的媒体查询断点对比，确认是否是尺寸不匹配导致的问题。

• 尝试无头模式测试
  若问题是显示环境干扰导致的，启用无头模式可能会规避这类问题：

  options.addArguments("-headless");
  

内容的提问来源于stack exchange，提问作者Tamás Kakuszi