浏览器上下文隔离

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

↑

# 浏览器上下文隔离

本文将详细介绍Playwright中的浏览器上下文隔离机制，帮助你理解如何管理独立的浏览器会话，实现测试环境的隔离。

## 基本概念

### 1. 浏览器上下文

```typescript
// 创建浏览器实例
const browser = await chromium.launch();

// 创建新的浏览器上下文
const context = await browser.newContext();

// 在上下文中创建页面
const page = await context.newPage();

// 关闭上下文
await context.close();
```

### 2. 上下文配置

```typescript
// 配置浏览器上下文
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  userAgent: 'Custom User Agent',
  locale: 'zh-CN',
  timezoneId: 'Asia/Shanghai'
});

// 设置HTTP认证
const context = await browser.newContext({
  httpCredentials: {
    username: 'admin',
    password: '123456'
  }
});
```

## 隔离特性

### 1. Cookie隔离

```typescript
// 在不同上下文中设置Cookie
const context1 = await browser.newContext();
const context2 = await browser.newContext();

await context1.addCookies([{
  name: 'session',
  value: 'user1',
  url: 'https://example.com'
}]);

await context2.addCookies([{
  name: 'session',
  value: 'user2',
  url: 'https://example.com'
}]);
```

### 2. 存储隔离

```typescript
// localStorage隔离
const context1 = await browser.newContext();
const page1 = await context1.newPage();
await page1.evaluate(() => {
  localStorage.setItem('user', 'admin');
});

const context2 = await browser.newContext();
const page2 = await context2.newPage();
await page2.evaluate(() => {
  console.log(localStorage.getItem('user')); // null
});
```

## 权限管理

### 1. 基本权限

```typescript
// 设置地理位置权限
const context = await browser.newContext({
  permissions: ['geolocation']
});

// 设置多个权限
const context = await browser.newContext({
  permissions: ['notifications', 'camera', 'microphone']
});

// 动态更新权限
await context.grantPermissions(['clipboard-read']);
```

### 2. 高级权限

```typescript
// 设置特定域名的权限
await context.grantPermissions(['geolocation'], {
  origin: 'https://example.com'
});

// 清除权限
await context.clearPermissions();
```

## 网络隔离

### 1. 请求拦截

```typescript
// 每个上下文独立的请求拦截
const context = await browser.newContext();
await context.route('**/api/**', route => {
  if (route.request().resourceType() === 'xhr') {
    route.fulfill({
      status: 200,
      body: JSON.stringify({ data: 'mocked' })
    });
  } else {
    route.continue();
  }
});
```

### 2. 网络事件

```typescript
// 监听特定上下文的网络事件
context.on('request', request => {
  console.log(`${request.method()} ${request.url()}`);
});

context.on('response', response => {
  console.log(`${response.status()} ${response.url()}`);
});
```

## 最佳实践

### 1. 上下文复用

```typescript
// 创建可重用的上下文配置
const contextOptions = {
  viewport: { width: 1280, height: 720 },
  locale: 'zh-CN',
  permissions: ['geolocation'],
  httpCredentials: {
    username: 'admin',
    password: '123456'
  }
};

// 创建多个相同配置的上下文
const context1 = await browser.newContext(contextOptions);
const context2 = await browser.newContext(contextOptions);
```

### 2. 状态持久化

```typescript
// 保存上下文状态
await context.storageState({
  path: 'auth.json'
});

// 使用保存的状态创建新上下文
const context = await browser.newContext({
  storageState: 'auth.json'
});
```

## 调试技巧

### 1. 上下文调试

```typescript
// 启用上下文级别的调试
const context = await browser.newContext({
  logger: {
    isEnabled: (name, severity) => severity === 'verbose',
    log: (name, severity, message) => console.log(`${name} ${message}`)
  }
});

// 监控上下文事件
context.on('console', message => {
  console.log(`${message.type()}: ${message.text()}`);
});
```

### 2. 错误处理

```typescript
// 捕获上下文级别的错误
context.on('pageerror', error => {
  console.error('页面错误:', error);
});

context.on('requestfailed', request => {
  console.error('请求失败:', request.url());
});
```

## 常见问题

### 1. 资源管理

```typescript
// 正确的资源清理
async function test() {
  const context = await browser.newContext();
  try {
    const page = await context.newPage();
    await page.goto('https://example.com');
    // 执行测试
  } finally {
    await context.close();
  }
}

// 批量清理上下文
async function cleanup() {
  const contexts = browser.contexts();
  await Promise.all(contexts.map(context => context.close()));
}
```

### 2. 性能优化

```typescript
// 限制上下文资源使用
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  deviceScaleFactor: 1,
  isMobile: false,
  hasTouch: false
});

// 禁用不必要的功能
const context = await browser.newContext({
  javascriptEnabled: true,
  offline: false,
  bypassCSP: false
});
```

## 下一步

1. 了解[设备模拟与地理定位](/article/playwright/advanced/device-emulation)
2. 探索[Jest集成配置](/article/playwright/integration/jest)
3. 学习[Mocha测试报告生成](/article/playwright/integration/mocha)

## 参考资料

- [Playwright浏览器上下文](https://playwright.dev/docs/browser-contexts)
- [Playwright隔离机制](https://playwright.dev/docs/isolation)
- [Playwright权限管理](https://playwright.dev/docs/permissions)

元素码农