当前位置：首页 > article >正文

CSS Selectors

article 2025/3/4 5:00:53

当然，理解纯CSS选择器（CSS Selectors）对于进行UI自动化测试非常重要。CSS选择器允许您通过元素的属性、层级关系、类名、ID等来精准定位页面上的元素。下面我将详细讲解CSS选择器的常见用法，并结合您的需求提供具体的示例。

1. 基本选择器

元素选择器：选择特定类型的HTML元素。
```
div { /* 选择所有div元素 */ }
```
ID选择器：通过元素的id属性选择单个元素。
```
#stats-8306 { /* 选择id为stats-8306的元素 */ }
```

类选择器：通过元素的class属性选择元素。

.canvas-class { /* 选择所有具有class="canvas-class"的元素 */ }

2. 组合选择器

后代选择器：选择某个元素内部的所有特定后代元素。

div.parent-class span { /* 选择所有在div.parent-class内的span元素 */ }

子选择器：选择某个元素的直接子元素。

div > span { /* 选择所有div元素的直接子span元素 */ }

相邻兄弟选择器：选择紧接在另一个元素之后的同级元素。

div#stats-8306 + div { /* 选择紧跟在div#stats-8306后面的div元素 */ }

通用兄弟选择器：选择某个元素之后的所有同级元素。

div#stats-8306 ~ div { /* 选择所有在div#stats-8306之后的div元素 */ }

3. 属性选择器

属性存在选择器：选择具有特定属性的元素。

[data-stats-id] { /* 选择所有具有data-stats-id属性的元素 */ }

属性值选择器：选择属性值等于特定值的元素。

[data-stats-id="8306"] { /* 选择data-stats-id属性值为8306的元素 */ }

包含文本的选择器：CSS标准中没有直接通过文本内容选择元素的选择器，但有些框架（如jQuery）支持:contains伪类。在纯CSS中，无法实现这一点，需要通过其他方式。

4. 伪类选择器

伪类用于定义元素的特殊状态。

:nth-of-type(n)：选择同类型中的第n个元素。

div:nth-of-type(1) { /* 选择第一个div元素 */ }

:last-child：选择父元素的最后一个子元素。

div:last-child { /* 选择父元素中的最后一个div元素 */ }

5. 综合示例

假设您的HTML结构如下：

<div data-stats-id="8306">
    <div>鲜时光</div>
    <div>
        <div class="solar-combo-chart">
            <canvas></canvas>
        </div>
    </div>
</div>

目标

定位data-stats-id="8306"下的文本为“鲜时光”的div之后的canvas元素。

CSS选择器实现

由于纯CSS无法通过文本内容直接选择元素，我们需要依赖元素的层级和属性来定位。

通过层级关系定位canvas

如果“鲜时光”的div后面紧跟包含canvas的div，可以使用相邻兄弟选择器：
```
div[data-stats-id="8306"] > div + div .solar-combo-chart canvas
```
解释：
- div[data-stats-id="8306"]：选择具有data-stats-id="8306"属性的div。
- > div：选择其直接子div（即“鲜时光”所在的div）。
- + div：选择紧随其后的兄弟div（即包含canvas的div）。
- .solar-combo-chart canvas：在找到的div中选择具有类名solar-combo-chart的子div中的canvas元素。
如果结构更复杂，使用通用兄弟选择器

如果“鲜时光”的div和包含canvas的div之间有不确定的层级，可以使用通用兄弟选择器：
```
div[data-stats-id="8306"] div:contains('鲜时光') ~ div .solar-combo-chart canvas
```
注意：:contains在标准CSS中不可用。因此，这种方法需要确保HTML结构允许使用其他选择器。
通过明确的类名或属性

如果“鲜时光”的div有唯一的类名，可以更精准地定位：
```
<div class="unique-class">鲜时光</div>
```
对应的CSS选择器：
```
div[data-stats-id="8306"] > .unique-class + div .solar-combo-chart canvas
```

6. 在UI自动化中的应用

在UI自动化测试中，CSS选择器通常用于定位页面元素，以便进行点击、输入等操作。以下是一些常见框架中使用CSS选择器的示例：

Selenium（Python）：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('your_website_url')

# 定位canvas元素
canvas = driver.find_element_by_css_selector("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas")

# 进行操作，例如点击
canvas.click()

Cypress：

cy.get("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas")
  .should('exist')
  .click();

Playwright：

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

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('your_website_url');

    const canvas = await page.$("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas");
    await canvas.click();

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

7. 实用技巧

使用开发者工具验证选择器：
1. 打开浏览器的开发者工具（通常按F12）。
2. 在“Elements”面板中，右键点击目标元素，选择“Copy” > “Copy selector”（复制选择器）。
3. 或者在控制台中使用document.querySelector测试选择器：
```
document.querySelector("div[data-stats-id='8306'] > div + div .solar-combo-chart canvas");
```
  如果返回目标元素，说明选择器正确。
避免过于复杂的选择器：
尽量保持选择器的简洁和可维护性。过于复杂的选择器可能在HTML结构变化时容易失效。
优先使用唯一标识符：
如果元素有唯一的id或class，优先使用它们来定位，这样更高效且稳定。