如何根据父兄弟标签 select 输入

Question

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

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

Answer 1

你可以试试 layout selectors:

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

Answer 2

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

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

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

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

如何根据父兄弟标签 select 输入

How to select an input according to a parent sibling label

python

playwright

playwright-python