如何在Playwright TypeScript的AlertHelper中实现isAlertDisplayed方法？

问题场景 #

需要在独立的AlertHelper文件中编写isAlertDisplayed方法，测试https://demoqa.com/alerts页面的延迟Alert场景：点击按钮后5秒弹出Alert，需验证两点：

• 点击后第4秒时Alert未出现
• 点击后第5秒之后Alert已出现

调用代码固定如下：

// 验证4秒后Alert未出现
const isAlertPresent1 = await pm.AlertHelper().isAlertDisplayed(4000);
expect(isAlertPresent1).toBe(false);

// 再等待2秒后验证Alert已出现
const isAlertPresent2 = await pm.AlertHelper().isAlertDisplayed(2000,true);
expect(isAlertPresent2).toBe(true);

原ChatGPT提供的代码无法满足需求，以下是正确实现方案。

原代码的问题 #

原代码核心逻辑存在缺陷：

• 时序错误：先注册dialog监听再等待超时，最后用Promise.race判断。若Alert在超时后触发，race已返回false，无法捕获后续出现的Alert
• 监听复用问题：once事件监听仅触发一次，第二次调用方法时监听已失效
• 无资源清理：未移除的监听会导致内存泄漏或干扰后续测试

正确的AlertHelper实现 #

import { Page, Dialog } from '@playwright/test';

export class AlertHelper {
  private page: Page;
  private dialogHandler: ((dialog: Dialog) => void) | null = null;

  constructor(page: Page) {
    this.page = page;
  }

  async isAlertDisplayed(timeout: number = 1000, dismissAlert: boolean = true): Promise<boolean> {
    try {
      // 创建监听Alert的Promise
      const alertDetected = new Promise<boolean>((resolve) => {
        this.dialogHandler = async (dialog: Dialog) => {
          if (dismissAlert) {
            await dialog.dismiss();
          }
          resolve(true);
        };
        this.page.on('dialog', this.dialogHandler);
      });

      // 同时等待Alert出现或超时
      const result = await Promise.race([
        alertDetected,
        new Promise<boolean>(resolve => setTimeout(() => resolve(false), timeout))
      ]);

      return result;
    } catch (error) {
      console.error('检测Alert时出错:', error);
      return false;
    } finally {
      // 清理监听，避免影响后续测试
      if (this.dialogHandler) {
        this.page.off('dialog', this.dialogHandler);
        this.dialogHandler = null;
      }
    }
  }
}

代码说明 #

1. 动态监听管理：每次调用方法时注册新的dialog监听，执行完成后立即移除，避免多次调用时的监听冲突
2. 时序逻辑修正：通过Promise.race同时监听Alert出现和超时事件，确保超时前出现的Alert能被及时捕获，超时未出现则返回false
3. 资源清理：在finally块中统一清理监听，无论方法成功或失败，都不会残留影响后续测试的资源
4. 参数兼容：保持与原调用代码一致的参数结构，无需修改现有调用逻辑

注意事项 #

• 调用isAlertDisplayed前，必须先点击触发延迟Alert的按钮
• 第二次调用设置2000ms超时，加上之前的4000ms，总等待时间达6000ms，完全覆盖Alert的5秒延迟

内容的提问来源于stack exchange，提问作者Ceyhun Ganioğlu