【Playwright学习笔记 02】CSS-selector定位

定位后的操作方法:

  • 点击元素, **click()**方法

  • 元素内输入文本, **fill()**方法

  • 获取元素内部文本, **inner_text()**方法

常用方法:

图中粉色字体都是可以用来定位的标志

定位标签常用id属性中的元素,一般html语言id的内容都是唯一的

图中id属性中的内容被空格隔开的意思是,这个标签有两个属性分别是suggestion、stock

CSS selector

原理:css本身就是浏览器用用来赋予内容样式的,赋予不同的颜色。

Locator 对象

Page 对象的 locator方法就会创建一个 Locator 类型对象,参数就可以是 CSS Selector 表达式

python 复制代码
page.locator('#kw').fill('通讯')
page.locator('#go').click()

Page对象的 locator 定位到的如果是**''唯一''**的 html元素,就可以调用 Locator 对象的 方法,比如 fill , click , inner_text 等等对元素进行操作了。

根据 tag名、id、class 选择元素

tag名

直接写上tag名即可

python 复制代码
locators = page.locator('div').all()

然后可以通过for循环打印所有内容:

python 复制代码
for one in locators:
    print(one.inner_text())

要获取 所有的tag名为div的元素的内部可见文本,也可以直接调用 all_inner_texts

python 复制代码
texts = page.locator('div').all_inner_texts()

注意,如果 locator调用 匹配的结果是多个元素 , 调用 针对单个元素的方法 ,比如 inner_text ,会有错误抛出

根据id属性

选择元素的语法是在id号前面加上一个井号:#id值

比如 ,有下面这样的元素:

python 复制代码
<input  type="text" id='searchtext' />

就可以使用 #searchtext 这样的 CSS Selector 来选择它。

比如,我们想在 id 为 searchtext 的输入框中输入文本 你好 ,完整的Python代码如下

python 复制代码
lct = page.locator('#searchtext')
lct.fill('你好')

根据class属性

选择元素的语法是在 class 值 前面加上一个点: .class值

要选择 class 属性值为 animal的元素 动物,可以这样写

python 复制代码
page.locator('.animal')

验证 CSS Selector语法是否正确

由于 CSS Selector 是浏览器直接支持的,可以在浏览器 开发者工具栏 中验证。

比如我们使用Chrome浏览器打开一个网址

按F12 打开 开发者工具栏, 点击 Elements 标签后, 同时按 Ctrl 键 和 F 键, 就会出现下图箭头处的 搜索框

匹配多个元素

前面已经说, 如果一个 locator表达式匹配多个元素,要获取所有的元素对应的 locator 对象,使用 all方法

python 复制代码
locators = page.locator('.plant').all()

有时,我们只需要得到某种表达式对应的元素数量 ,可以使用 count方法,如下

python 复制代码
count = page.locator('.plant').count()

返回结果就是匹配的元素数量。 可以根据返回结果是否为0 判断元素是否存在

有时,我们只需要得到某种表达式对应的第一个,或者最后一个元素。

可以使用**first** 和 last 属性 , 如下

python 复制代码
lct = page.locator('.plant')
print(lct.first.inner_text(), lct.last.inner_text())

也可以,通过 nth 方法,获取指定次序的元素,参数0表达第一个, 1 表示第2个,比如:

python 复制代码
lct = page.locator('.plant')
print(lct.nth(1).inner_text())

元素内部定位

前面都是通过 Page 对象调用的 locator 方法, 定位的范围是整个网页。

如果我们想在某个元素内部定位,可以通过**Locator** 对象 调用 locator方法。比如:

python 复制代码
lct = page.locator('#bottom')

# 在 #bottom 对应元素的范围内 寻找标签名为 span 的元素。
eles = lct.locator('span').all()
相关推荐
2501_9181269137 分钟前
学习所有6502写游戏动画的语句
汇编·嵌入式硬件·学习·程序人生·游戏
左左右右左右摇晃38 分钟前
JVM 笔记--分代工程以及分代的算法
jvm·笔记
-Springer-1 小时前
STM32 学习 —— 个人学习笔记9-3(FlyMcu 串口下载)
笔记·stm32·学习
weixin_458872612 小时前
东华复试OJ每日3题打卡·复盘103~105
学习
SuniaWang2 小时前
《Spring AI + 大模型全栈实战》学习手册系列 ·专题三:《Embedding 模型选型指南:从 MMTEB 排名到实际应用》
人工智能·学习·spring
问道飞鱼2 小时前
【Tauri框架学习】Windows 11 环境下 Tauri 开发环境安装与问题解决手册
windows·学习·tauri·开发环境
中屹指纹浏览器2 小时前
2026指纹浏览器与代理IP协同安全体系构建——从特征匹配到行为风控的全链路防护
经验分享·笔记
لا معنى له3 小时前
什么是Active Inference(主动推理)? ——学习笔记
笔记·学习
JicasdC123asd3 小时前
并行双分支瓶颈架构改进YOLOv26异构卷积核协同特征提取与残差学习双重突破
学习·yolo·架构
zhouping@3 小时前
JAVA学习笔记day06
java·笔记·学习