精通Playwright的元素定位和CSS技巧

简介: 精通Playwright的元素定位和CSS技巧

Playwright之元素定位:

image.png

· 点击元素, click() 方法

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

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

CSS Selector 定位原理

一种方式是自己写,大家如果有网站开发经验,这一部分会比较轻松。

第二章方式根据开发者工具(F12)协助。

image.png

在Playwright 中,根据 CSS Selector 进行定位元素,就是使用页面对象的 Locator 类型的对象来进行操作。

image.png

标签名:

获取所有的tag名为div的元素的内部可见文本。

image.png image.png image.png

但是我们如果想一次性提取出所有的div标签下的内容呢?

我们可以使用all_inner_texts()方法,这个会将相应标签下的内容都放在一个列表中,会一次性全部提取出来。

image.png image.png

id属性:

根据id属性来进行选择元素,其语法是在id号前面加上一个#号: #id值.

image.png

class属性:

根据class属性来进行选择元素,其语法是在class号前面加上一个.号: .class值`.

image.png

多class问题:

假如一个标签存在多个class属性值,即aaa bbb,这两个属性都是其属性值,但是我们在进行选择器定位的时候,不能使用:

image.png

应该使用:

image.png

也可以使用:

image.png

匹配元素:

匹配多个元素,这多用于将所有的标签都遍历,然后得到其内容。

image.png

all() 返回的是个Locator列表,相当于一个可迭代对象,如下:

image.png 获取数量:

image.png

获取某个:

第一个:

image.png

最后一个:

image.png

某一个:

image.png

父子关系定位:

image.png

这种语法还是比较常见的,在xpath或者bs4或者css选择器,都有类似的用法。

根据属性选择:

image.png 包含:

image.png

a节点的href属性值以 http 字符串开头,可以使用 ^.

多个属性值:

image.png

组选择:

顾名思义,就是选定一组标签,一般是通过 ,隔开。

image.png

当然这样写可以实现交互定位,就是 既符合前面的,又符合后面的。

image.png

关于xpath:

这些就足够了,其实真正在开发的时候,更多的是改代码,看懂代码,还有同学会问,xpath可以定位吗?

当然可以了,那么xpath怎么写呢?

css选择器写法:

image.png

xpath选择器写法:

image.png 没错,就是将css的位置转化为xpath,playright会自动取找,不用指定xpath还是css选择器。

总结:

在这篇博客中,我们深入探讨了Playwright的元素定位功能,以及与之相关的CSS知识。我们首先介绍了Playwright的元素定位方法,包括基本的CSS选择器和XPath表达式。随后,我们深入讨论了如何使用这些方法来准确地定位页面元素,以便进行自动化测试和网页操作。此外,我们还涉及了一些与CSS选择器相关的知识,帮助读者更好地理解元素定位的原理。通过本文的学习,读者可以更好地掌握Playwright的元素定位功能,并在实际项目中灵活运用CSS知识来定位和操作网页元素。

 

目录
相关文章
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
179 2
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
355 1
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
261 0
|
9月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
9月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
9月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
9月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
9月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
9月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示