精通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知识来定位和操作网页元素。

 

目录
相关文章
|
8月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
97 2
|
8月前
|
前端开发 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代码示例来演示如何在自动化测试中使用这些定位方法。
173 1
|
8月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
149 0
|
10天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
83 24
|
5月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
73 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
48 6
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
51 5

热门文章

最新文章