逐字符输入搜索框时字符被删除，求无静态延迟的解决方案

问题翻译 #

我通过逐字符向搜索框输入内容实现实时搜索（后台会针对每个输入字符发起查询并返回匹配列表），但目前出现异常：输入第一个字符后，输入第二个字符时第一个字符会被删除。我不想使用带静态延迟的this.searchTxt.type(c,{delay:50})逻辑，现有实现代码如下，请求可行的代码优化建议：

async searchOfValue(value:string) {
 await this.page.waitForSelector("//*[contains(@class,'search-input')]", {state:'attached' })
  for (let i = 0; i < value.length; i++) {
    let c = value.charAt(i);
    await Promise.all([
       this.searchTxt.type(c),
       this.page.waitForLoadState('load')
    ])
  }
}

优化方案 #

1. 改用动态定位器避免元素失效

如果搜索时页面会重渲染搜索框（比如前端框架重新生成DOM节点），之前缓存的searchTxt元素句柄会失效，后续输入会作用于新的空输入框，表现为前一个字符被删除。改用Playwright的Locator可自动跟踪最新元素：

async searchOfValue(value: string) {
  const searchInput = this.page.locator("//*[contains(@class,'search-input')]");
  // 等待输入框可见且可交互
  await searchInput.waitFor({ state: 'visible', timeout: 5000 });

  for (let i = 0; i < value.length; i++) {
    const char = value.charAt(i);
    // 输入当前字符
    await searchInput.type(char);
    // 验证输入框内容是否正确追加字符，确保输入生效
    await expect(searchInput).toHaveValue(value.slice(0, i + 1));
    // 等待后台搜索请求完成（替换为你的实际搜索API路径）
    await this.page.waitForResponse(res => 
      res.url().includes('/api/search') && res.ok()
    );
  }
}

2. 替换无效的waitForLoadState('load')

waitForLoadState('load')仅在页面首次加载或刷新时触发，实时搜索是AJAX请求，不会触发该事件，原逻辑的等待完全无效，导致循环过快引发输入冲突。可根据实际场景选择以下等待条件：

• 等待后台搜索请求完成（waitForResponse）
• 等待搜索结果容器出现/更新（waitForSelector）
• 验证输入框内容确实更新（expect.toHaveValue）

3. 调整执行顺序，避免并行冲突

原代码用Promise.all同时执行输入和等待操作，可能导致输入未完成就进入下一次循环，引发状态混乱。改为串行执行：先确保字符输入生效，再等待搜索请求处理完成。

核心问题总结 #

• waitForLoadState('load')不匹配实时搜索场景，等待逻辑无效，导致循环执行过快
• 若搜索框因重渲染失效，缓存的元素句柄会指向旧节点，后续输入作用于新的空输入框

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