无法使用动态属性时，Playwright如何定位表单输入元素？

我开发了一款可动态生成表单的应用，在E2E测试流程中，表单由测试用例创建，测试结束后会从数据库中删除。这导致我无法使用动态生成的class、id或data属性值（示例：<div id="input_1642" class="input_1642">），因为这些值无法提前获知且不会持久化。现有如下HTML结构，唯一可用的唯一标识是<span style="white-space: pre-wrap; overflow-wrap: break-word;">required input</span>中的文本“required input”。在不使用class、id、data属性值且尽量避免Xpath的前提下，使用Playwright定位该输入元素以调用page.fill()方法的最简洁方式是什么？

<div id="input_1642" class="input_1642">
  <div>
    <div>
      <div class="ant-row ant-form-item" style="row-gap: 0px;">
        <div class="ant-col ant-form-item-label ant-form-item-label-left">
          <label for="input_1642" class="ant-form-item-required" title="">
            <span>
              <span style="white-space: pre-wrap; overflow-wrap: break-word;">required input</span>
            </span>
          </label>
        </div>
        <div class="ant-col ant-form-item-control">
          <div class="ant-form-item-control-input">
            <div class="ant-form-item-control-input-content">
              <span>
                <span>
                  <input formbuilderhiddenfrom="" data-cy="form_item_input_1642_3" data-navigate="false" id="input_1642" class="ant-input align-input-items" type="text" value="">
                  <span></span>

最优方案：使用getByLabel定位 #

Playwright内置的getByLabel方法可以直接通过标签文本找到关联的输入元素，这是最符合语义、简洁且符合最佳实践的写法：

await page.getByLabel('required input').fill('你的输入内容');

该方法会自动识别包含目标文本的<label>标签，通过其for属性匹配对应的<input>元素的id，完全避开动态生成的属性，完美适配你的场景。

备选方案（当getByLabel不生效时） #

如果DOM嵌套导致getByLabel无法正确关联输入框，可先定位到文本元素，再向上遍历父级找到表单项，最后定位输入框：

await page.getByText('required input')
  .locator('..') // 回到外层span
  .locator('..') // 回到label标签
  .locator('..') // 回到标签列容器
  .locator('..') // 回到表单项行
  .getByRole('textbox')
  .fill('你的输入内容');

但优先推荐第一种方案，代码更简洁且语义明确。

内容的提问来源于stack exchange，提问作者dman