Playwright：如何等待图标旋转完成事件替代waitForTimeout

根据你提供的页面元素结构，点击按钮后会显示旋转加载图标（.spinner-border.spinner-border-sm），加载完成后该图标消失，随后页面重载。可以通过等待加载图标的可见性变化替代固定超时，具体实现如下：

实现步骤 #

• 点击操作按钮后，先等待旋转图标出现，确认加载流程启动
• 等待旋转图标消失，确认旋转/后台操作完成
• 等待页面重载完成，确保后续操作在新页面就绪后执行

Playwright 代码示例 #

// 点击操作按钮
await page.click('#line-flag');

// 等待旋转图标出现（确认加载开始）
await page.waitForSelector('#line-flag .spinner-border.spinner-border-sm', { state: 'visible' });

// 等待旋转图标消失（确认旋转/操作完成）
await page.waitForSelector('#line-flag .spinner-border.spinner-border-sm', { state: 'hidden' });

// 等待页面重载完成（根据页面实际情况选择）
await page.waitForNavigation({ waitUntil: 'networkidle' });
// 或者使用 waitForLoadState
await page.waitForLoadState('networkidle');

为什么直接用 waitForLoadState 无效？ #

点击按钮后，页面不会立即触发重载，而是先进入旋转加载的中间状态，此时页面仍处于原状态，waitForLoadState 无法捕捉后续的导航事件。必须先等待旋转图标消失（即后台操作完成），再等待页面导航/加载完成，才能准确同步页面状态。

如果旋转图标的显示/隐藏是通过 CSS visibility 而非 display 控制的，可改用 waitForFunction 监听元素可见性：

await page.waitForFunction(() => {
  const spinner = document.querySelector('#line-flag .spinner-border.spinner-border-sm');
  return !spinner || getComputedStyle(spinner).visibility === 'hidden';
});

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