如何根据父兄弟标签选择输入答案

【问题标题】：How to select an input according to a parent sibling label如何根据父兄弟标签选择输入
【发布时间】：2022-02-05 04:36:04
【问题描述】：

我的输入元素没有任何可以识别它的东西，因为我的页面是通过反应框架构建的。所以我想通过其上方的标签选择适当的输入。我的 HTML 如下所示：

<div>
  <label>Project</label>
</div>
<div>
  <div>
        <input>
  </div>
</div>
<div>
  <label>Type</label>
</div>
<div>
  <div>
        <input>
  </div>
</div>

【问题讨论】：

标签： python playwright playwright-python

【解决方案1】：

如果您尝试对具有associated input 元素的标签执行操作，Playwright 会自动将操作重定向到输入。

如果 DOM 结构始终相同，您可以尝试这样的方法

page.locator('div:has( > :text-matches("Project")) + div input')

否则layout selector 是你最好的选择。

【讨论】：

是的，它有效。你能解释一下吗？你是怎么得到这个选择器的？

【解决方案2】：

你可以试试layout selectors:

const div = page.locator('input:right-of(:text("Project"))');

【讨论】：