精通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的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
221 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代码示例来演示如何在自动化测试中使用这些定位方法。
409 1
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
307 0
|
12月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
895 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
802 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1239 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
309 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
668 33

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    527
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    409
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    403
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    262
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    516
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    693
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1254
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    281
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1048
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    480