Selenium CSS 选择器：使用另一个子元素作为唯一标识符来选择子元素（表亲选择器？）

Question

如果这个问题的回答令人作呕，我深表歉意。我要么没有理解答案，要么没有直接找到这种情况的答案。我需要使用它的兄弟元素作为标识符来选择一个子元素。这是一个代码sn-p示例

<div class="my-groups-popup">
  <div class="listbox-container">
     <div class="list-item">
        <div class="edit-box">
           <div class="body">
              <input type="text" value="The First Input">
           </div>
        </div>
        <div class="controls">
           <button class="image move-up"></button>
           <button class="image move-down"></button>
           <button class="image delete"></button>
        </div>
     </div>
     <div class="list-item">
        <div class="edit-box">
           <div class="body">
              <input type="text" value="The Second Input">
           </div>
        </div>
        <div class="controls">
           <button class="image move-up"></button>
           <button class="image move-down"></button>
           <button class="image delete"></button>
        </div>
     </div>
     ...
     <div class="list-item">
        <div class="edit-box">
           <div class="body">
              <input type="text" value="The nth Input">
           </div>
        </div>
        <div class="controls">
           <button class="image move-up"></button>
           <button class="image move-down"></button>
           <button class="image delete"></button>
        </div>
     </div>
   </div>
</div>

可以看出，我有一个包含多个列表项的列表框容器。每个列表项包含一个输入框和 3 个按钮控件。但是在组中唯一唯一的输入是我需要选择的按钮控件的“表亲”。

通常，我会尝试类似：

css=.my-groups-popup .list-item:contains("The Second Input") button.move-up

但由于唯一值是元素的一部分，我不确定如何形成选择器。按钮不是输入元素的直接兄弟。但是输入的祖父母与按钮的祖父母相同。我在想这样的事情：

css=.my-groups-popup .list-item input[value="The Second Input"] ~ .controls button.move-up 

但是当我尝试这样做时，它不起作用。此外，使用“~ *”并没有返回任何东西的数组。所以我怀疑我没有接近正确的语法。

Answer 1

~ combinator 表示两个元素，它们只是兄弟元素。正如您所注意到的，所讨论的两个元素不是直接兄弟，因为每个元素都有自己的一组祖先。它们仅通过.list-item 元素相关，该元素位于层次结构的更上层。

既然 CSS 选择器不能升序，可以这么说，也没有像 :contains() 这样的选择器，但是对于属性值，您将需要使用 XPath：

xpath=//div[@class='my-groups-popup']/div/div[descendant::input[@value='The Second Input']]//button[1]

或者，如果我们研究您的 HTML sn-p，我们可以看到 .my-groups-popup .listbox-container 只有 .list-item 元素作为子元素，并且这些子元素中的每一个都只有一个输入和一组按钮控件。如果我们可以假设.my-groups-popup 的HTML 结构将始终遵循这种模式，我们可以在.list-item 元素上使用:nth-child() 来找到对应于适当输入的按钮控件：

css=.my-groups-popup .list-item:nth-child(2) .controls button.move-up