Playwright如何等待前端加载输入框初始值后再覆写新值？

我有一个Playwright自动化任务：打开表单后，给两个输入框设置值——输入框1（page.getByPlaceholder('Applicant First Name')）设为“John”，输入框2（page.getByPlaceholder('Applicant Surname')）设为“Doe”，最后点击提交按钮。

但执行时遇到问题：Playwright快速设置输入框值后，前端会清空这些值并填入数据库返回的初始值，导致提交后重新打开表单验证时断言失败。

我尝试过以下代码但无效：

const InputField1 = this.page.getInputByLabel('Applicant First Name');
expect(await InputField1.textContent()).not.toEqual(null);
await assetNameInputField.clear();

expect(await InputField1.textContent()).toMatch(/^.*$/);

expect(await InputField1.textContent()).not.toEqual('');

需要解决：如何让Playwright等待前端加载完输入框初始值后，再覆写为目标值？

解决方案 #

方法1：等待输入框值稳定（推荐） #

利用Playwright的waitForFunction等待输入框的值不再变化，确认前端初始值加载完成后再操作：

// 处理名字输入框
const firstNameInput = this.page.getByPlaceholder('Applicant First Name');
// 等待值稳定（连续500ms无变化，且值不为空）
await firstNameInput.waitForFunction(
  el => {
    const currentValue = el.value;
    return new Promise(resolve => {
      setTimeout(() => resolve(el.value === currentValue && currentValue !== ''), 500);
    });
  },
  null,
  { timeout: 5000 }
);
// 清空并设置新值
await firstNameInput.clear();
await firstNameInput.fill('John');

// 处理姓氏输入框同理
const surnameInput = this.page.getByPlaceholder('Applicant Surname');
await surnameInput.waitForFunction(
  el => {
    const currentValue = el.value;
    return new Promise(resolve => {
      setTimeout(() => resolve(el.value === currentValue && currentValue !== ''), 500);
    });
  },
  null,
  { timeout: 5000 }
);
await surnameInput.clear();
await surnameInput.fill('Doe');

// 点击提交按钮
await this.page.getByRole('button', { name: '提交' }).click();

方法2：等待前端API请求完成 #

如果明确前端加载初始值时会发送特定API请求，可等待该请求完成后再操作：

// 等待获取申请人初始信息的GET请求完成
await this.page.waitForRequest(request => 
  request.url().includes('/api/applicant/detail') && request.method() === 'GET'
);

// 直接设置输入框值
await this.page.getByPlaceholder('Applicant First Name').fill('John');
await this.page.getByPlaceholder('Applicant Surname').fill('Doe');
await this.page.getByRole('button', { name: '提交' }).click();

方法3：等待输入框状态就绪 #

如果输入框加载初始值时会先处于禁用状态，可等待其变为可编辑后再操作：

const firstNameInput = this.page.getByPlaceholder('Applicant First Name');
// 等待输入框变为可编辑状态
await firstNameInput.waitFor({ state: 'enabled' });
// 等待输入框有非空值（确认初始值已加载）
await expect(firstNameInput).toHaveValue(/\S+/);

// 清空并设置新值
await firstNameInput.clear();
await firstNameInput.fill('John');

// 姓氏输入框重复上述步骤
const surnameInput = this.page.getByPlaceholder('Applicant Surname');
await surnameInput.waitFor({ state: 'enabled' });
await expect(surnameInput).toHaveValue(/\S+/);
await surnameInput.clear();
await surnameInput.fill('Doe');

await this.page.getByRole('button', { name: '提交' }).click();

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