Selenium中CSS选择器报element not interactable，为何XPath可行？

问题背景 #

在C#环境下使用Selenium操作Google Photos时，通过By.CssSelector("input.Ax4B8.ZAGvjd")定位输入框并调用SendKeys，触发element not interactable异常。改用绝对XPath定位（/html/body/div[1]/div/div[2]/div/div[2]/span/div/div[2]/span/div[2]/div/div[3]/div[1]/input[2]）可正常执行，但绝对XPath可维护性差，希望保留CSS选择器方案。经排查，两种方式获取的IWebElement ID不同，目标HTML片段如下：

<div class="L6J0Pc VOEIyf LAL5ie cI2tlc" jscontroller="Mq9n0c" jsaction="keydown:I481le; focus: AHmuwe;AHmuwe:AHmuwe; mouseenter:npT2md;Mu8aMc:YPqjbf;Edq9ub:SDqDXe;e0gSlf:pX1iqf;" data-persist-on-navigation="true" data-close-on-blur="true" jsname="s514wb" data-renderer="p1EOdb" data-service="pv5rLb" aria-disabled="false">
    <div class="d1dlne" jscontroller="K99qY" jsname="YPqjbf" style="position: relative" data-placeholder="In deinen Fotos suchen" data-showselected="false" aria-disabled="false" jslog="9602; track:click,keyboard_enter" data-expanded="false">
        <input class="yNVtPc ZAGvjd Ny5lGc" disabled="true" aria-hidden="true" jsname="A51lKb" value="In deinen Fotos suchen"/>
        <input class="Ax4B8 ZAGvjd" type="text" autocomplete="off" aria-label="In deinen Fotos suchen" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" role="combobox" jsname="dSO9oc" jsaction="input:YPqjbf; keydown:I481le; click:cOuCgd" size="1" aria-owns="nngdp193" aria-controls="nngdp193" dir="ltr"/>
    </div>
    <div class=" tWfTvb">
        <div class="u3WVdc jBmls" tabindex="-1" role="listbox" data-expanded="false" data-childcount="0" jsname="iuXDpb" jsaction="mousedown:npT2md(preventDefault=true);" jslog="9605; track:impression" id="nngdp193" style="max-height: 1263px;"></div>
    </div>
</div>

解决思路 #

1. 排查重复匹配的元素 #

页面中可能存在多个符合input.Ax4B8.ZAGvjd的元素（包括隐藏或禁用的），FindElement默认返回第一个匹配项，而第一个可能是不可交互的。用FindElements遍历所有匹配元素，检查其状态：

var elements = webDriver.FindElements(By.CssSelector("input.Ax4B8.ZAGvjd"));
foreach (var elem in elements)
{
    Console.WriteLine($"Enabled: {elem.Enabled}, Displayed: {elem.Displayed}, ID: {elem.GetAttribute("id")}");
}

从输出中筛选出Enabled=true且Displayed=true的元素，即为可交互的目标元素。

2. 优化CSS选择器的精确性 #

通过添加更多属性或父元素约束，缩小定位范围，确保唯一匹配目标元素：

• 结合父元素类：

  IWebElement element = webDriver.FindElement(By.CssSelector("div.d1dlne input.Ax4B8.ZAGvjd"));
  

• 结合aria-label属性：

  IWebElement element = webDriver.FindElement(By.CssSelector("input.Ax4B8.ZAGvjd[aria-label='In deinen Fotos suchen']"));
  

3. 添加显式等待 #

元素可能未完全加载或未变为可交互状态就被调用，使用显式等待等待元素可交互后再操作：

var wait = new WebDriverWait(webDriver, TimeSpan.FromSeconds(10));
var element = wait.Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("input.Ax4B8.ZAGvjd[aria-label='In deinen Fotos suchen']")));
element.SendKeys("MyKeys");

4. 先激活元素再输入 #

部分输入框需要先点击激活才能接收输入，可先执行Click再调用SendKeys：

element.Click();
element.SendKeys("MyKeys");

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