Question

我有一个网页，其中包含大约9个输入字段，这些字段具有不同的标签名称，而且我获得了很多答案，但没有成功。请帮助我使用CSS选择器，使用xpath我能够得到解决方案但不能使用CSS，我们必须在项目中使用CSS。

我的示例html看起来像这样：

<div class="no match found for this class name">
  <div class="no match found for this class name too">
    <label>1st label Name </label>
    <div class="7 matching nodes found for this class name">
      <input class="3 matching nodes found for this class name" type="text" value="dynamic int value">
    </div>
  </div>
</div>

Answer 1

您无法在css中选择元素之间的文本...但是，您可以为每个标签传递不同的类，然后使用+ css选择器选择输入。

Stack Snippet

＆＃13;

label[class="label1"]+div>input {
  background: red;
}

label[class="label2"]+div>input {
  background: blue;
}

＆＃13;

<div class="no match found for this class name">
  <div class="no match found for this class name too">
    <label class="label1">1st label Name</label>
    <div class="7 matching nodes found for this class name">
      <input class="3 matching nodes found for this class name" type="text" value="dynamic int value">
    </div>
  </div>
  <div class="no match found for this class name too">
    <label class="label2">2nd label Name</label>
    <div class="7 matching nodes found for this class name">
      <input class="3 matching nodes found for this class name" type="text" value="dynamic int value">
    </div>
  </div>
</div>

＆＃13;

Answer 2

要使用<input>定位以下CSS代码，您可以使用以下代码行：

"div.no_match_found_for_this_class_name > div.no_match_found_for_this_class_name_too label:contains('1st label Name') div:nth-child(1) > input.3_matching_nodes_found_for_this_class_name[type='text']"

分析

根据HTML，<label>标记只有innerText，您必须根据标签名称构建CSS selector，因此我们必须使用 :contains pseudo-class

请注意，根据质量检查stackoverflow.com/questions/47883572

The :contains pseudo-class isn't in the current CSS Spec and is not supported by either Firefox or Chrome.

如何使用基于标签名称的CSS选择器在Selenium中定位特定的输入文本字段

2 个答案:

分析