Webdriver CSS Selector,n-child position 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

input在你的第一个元素之后有一个元素div.form_row,这使得它input成为你形式的第二个孩子.这会将所有其他元素向前移动一个索引,使您的第五个孩子成为您表单div.form_row的第六个孩子,因为您input的所有s和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(); 只有元素类型(它的标记名称).但是,如果div您的表格中直接存在div.form_row,那么您是否符合该.form_row课程的资格并不重要.