CSS选择器常用语法

1、CSS选择器详解

CSS选择器最初是为了在CSS样式表中选择HTML元素而设计的，但由于其简洁和强大的语法，现在广泛用于自动化测试中的元素定位。

2、基本CSS选择器

选择器类型	语法	示例	描述
标签选择器	标签名	div	选择所有指定标签的元素
ID选择器	#ID值	#username	选择具有指定ID的元素
类选择器	.类名	.btn-primary	选择具有指定类的所有元素
属性选择器	[属性名] 或 [属性名=值]	[type="submit"]	选择具有指定属性或属性值的元素

3、组合选择器

组合方式	语法	示例	描述
后代选择器	A B	div p	选择A元素内的所有B元素（不限层级）
子元素选择器	A > B	div > p	选择A元素的直接子元素B（仅一层）
相邻兄弟选择器	A + B	h2 + p	选择紧跟在A元素后的第一个B元素
通用兄弟选择器	A ~ B	h2 ~ p	选择A元素后的所有同级B元素

4、伪类和伪元素

CSS选择器还包括伪类和伪元素，用于选择特定状态或位置的元素：

/* 伪类示例 */
:first-child       /* 第一个子元素 */
:last-child        /* 最后一个子元素 */
:nth-child(n)      /* 第n个子元素 */
:hover             /* 鼠标悬停状态 */
:checked           /* 选中状态（用于复选框等） *//* 伪元素示例 */
::before           /* 元素前的内容 */
::after            /* 元素后的内容 */

5、高级CSS选择器

选择器	示例	描述
属性包含	[class*="btn"]	选择class属性包含"btn"的元素
属性开头	[id^="prefix"]	选择id以"prefix"开头的元素
属性结尾	[href$=".pdf"]	选择href以".pdf"结尾的元素
多条件选择器	input[type="text"][required]	选择同时满足多个条件的元素

6、在Playwright中使用CSS选择器

# 基本CSS选择器
page.locator('button').click()                    # 标签选择器
page.locator('#submit-button').click()            # ID选择器
page.locator('.error-message').text_content()     # 类选择器
page.locator('[data-testid="username"]').fill('test')  # 属性选择器# 组合选择器
page.locator('form > input').first().click()      # 子元素选择器
page.locator('.card h2').text_content()           # 后代选择器
page.locator('label + input').fill('text')        # 相邻兄弟选择器# 伪类选择器
page.locator('li:first-child').click()            # 第一个列表项
page.locator('tr:nth-child(3)').click()           # 第三行
page.locator('input:checked').count()             # 已选中的输入框数量