如何在剧作家中找到具有特定文本作为同级文本的<input>？

Question

我有一个包含以下模式的许多元素的表单（

ng-star-inserted

等人已删除）：

<ui-input label="First Name">
    <div>First Name</div>
    <div>
        <input type="text" placeholder="" autocomplete="off">
    </div>
</ui-input>

我希望剧作家在表格上的相应框中输入文本。据我了解，剧作家学派是寻找内在的

<input>

元素和

await input.fill("Humbleton")

。

我已经尝试过：

page.getByRole('textbox', { name: 'First Name' });
page.getByText('First Name').locator('input');
page.getByLabel('First Name').locator('input');
page.getByText('First Name').getByRole('textbox');
page.getByLabel('First Name').getByRole('textbox');

其中没有一个起作用。

首选的解决方法是在 HTML 中插入一个秘密的、唯一值的属性，并使用生成的唯一 XPath。然而，我认为这是作弊行为，并且违背了 e2e 测试、干净代码、正当性和 Playwright 哲学的精神。有剧作家式的解决方案吗？

最后，我使用

page.keyboard

来填写表单，并使用

page.keyboard.press('Tab')

从一个字段导航到另一个字段，但我有预感，这并不那么强大且面向用户。

我觉得一定有一些被忽视的优雅、富有表现力的方式来告诉剧作家只需填写该死的“名字”框。

Answer 1

尝试使用

page.locator('//ui-input[@label="First Name"]/descendant::input')

如

page.getByLabel('First Name').getByRole('textbox');

不起作用。

如果这也不起作用，你能检查一下这个表格的顶层是否没有

iframe

吗？