如何在请求返回前断言元素状态？基于Angular与Playwright

我用Angular结合Playwright做测试，页面上有「删除模式」按钮和「刷新」按钮。用户点击刷新按钮时，删除模式按钮会被禁用，直到刷新请求返回后才重新启用。我需要编写测试用例验证：点击刷新按钮后、请求返回前，删除模式按钮处于禁用状态。但当前编写的测试代码存在误报问题——就算添加.not断言仍会通过，代码如下：

it('should disable delete button during refresh', async ({ page }) => {
  const deleteBtn = page.getByRole('button', {name: 'enter delete mode'}).first();
  page.on('request', () => { expect(deleteBtn).toBeDisabled() }) // false positive
  await page.getByText('REFRESH', { exact: true}).click();
});

• page.on('request')里的断言是同步执行的，但Playwright的expect是异步操作，同步调用无法正确等待元素状态检查完成，就算断言逻辑错误，测试也可能不会报错，导致误报。
• 没有精准控制断言的执行时机，无法确保在请求发起的瞬间捕获到按钮的禁用状态。

正确的做法是拦截目标刷新请求，在请求触发时异步执行断言，同时用waitForRequest确保捕获到请求过程中的状态：

it('should disable delete button during refresh', async ({ page }) => {
  const deleteBtn = page.getByRole('button', { name: 'enter delete mode' }).first();
  
  // 先监听目标刷新请求，再点击刷新按钮
  const refreshRequestPromise = page.waitForRequest(request => 
    request.url().includes('/your-refresh-api-path') // 替换为实际的刷新接口路径
  );
  await page.getByText('REFRESH', { exact: true }).click();

  // 请求被捕获时，异步断言按钮处于禁用状态
  await refreshRequestPromise;
  await expect(deleteBtn).toBeDisabled();

  // 可选：模拟请求返回后，验证按钮重新启用
  const refreshRequest = await refreshRequestPromise;
  await refreshRequest.respond({ status: 200, body: JSON.stringify({}) });
  await expect(deleteBtn).toBeEnabled();
});

• 用page.waitForRequest()替代page.on('request')，精准捕获目标刷新请求，确保断言在正确时机执行。
• 所有expect调用必须加await，Playwright的断言是异步操作，需要等待状态确认，避免同步调用导致的断言失效。
• 可通过respond()模拟请求返回，进一步验证按钮在请求完成后恢复启用的状态，让测试覆盖更完整。

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