使用C# Selenium时正常模式可见元素，无头模式下无法定位

问题描述 #

正常浏览器模式下元素可见且可定位，但切换到无头模式后，所有元素均无法定位，已尝试XPath、CssSelector等多种定位方式均无效。

相关代码 #

目标元素代码 #

<i class="material-symbols-outlined" translate="no" data-id="Icon" style="font-size: 24px; font-variation-settings: &quot;FILL&quot; 0, &quot;wght&quot; 400, &quot;GRAD&quot; 0, &quot;opsz&quot; 14;">account_circle</i>

元素定位方式 #

public static By accountButton = By.XPath("//i[contains(., 'account_circle')]");

无头模式配置 #

var chromeDriverService = ChromeDriverService.CreateDefaultService();
var option = new ChromeOptions();
option.AddArguments("--headless=new");
option.AddExtension(MainPageElements.extensionPath);
option.AddArgument("--window-size=1920,1080");
option.AddArgument("--ignore-certificate-errors");
option.AddArgument("--no-sandbox");

WebDriver webDriver = new ChromeDriver(chromeDriverService, option);

排查与解决方法 #

• 强制等待页面加载完成：无头模式下页面渲染逻辑可能滞后，使用显式等待替代隐式等待，确保元素加载完成后再定位：

  WebDriverWait wait = new WebDriverWait(webDriver, TimeSpan.FromSeconds(15));
  IWebElement targetElement = wait.Until(driver => 
      driver.FindElement(accountButton)
  );
  

• 模拟正常浏览器用户代理：部分网站会识别无头模式的UA并调整页面渲染，添加正常浏览器的UA参数：

  option.AddArgument("--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36");
  

• 排查浏览器扩展影响：加载的扩展可能在无头模式下未正常初始化，导致页面异常。先移除扩展配置测试：

  // 注释掉扩展加载代码，测试是否恢复正常
  // option.AddExtension(MainPageElements.extensionPath);
  

• 补充无头模式渲染参数：添加更多优化渲染的参数，确保页面完整加载：

  option.AddArgument("--disable-gpu");
  option.AddArgument("--enable-javascript");
  option.AddArgument("--start-maximized");
  

• 对比无头与正常模式的DOM结构：保存无头模式下的页面源码，与正常模式对比，确认元素是否存在或渲染差异：

  // 保存无头模式页面源码
  File.WriteAllText(@"C:\temp\headless_page.html", webDriver.PageSource);
  

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