多标签页与弹窗管理

发布时间: 2025-03-27 19:14

↑

# 多标签页与弹窗管理

本文将详细介绍如何在Playwright中处理多标签页和弹窗，帮助你实现复杂的多窗口自动化测试场景。

## 多标签页管理

### 1. 基本操作

```typescript
// 创建新标签页
const newPage = await context.newPage();

// 获取所有标签页
const pages = context.pages();

// 切换到指定标签页
await page.bringToFront();

// 关闭标签页
await page.close();
```

### 2. 事件监听

```typescript
// 监听新标签页打开
context.on('page', async page => {
  console.log('新标签页已打开');
  await page.waitForLoadState();
});

// 等待新标签页打开
const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('a[target="_blank"]')
]);
```

## 弹窗处理

### 1. 基本弹窗

```typescript
// 处理alert弹窗
page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept();
});

// 处理confirm弹窗
page.on('dialog', async dialog => {
  if (dialog.type() === 'confirm') {
    await dialog.dismiss();
  }
});

// 处理prompt弹窗
page.on('dialog', async dialog => {
  if (dialog.type() === 'prompt') {
    await dialog.accept('输入内容');
  }
});
```

### 2. 模态框

```typescript
// 等待模态框出现
await page.waitForSelector('.modal', { state: 'visible' });

// 关闭模态框
await page.click('.modal .close-button');

// 处理模态框内容
await page.fill('.modal input', '测试内容');
await page.click('.modal .submit');
```

## 窗口管理

### 1. 窗口操作

```typescript
// 调整窗口大小
await page.setViewportSize({ width: 1280, height: 800 });

// 最大化窗口
await page.setViewportSize({
  width: 1920,
  height: 1080
});

// 全屏模式
await page.evaluate(() => {
  document.documentElement.requestFullscreen();
});
```

### 2. 多窗口协同

```typescript
// 在多个窗口间同步数据
const pages = context.pages();
for (const page of pages) {
  await page.evaluate((data) => {
    window.localStorage.setItem('data', JSON.stringify(data));
  }, sharedData);
}

// 窗口间通信
await page1.evaluate(() => {
  window.postMessage({ type: 'sync', data: 'test' }, '*');
});

await page2.waitForEvent('message');
```

## 最佳实践

### 1. 标签页管理

```typescript
// 创建标签页管理器
class TabManager {
  constructor(context) {
    this.context = context;
    this.pages = new Map();
  }

async createTab(name, url) {
    const page = await this.context.newPage();
    await page.goto(url);
    this.pages.set(name, page);
    return page;
  }

async switchTab(name) {
    const page = this.pages.get(name);
    if (page) {
      await page.bringToFront();
      return page;
    }
    throw new Error(`标签页 ${name} 不存在`);
  }
}
```

### 2. 弹窗处理

```typescript
// 创建弹窗处理器
class DialogHandler {
  constructor(page) {
    this.page = page;
    this.setupHandlers();
  }

setupHandlers() {
    this.page.on('dialog', async dialog => {
      switch (dialog.type()) {
        case 'alert':
          await dialog.accept();
          break;
        case 'confirm':
          await dialog.accept();
          break;
        case 'prompt':
          await dialog.accept('默认输入');
          break;
      }
    });
  }
}
```

## 调试技巧

### 1. 标签页调试

```typescript
// 打印标签页信息
context.on('page', page => {
  console.log('新标签页URL:', page.url());
  console.log('标签页总数:', context.pages().length);
});

// 监控标签页生命周期
page.on('load', () => console.log('页面加载完成'));
page.on('close', () => console.log('页面已关闭'));
```

### 2. 弹窗调试

```typescript
// 调试弹窗内容
page.on('dialog', dialog => {
  console.log('弹窗类型:', dialog.type());
  console.log('弹窗消息:', dialog.message());
  console.log('默认值:', dialog.defaultValue());
});

// 捕获弹窗错误
try {
  await page.click('.trigger-dialog');
} catch (error) {
  console.error('弹窗处理失败:', error);
}
```

## 常见问题

### 1. 标签页问题

```typescript
// 处理标签页未找到
try {
  const page = await context.newPage();
  await page.goto(url);
} catch (error) {
  console.error('创建标签页失败:', error);
}

// 处理标签页切换失败
try {
  await page.bringToFront();
} catch (error) {
  console.error('切换标签页失败:', error);
}
```

### 2. 弹窗问题

```typescript
// 处理弹窗超时
try {
  await page.waitForEvent('dialog', { timeout: 5000 });
} catch (error) {
  console.error('等待弹窗超时:', error);
}

// 处理意外弹窗
page.on('dialog', async dialog => {
  console.warn('检测到意外弹窗:', dialog.message());
  await dialog.dismiss();
});
```

## 下一步

1. 学习[浏览器上下文隔离](/article/playwright/advanced/browser-context)
2. 了解[设备模拟与地理定位](/article/playwright/advanced/device-emulation)
3. 探索[Jest集成配置](/article/playwright/integration/jest)

## 参考资料

- [Playwright多页面处理](https://playwright.dev/docs/pages)
- [Playwright对话框处理](https://playwright.dev/docs/dialogs)
- [Playwright上下文API](https://playwright.dev/docs/api/class-browsercontext)

元素码农