无法在量角器中找到元素

Question

我的用户界面如下所示。

<div class="BtyD1c WFUbU" jsname="Y3PF3">
  <div>.........</div>
  <div>.........</div>
  <div>.........</div>
  <div>.........</div>
  <div>.........</div>
  <div jsname="YCbqLe" style="display: block;">
    <div>.........<div>
    <div class="qh jxzYFc ZlpBcf XWx4Gf IbyGtb Tea E5 OI LtchOd oj" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV;" jsshadow jsname="NuJwOd">
       <div class="PI jh">
         <div class="D5 fda">
           <div class="F5">
             <input type="text" class="Ij Sl" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Text input area where you can input a URL for the action." maxlength="1500" value="" autofocus="" data-initial-value="enter url here" badinput="false" dir="ltr" aria-invalid="false">
  </div>
  <div>.........</div>

我需要在此输入字段中输入一些输入。为此，我使用了定位器

".Xz2Gac .WFUbU div:nth-child(6) .jxzYFc input"

但是它说ElementNotVisibleError：元素不可交互。但是当我将定位符设为

时

".Xz2Gac .WFUbU div:nth-child(7) .jxzYFc input"

然后它成功地在该输入字段中输入了输入数据。我不明白为什么这样做？因为输入字段位于类'WFUbU'的6格中。对吗？

Answer 1

如果您检查提供的html示例，则可以看到只有6个孩子。 对于css匹配器，可能会忽略找到7个子代（不存在）的条件，并继续匹配下一种情况。

通过以下实验：

.WFUbU .jxzYFc input

您将得到输入

.WFUbU div:nth-child(6) .jxzYFc input

您再次获得输入

这里是有关nth：child的完整解释

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

  

注意：应避免由于元素的子元素而创建此类定位器   创建/更新网站的动态变化。

如果唯一的jsname始终为constat，请使用类似以下内容的代码： CSS选择器

input[jsname='YPqjbf']

Xpath选择器

//input[@jsname='YPqjbf']

Answer 2

尝试在Chrome DevTool中手动关注两个CSS定位器。

• .Xz2Gac .WFUbU > div:nth-child(6) .jxzYFc input

• .Xz2Gac .WFUbU div:nth-child(6) .jxzYFc input

如果两个定位器都找到相同的输入，则意味着有一个不可见输入和一个可见输入。您应该使用.Xz2Gac .WFUbU div:nth-child(7) .jxzYFc input查找可见的输入。

如果他们找到不同的输入，我认为.Xz2Gac .WFUbU > div:nth-child(6) .jxzYFc input应该找到您想要的可见输入。

CSS定位器中的

>意味着对直接/第一层子级进行细化。

CSS定位器中的

（空格）意味着找到包含直接/第一层子级的子代