Playwright中如何等待指定元素的文本出现？

方法1：精确匹配完整文本 #

如果你知道元素最终要显示的完整文本内容，直接使用toHaveText断言即可。Playwright的断言内置等待机制，会自动轮询检查元素文本，直到完全匹配或超时：

await expect(page.locator('my-locator')).toHaveText('你的目标完整文本');

方法2：等待文本状态稳定 #

如果不清楚完整文本，但知道文本会从空白/占位状态变为有效内容，可以通过自定义逻辑等待文本不再变动，避免捕获到中间缓冲状态：

// 先确保元素可见
await page.locator('my-locator').waitFor({ state: 'visible' });

// 等待文本连续两次检查结果一致，确认加载完成
await page.waitForFunction(async (locator) => {
  const initialText = await locator.textContent();
  await new Promise(resolve => setTimeout(resolve, 100));
  return initialText === await locator.textContent();
}, page.locator('my-locator'));

方法3：用正则匹配精准文本模式 #

如果目标文本有固定格式（比如包含特定关键字而非单个通用字母），可以用正则表达式缩小匹配范围，避免误触发：

// 匹配包含"特定关键字"的有效文本，排除空白或占位符
await expect(page.locator('my-locator')).toContainText(/特定关键字/);

进阶优化：结合接口等待 #

如果文本是通过异步接口返回的，可先等待对应接口响应完成，再检查文本，进一步提升稳定性：

// 等待目标接口返回成功
await page.waitForResponse(res => res.url().includes('目标接口路径') && res.ok());
// 再检查元素文本
await expect(page.locator('my-locator')).toHaveText('目标文本');

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