Selenium无法识别正确的MUI-X日期选择器（疑似SSR相关Bug？）

针对你遇到的SSR场景下，Selenium窗口尺寸正确但MUI-X日期选择器仍识别为移动端的问题，可尝试以下几种解决方案：

• 强制SSR渲染时使用桌面端规则
  SSR阶段服务器无浏览器窗口尺寸信息，可能默认采用移动端媒体查询渲染。可在测试请求中添加自定义Header（如X-Test-Desktop-Mode: true），在SSR逻辑中检测该Header，若存在则强制按桌面端媒体查询渲染日期选择器组件。

• 手动触发窗口resize事件
  即使窗口大小已设置，SSR渲染的DOM可能未响应尺寸变化。在Codeception中执行JS触发resize事件，让MUI重新检测媒体查询：

  $I->executeJS('window.dispatchEvent(new Event("resize"));');
  

  建议在页面加载完成后立即执行此操作。

• 禁用ChromeDriver的移动设备模拟
  检查Codeception的Selenium配置，确认未启用移动设备模拟。在acceptance.suite.yml的Chrome配置中添加：

  capabilities:
    goog:chromeOptions:
      mobileEmulation: false
  

• 等待客户端Hydration完成后操作
  SSR页面需完成客户端Hydration才会响应媒体查询变化。可等待框架Hydration完成后再交互，比如检测React根容器状态：

  $I->waitForJS('return document.querySelector("#root")?._reactRootContainer !== undefined;', 10);
  

• 强制设置日期选择器模式（备选方案）
  若上述方法无效，可通过JS直接修改组件模式（依赖组件内部结构，稳定性稍差）：

  const datePicker = document.querySelector('[data-testid="your-date-picker-test-id"]');
  // 假设组件实例暴露了desktopMode属性
  if (datePicker) {
    datePicker.desktopMode = true;
    datePicker.dispatchEvent(new Event('change'));
  }
  

  在Codeception中用executeJS()执行这段代码。

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