CSS选择器实战 - 元素码农

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

↑

# CSS选择器实战

本文将详细介绍如何在Playwright中使用CSS选择器定位和操作元素，帮助你掌握高效的元素定位技巧。

## CSS选择器基础

### 1. 基本选择器

```typescript
// ID选择器
await page.click('#login-button');

// 类选择器
await page.fill('.search-input', 'playwright');

// 标签选择器
await page.locator('button').click();

// 属性选择器
await page.click('input[type="submit"]');
```

### 2. 组合选择器

```typescript
// 后代选择器
await page.click('form input');

// 子元素选择器
await page.click('form > input');

// 相邻兄弟选择器
await page.click('label + input');

// 通用兄弟选择器
await page.click('label ~ input');
```

## 高级选择器

### 1. 属性选择器

```typescript
// 精确匹配
await page.click('[data-testid="submit"]');

// 包含匹配
await page.click('[class*="btn"]');

// 开头匹配
await page.click('[id^="prefix"]');

// 结尾匹配
await page.click('[id$="suffix"]');

// 空格分隔匹配
await page.click('[class~="primary"]');
```

### 2. 伪类选择器

```typescript
// 第一个元素
await page.click('li:first-child');

// 最后一个元素
await page.click('li:last-child');

// 第n个元素
await page.click('li:nth-child(2)');

// 奇数位置元素
await page.click('li:nth-child(odd)');

// 偶数位置元素
await page.click('li:nth-child(even)');
```

## 实战技巧

### 1. 多重条件选择

```typescript
// 组合多个属性
await page.click('button[type="submit"][disabled]');

// 组合类和属性
await page.click('.btn[data-action="save"]');

// 多层级定位
await page.click('.form-group input[type="text"]');
```

### 2. 动态元素定位

```typescript
// 部分文本匹配
await page.click('button:has-text("Submit")');

// 包含特定元素
await page.click('div:has(img)');

// 可见元素
await page.click('button:visible');

// 不可见元素
await page.click('button:hidden');
```

### 3. 表单元素定位

```typescript
// 输入框
await page.fill('input:not([type="submit"])', 'text');

// 选中的选项
await page.click('option:checked');

// 禁用的元素
await page.locator('button:disabled').count();

// 必填字段
await page.fill('input:required', 'value');
```

## 性能优化

### 1. 选择器优化

```typescript
// 使用ID（最快）
await page.click('#unique-id');

// 使用特定属性
await page.click('[data-testid="submit"]');

// 避免过深的选择器
// 不推荐
await page.click('div > div > div > button');
// 推荐
await page.click('[data-testid="submit-button"]');
```

### 2. 等待策略

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

// 等待元素可点击
await page.locator('button').waitFor({ state: 'attached' });

// 等待元素消失
await page.waitForSelector('.loading', { state: 'hidden' });
```

## 调试技巧

### 1. 验证选择器

```typescript
// 检查元素是否存在
const exists = await page.locator('button').count() > 0;

// 获取元素数量
const count = await page.locator('.item').count();

// 打印元素文本
const text = await page.locator('button').textContent();
console.log('按钮文本:', text);
```

### 2. 选择器测试

```typescript
// 测试选择器是否唯一
const elements = await page.locator('button').count();
if (elements > 1) {
  console.log('警告：选择器匹配多个元素');
}

// 获取元素属性
const className = await page.locator('button').getAttribute('class');
console.log('类名:', className);
```

## 常见问题

### 1. 选择器无法定位

```typescript
// 检查iframe
const frame = page.frameLocator('iframe').first();
await frame.locator('button').click();

// 检查阴影DOM
await page.locator('custom-element').locator('>>> button').click();

// 等待动态加载
await page.waitForSelector('button', { timeout: 5000 });
```

### 2. 选择器性能问题

```typescript
// 缓存选择器
const submitButton = page.locator('#submit');
await submitButton.click();

// 使用更具体的选择器
await page.locator('button[type="submit"]').click();

// 避免使用通配符
// 不推荐
await page.locator('div *').click();
// 推荐
await page.locator('div button').click();
```

## 下一步

1. 学习[XPath高级定位技巧](/article/playwright/element-locators/xpath)
2. 了解[文本定位与正则匹配](/article/playwright/element-locators/text-matching)
3. 掌握[动态元素等待策略](/article/playwright/element-locators/waiting-strategies)

## 参考资料

- [Playwright选择器文档](https://playwright.dev/docs/selectors)
- [CSS选择器参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)
- [Playwright定位器API](https://playwright.dev/docs/api/class-locator)