0

我有以下代码

<div class="editor-options">
    <div class="editor-item">
        <label>Name</label>
        <input type="text" name="name">
        </div>
    </div>
    <div class="editor-item">
        <label>Data Source</label>
        <div class="react-select-component css-2b097c-container"></div>
    </div>
    <div class="editor-item" >
        <label>Attribute</label>
        <div class="react-select-component css-2b097c-container"></div>
    </div>
    <div class="editor-item">
        <label>Type</label>
        <div class="type-select css-2b097c-container"></div>
    </div>
</div>

我需要通过 xpath（数据源和属性）独立查找并选择两个“react-select-component”节点

这些是动态创建的反应下拉列表，并具有基于数据库值的唯一类名和内容。

当我尝试使用时：

$x("//div[contains(@class, 'react-select-component')]/ancestor::div[@class='editor-item']//label[contains(text(), '数据源')]")

//label 不是我所期望的 //div[class='react-select-component'] 返回的。我对 Xpath/ancestor 的理解是：

返回节点：

//div[contains(@class, 'react-select-component')]

与祖先：

/ancestor::div[@class='editor-item']//label[contains(text(), 'Data Source')]

我是不是倒过来了？

4

2 回答 2

1

由于输出包含label在div您指定的范围内，您可以使用following-siblingax 在此特定树上定位相对于该节点的节点。我的意思是说：

//div[contains(@class, 'react-select-component')]/ancestor::div[@class='editor-item']//label[contains(text(), 'Data Source')]/following-sibling::div

如果您想要更具体，或者想要避免得到错误的 div（考虑到多个 div 的存在），请对该兄弟添加更多限制。

工作示例。

于 2021-09-14T21:59:31.197 回答
1

返回表达式中的最后一个元素

1) //div[contains(@class, 'react-select-component')]
2) ancestor::div[@class='chart-editor-item']
3) label[contains(text(), 'Data Source')]

这label就是返回元素的原因。
此 xpath 返回预期的元素

//div[contains(@class,'editor-item') and child::label[contains(text(), 'Data Source')]]/div[contains(@class, 'react-select-component')]

上面写着：“得到一个带有@class的div，包含编辑器项和一个label值为'Data Source'的孩子”

//div[contains(@class,'editor-item') and child::label[contains(text(), 'Data Source')]]

给定那个 div，得到一个包含 react-select-component 的 @class 的子 div

div[contains(@class, 'react-select-component')]

使用xml2xpath.sh检查相关的 xpath

xml2xpath.sh -s '//div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]' -t -l test.html 
Namespaces:

  xml http://www.w3.org/XML/1998/namespace

XML tree:

div
  label
  div

Found XPath:

//div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]
//div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]
//div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]/label
//div[contains(@class,"editor-item") and child::label[contains(text(), "Data Source")]]/div
于 2021-09-14T22:51:58.410 回答