Page对象操作指南 - 元素码农

发布时间: 2025-03-27 18:38

↑

# Page对象操作指南

本文将详细介绍Playwright中的Page对象，这是自动化测试中最常用的对象之一，负责页面交互和操作。

## Page对象概述

Page对象代表一个浏览器标签页，提供了丰富的API用于页面操作、元素交互、事件处理等功能。每个Page对象都属于一个特定的BrowserContext。

## 创建和管理Page

### 1. 创建新页面

```typescript
// 从浏览器上下文创建
const context = await browser.newContext();
const page = await context.newPage();

// 从浏览器直接创建
const page = await browser.newPage();
```

### 2. 页面生命周期

```typescript
// 页面加载
await page.goto('https://example.com');

// 等待页面加载完成
await page.waitForLoadState('load');

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

## 页面操作

### 1. 导航操作

```typescript
// 导航到URL
await page.goto('https://example.com', {
  waitUntil: 'networkidle',  // 等待网络请求完成
  timeout: 30000             // 超时时间
});

// 页面刷新
await page.reload();

// 前进后退
await page.goBack();
await page.goForward();
```

### 2. 页面状态

```typescript
// 获取页面标题
const title = await page.title();

// 获取页面URL
const url = page.url();

// 检查页面是否关闭
const isClosed = page.isClosed();

// 获取页面内容
const content = await page.content();
```

## 元素交互

### 1. 元素定位

```typescript
// 使用选择器定位元素
const button = page.locator('button#submit');

// 使用文本定位
const link = page.getByText('点击这里');

// 使用角色定位
const submitButton = page.getByRole('button', { name: '提交' });

// 使用标签定位
const nameInput = page.getByLabel('姓名');
```

### 2. 元素操作

```typescript
// 点击元素
await page.click('button');

// 输入文本
await page.fill('input[name="username"]', 'test');

// 清除输入
await page.fill('input[name="username"]', '');

// 选择下拉选项
await page.selectOption('select#country', 'China');

// 文件上传
await page.setInputFiles('input[type="file"]', 'path/to/file');
```

### 3. 元素状态

```typescript
// 检查元素是否可见
const isVisible = await page.isVisible('button');

// 检查元素是否启用
const isEnabled = await page.isEnabled('button');

// 获取元素文本
const text = await page.textContent('div.message');

// 获取元素属性
const href = await page.getAttribute('a', 'href');
```

## 事件处理

### 1. 页面事件

```typescript
// 监听控制台消息
page.on('console', msg => {
  console.log(`页面日志: ${msg.text()}`);
});

// 监听页面错误
page.on('pageerror', error => {
  console.error(`页面错误: ${error}`);
});

// 监听请求
page.on('request', request => {
  console.log(`请求: ${request.url()}`);
});

// 监听响应
page.on('response', response => {
  console.log(`响应: ${response.url()} ${response.status()}`);
});
```

### 2. 对话框处理

```typescript
// 处理alert/confirm/prompt对话框
page.on('dialog', dialog => {
  console.log(`对话框消息: ${dialog.message()}`);
  dialog.accept();  // 或 dialog.dismiss()
});
```

## 页面状态管理

### 1. Cookie操作

```typescript
// 获取所有cookies
const cookies = await page.context().cookies();

// 设置cookies
await page.context().addCookies([{
  name: 'token',
  value: '123456',
  domain: '.example.com',
  path: '/',
}]);

// 清除cookies
await page.context().clearCookies();
```

### 2. LocalStorage操作

```typescript
// 设置localStorage
await page.evaluate(() => {
  localStorage.setItem('key', 'value');
});

// 获取localStorage
const value = await page.evaluate(() => {
  return localStorage.getItem('key');
});

// 清除localStorage
await page.evaluate(() => {
  localStorage.clear();
});
```

## 性能优化

### 1. 资源控制

```typescript
// 启用请求拦截
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// 修改请求
await page.route('**/api/data', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ data: 'mocked' })
  });
});
```

### 2. 性能监控

```typescript
// 开始性能监控
const startTime = Date.now();

// 等待页面加载完成
await page.goto('https://example.com');

// 获取性能指标
const metrics = await page.metrics();
console.log(`页面加载时间: ${Date.now() - startTime}ms`);
console.log(`JS堆大小: ${metrics.JSHeapUsedSize}`);
```

## 最佳实践

1. 等待策略
```typescript
// 使用自动等待
await page.click('button');  // 自动等待元素可见和可点击

// 自定义等待
await page.waitForSelector('button', {
  state: 'visible',
  timeout: 5000
});
```

2. 错误处理
```typescript
try {
  await page.click('button');
} catch (error) {
  console.error('元素点击失败:', error);
  // 进行错误处理
}
```

3. 资源清理
```typescript
// 确保页面资源被正确释放
await page.close();
```

## 常见问题

### 1. 元素不可见

```typescript
// 等待元素可见
await page.waitForSelector('button', { state: 'visible' });

// 滚动到元素
await page.locator('button').scrollIntoViewIfNeeded();
```

### 2. 异步操作

```typescript
// 等待导航完成
await Promise.all([
  page.waitForNavigation(),
  page.click('a.link')
]);

// 等待网络空闲
await page.waitForLoadState('networkidle');
```

## 下一步

1. 了解[Frame与上下文管理](/article/playwright/core-concepts/frame)的使用
2. 学习[网络请求拦截与Mock](/article/playwright/core-concepts/network)技术
3. 探索[元素定位与操作](/article/playwright/element-locators/css-selector)的更多方法

## 参考资料

- [Playwright Page API](https://playwright.dev/docs/api/class-page)
- [Playwright选择器](https://playwright.dev/docs/selectors)
- [Playwright事件处理](https://playwright.dev/docs/events)