高级定位 - CSS

简介

Web 自动化测试中的高级 CSS 定位是指使用复杂的 CSS 选择器来选择页面上的元素，以便在自动化测试中与这些元素进行交互。
CSS 定位可以分为 相对定位 和 绝对定位。
可以根据元素的标签、类、ID、属性、关系和状态等多种因素进行定位。高级 CSS 定位不仅允许你选择单个元素，还可以选择元素的集合，从而更好地适应不同的测试场景。和 Xpath 一块常用于 UI 自动化测试中的元素定位。

css 相对定位使用场景

适用于 Web 产品，能够提供更灵活的元素定位和布局方式。
在支持 WebView 的 App 端，相对定位同样发挥作用，确保元素在移动端的用户界面中能够按照预期进行定位和排列。

css 相对定位的优点

# 绝对定位
$("#ember63 > td.main-link.clearfix.topic-list-data > span > span > a")
# 相对定位
$("#ember63 [title='新话题']")

相对定位更易于维护，当页面结构发生变化时，绝对定位可能需要更新所有的选择器，而相对定位只需要更新相关的选择器。

相对定位通常比绝对定位更简洁明了，使代码更易于阅读和理解。

在某些情况下，页面中的元素可能嵌套在多个层次的父元素中，这时相对定位可以更轻松地选择目标元素，而无需编写冗长的选择器。

css 定位的调试方式

F12 进入浏览器的开发者模块，选择 console，按照如下语法输入 css 表达式：

css 基础语法

类型	表达式
标签	标签名
类	.class 属性值
ID	#id 属性值
属性	[属性名="属性值"]

# 在console中的写法
# https://www.baidu.com/
# 标签名
$('input')
# .类属性值
$('.s_ipt')
# #id属性值
$('#kw')
# [属性名='属性值']
$('[name="wd"]')

css 基础语法实战

打开测试人社区(https://ceshiren.com/)，F12 进入开发者模式，选择 console

标签名

查找页面中所有的 div 标签

$("div")

查找页面中所有的 a 标签

$("a")

.class 属性值

定位测试人社区 Logo

$(".logo-big")

页面元素：

console 调试：

页面元素：

注意：当 class 属性值有多个时，将中间的空格替换成 .。

$(".header-dropdown-toggle.search-dropdown")

不过这里要注意一个细节——当一个元素的 class 属性值有多个，也就是有多个类名时，这些类名之间通常用空格分隔。在选择器中，我们需要把这些空格替换成点，也就是点号，才能正确匹配到元素。

console 调试：

#id 属性值

定位测试人社区 Logo

$("#site-logo")

页面元素：

console 调试：

[属性名="属性值"]

定位测试人社区 Logo

$("[alt='测试人社区']")

页面元素：

console 调试：

css 关系定位

类型	格式
并集	元素,元素
邻近兄弟（了解即可）	元素+元素
兄弟（了解即可）	元素 1~元素 2
父子（重点）	元素>元素
后代（重点）	元素元素

# 在console中的写法
# 元素,元素
$('.bg,.s_ipt_wr,.new-pmd,.quickdelete-wrap')
# 元素>元素
$('#s_kw_wrap>input')
# 元素 元素
$('#form input')
# 元素+元素，了解即可
$('.soutu-btn+input')
# 元素1~元素2，了解即可
$('.soutu-btn~i')

css 关系定位实战

打开测试人社区(https://ceshiren.com/)，F12 进入开发者模式。

并集

# 会查找到页面中 id 为 `main` 的单个元素。
$("#main")
# 会查找到页面中 id 为 `ember6` 的单个元素。
$("#ember6")
# 会查找到页面中 id 为 `main` 和 `ember6` 两个元素。
$("#main,#ember6")

实现如下：

父子

# 会查找到页面 id 为 main 的元素
$("#main")
# 会查找到页面 id 为 ember4 的元素
$("#ember4")

# 通过父元素找子元素
$("#main>#ember4")

后代

# 会查找到页面 id 为 main-outlet-wrapper 的元素
$("#main-outlet-wrapper")
# 会查找到页面 id 为 ember476 的元素
$("#ember476")

#main-outlet-wrapper 的后代元素
$("#main-outlet-wrapper #ember476")

css 顺序关系

类型	格式
父子关系+顺序	元素元素
父子关系+标签类型+顺序	元素元素

# :nth-child(n)
$('#form>input:nth-child(2)')
# :nth-of-type(n)
$('#form>input:nth-of-type(1)')

css 顺序关系实战

打开测试人社区(https://ceshiren.com/)，F12 进入开发者模式。

:nth-child(n)

用于选择元素集合中的第 n 个元素，其中 n 是一个整数。如果想要精确查找，需要保证所查找到的元素是同一个父元素中的。

# 会查找到页面 id 为 ember15 的元素
$("#ember15")
# 会查找到页面 id 为 navigation-bar 的元素
$("#navigation-bar")
# 会查找到页面 id 为 ember15 元素下的直接子元素中 id 为 navigation-bar 的元素
$("#ember15>#navigation-bar")

# 选择第3个 li 标签
$("#ember15>#navigation-bar>li:nth-child(3)")

:nth-of-type(n)

用于选择某个父元素下特定类型的子元素中的第 n 个元素，其中 n 是一个整数。

页面元素：

console 调试：

CSS 定位-实战

测试步骤

打开测试人社区(https://ceshiren.com/)
使用 css 高级定位，进入【类别】的页面。
获取文本值进行断言。

Python 实现

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By


class Test:
    def setup(self):
        self.service = Service()
        self.options = webdriver.ChromeOptions()
        # 初始化 driver
        self.driver = webdriver.Chrome(service=self.service, options=self.options)
        # 设置隐式等待
        self.driver.implicitly_wait(10)

    def teardown(self):
        # 退出浏览器
        self.driver.quit()

    def test_get_ceshiren(self):
        # 进入 测试人 社区
        self.driver.get("https://www.ceshiren.com")
        # 查找并点击 “类别”
        self.driver.find_element(By.CSS_SELECTOR,".categories").click()
        # 获取类别下的文本值
        text = self.driver.find_elements(By.CSS_SELECTOR,".category-name")[0].text
        # 断言
        assert text == "提问区"

Java 实现

public class Test {
    // 初始化方法
    public void setup() {
        // 设置 ChromeDriver 路径 (需要根据实际路径修改)
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        ChromeOptions options = new ChromeOptions();
        // 初始化 driver
        driver = new ChromeDriver(options);
        // 设置隐式等待
        driver.manage().timeouts().implicitlyWait(java.time.Duration.ofSeconds(10));
    }

    // 退出方法
    public void teardown() {
        // 退出浏览器
        if (driver != null) {
            driver.quit();
        }
    }

    // 测试方法
    public void testGetCeshiren() {
        // 进入 测试人 社区
        driver.get("https://www.ceshiren.com");

        // 查找并点击 “类别”
        WebElement categoriesButton = driver.findElement(By.cssSelector(".categories"));
        categoriesButton.click();

        // 获取类别下的文本值
        WebElement firstCategory = driver.findElements(By.cssSelector(".category-name")).get(0);
        String text = firstCategory.getText();

        // 断言
        assertEquals("提问区", text, "Expected '提问区' but got: " + text);
    }

总结

精通 CSS 定位技巧对于 Web 自动化测试至关重要，因为使用 CSS 定位能够获取绝大部分元素。这种技能能够提高测试脚本的稳定性和灵活性，有效地支持自动化测试框架中的元素定位操作