Webdriver CSS 选择器，第 n 个子位置 1 高于预期

Question

我最近一直在切换到在 Xpath 上使用 CSS 选择器。我遇到了一些我无法解释的事情，我希望有更多知识的人可以提供帮助。

<form id="configure_server">
    <div class="form_row">
        <div class="form_label">...</div>
        <div class="form_input_elements">...</div>
    </div>
    <input name="serverID" id="serverID" value="2" type="hidden">
    <div class="form_row">
        <div class="form_label">...</div>
        <div class="form_input_elements">...</div>
    </div>
    <div class="form_row">
        <div class="form_label">...</div>
        <div class="form_input_elements">...</div>
    </div>
    <div class="form_row">
        <div class="form_label">...</div>
        <div class="form_input_elements">...</div>
    </div>
    <div class="form_row">
        <div class="form_label">Name</div>
        <div class="form_input_elements">Thor</div>
    </div>
    <input name="name" id="name" value="Thor" type="hidden">
    <div class="form_row">
        <div class="form_label">...</div>
        <div class="form_input_elements">...</div>
    </div>
    <div class="form_row">
        <div class="form_label">...</div>
        <div class="form_input_elements">...</div>
    </div>
</form>

我正在尝试获取等于 Thor 的元素的文本。

要查找该元素并检索我正在使用的文本：

self.driver.find_element_by_css_selector("#configure_server>div.form_row:nth-child(6)>div.form_input_elements")

我很困惑我必须使用:nth-child(6)，我希望使用:nth-child(5)。任何人都可以解释为什么我必须将孩子引用高一个索引吗？

Answer 1

在您的第一个div.form_row 之后有一个input 元素，这使得input 成为您表单的第二个子元素。这会将所有其他元素向前移动一个索引，使您的第五个 div.form_row 成为表单的第六个孩子，因为您的所有 inputs 和 divs 都是共享同一个父表单的兄弟姐妹.

如果表单中的所有元素都是div.form_rows 或隐藏输入，您可以选择使用div:nth-of-type(5) 而不是div.form_row:nth-child(6)：

self.driver.find_element_by_css_selector("#configure_server>div:nth-of-type(5)>div.form_input_elements")

注意:nth-of-type()中不考虑类名；只有元素类型（其标签名称）。但是，如果直接在您的表单下的唯一 divs 是 div.form_row，那么您是否使用 .form_row 类对其进行限定并不重要。