什么是 CSS Selector

CSS Selector（CSS 选择器）是一种用于选择 HTML 元素的模式，它最初是为 CSS 样式表设计的，但现在也被广泛用于 JavaScript 和测试工具（如 Playwright）中来定位和操作 DOM 元素。

基本 CSS Selector 类

1. 元素选择器：通过标签名选择元素

   div

2. 类选择器：通过 class 属性选择元素

   .className

3. ID 选择器：通过 id 属性选择元素

   #idName

4. 属性选择器：通过属性选择元素

   [type="text"]

5. 后代选择器：选择嵌套元素

   div span

6. 子元素选择器：选择直接子元素

   div > span

7. 相邻兄弟选择器：选择紧接在另一元素后的元素

   h1 + p

8. 通用兄弟选择器：选择所有在指定元素后的兄弟元素

   h1 ~ p

9. 伪类选择器：基于元素状态选择

   a:hover

在 Playwright 中使用 CSS Selector

Playwright 是一个现代浏览器自动化工具，它支持多种定位元素的方式，其中 CSS Selector 是最常用的一种。

基本用法

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 使用CSS选择器点击元素
  await page.click('button.submit');

  // 使用CSS选择器输入文本
  await page.fill('input[name="username"]', 'myuser');

  await browser.close();
})();

常用方法

1. 点击元素

   await page.click('css=button#submit');

2. 输入文本

   await page.fill('input[type="text"]', 'value');

3. 获取元素文本

   const text = await page.textContent('.title');

4. 获取多个元素

   const items = await page.$$('ul.items > li');

5. 等待元素出现

   await page.waitForSelector('.loading', { state: 'hidden' });

高级用法

1. 组合选择器

   await page.click('div.user-panel.main input[name="login"]');

2. 伪类选择器

   // 选择第一个li元素
   await page.click('ul li:first-child');

   // 选择包含特定文本的元素
   await page.click('text=Submit');

3. XPath 和 CSS 混合使用

   // Playwright也支持XPath
   await page.click('//button[@id="submit"]');

最佳实践

1. 优先使用有意义的属性：如 data-testid 等专门用于测试的属性

   await page.click('[data-testid="submit-button"]');

2. 避免过于脆弱的选择器：不要使用可能频繁变化的CSS类或结构位置
3. 使用文本选择器作为补充：当CSS选择器不够时，可以结合文本内容

   await page.click('button:has-text("Submit")');

4. 利用Playwright的定位器API：更现代、更稳定的方式

   const submitButton = page.locator('button.submit');
   await submitButton.click();

CSS Selector 在 Playwright 中是定位元素的主要方式之一，熟练掌握各种选择器可以让你编写更稳定、更高效的自动化测试脚本。

CSS Selector与XPath

在 Playwright 中，当你传递一个字符串作为选择器时（如 page.click('selector')），它会自动判断使用的是 CSS Selector 还是 XPath。以下是判断规则和验证方法：

---

1. 自动判断规则

Playwright 根据选择器的 开头字符 自动判断类型：

选择器类型	标识符	示例
CSS Selector	默认（无特殊前缀）	'button.submit'
XPath	以 // 或 xpath= 开头	'//button[@id="submit"]' 或 'xpath=//button'
Text	以 text= 开头	'text=Submit'
其他	特定前缀（如 id=, aria-label=）	'id=username'

---

2. 明确指定选择器类型

如果你不确定或想明确指定，可以添加前缀：

// 明确使用 CSS Selector（即使看起来像 XPath）
await page.click('css=//button'); // 强制按 CSS 解析

// 明确使用 XPath
await page.click('xpath=//button'); 

---

3. 验证选择器类型的方法

方法 1：检查选择器语法

• CSS Selector 通常符合 CSS 规范（如 .class、#id、[attr]）。
• XPath 通常以 // 或 .// 开头，可能包含轴（如 //div[@class="x"]）。

方法 2：故意传递错误选择器

如果 Playwright 报错，错误信息会提示选择器类型。例如：

await page.click('//button[invalid-xpath]');

报错会显示：

Error: Invalid XPath: '//button[invalid-xpath]'

---

4. 代码示例对比

CSS Selector

// 选择 class 为 "submit" 的按钮
await page.click('button.submit');

// 选择属性为 name="username" 的 input
await page.fill('input[name="username"]', 'test');

XPath

// 选择 id 为 "submit" 的按钮
await page.click('//button[@id="submit"]');

// 选择包含文本 "Submit" 的按钮
await page.click('//button[contains(text(), "Submit")]');

---

5. 最佳实践

1. 默认用 CSS Selector：
   除非需要复杂逻辑（如根据文本、层级关系定位），否则优先使用 CSS，因为性能更高。
2. 避免隐式推断：
   如果选择器可能被误判（如以 // 开头的字符串但不是 XPath），显式加上 css= 或 xpath= 前缀。
3. 使用 locator() API：
   Playwright 推荐使用 locator()，它会自动处理选择器类型：

   const button = page.locator('button.submit'); // CSS
   const xpathButton = page.locator('//button[@id="submit"]'); // XPath

---

总结

• Playwright 默认将字符串解析为 CSS Selector，除非选择器以 // 或 xpath= 开头。
• 通过前缀（如 css=、xpath=）可以显式指定类型。
• 验证时可通过语法特征或错误信息判断实际使用的类型。