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

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

如果表单中的所有元素都是div.form_row个或隐藏的输入，您可以选择使用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()中未考虑班级名称;只有元素类型（它的标记名称）。但是，如果您表单中直接显示的div只是div.form_row，那么您是否使用.form_row类符合条件并不重要。

Webdriver CSS Selector，n-child position 1高于预期

1 个答案: