新一代最强开源UI自动化测试神器 Playwright

Playwright跟Selenium在使用过程中其实非常相似，Playwright也是通过元素定位来实现各种功能的，我们来看下Playwright有哪些元素定位方式。

文本定位

使用文本定位时，直接使用text=文本，例如定位登录按钮，我们可以使用“登录”关键字定位

page.locator("text=登录").click()

CSS定位

如id=nav-bar .contact-us-item

page.locator("#nav-bar .contact-us-item").click()

元素属性定位

如点击“百度一下”，我们可以使用[value=‘百度一下’]定位

page.locator("[value='百度一下']").click()

CSS和文本组合定位

1.:has-text()

has-text() 伪类可以在 css 选择器中使用。它匹配任何包含指定文本的元素，这些文本可能位于子元素中。匹配不区分大小写，并搜索子字符串。例如span:has-text(‘百度一下’)匹配百度一下

page.locator("span:has-text('百度一下')").click()

2.伪类:has()

父元素包含子元素，如点击id为s-top-left的元素下包含的第二个a标签

page.locator("#s-top-left:has(a) > a:nth-child(2)").click()

3.伪类:is()

选择其中任何一个元素，点击【新闻】,如果“新闻”不存在，则点击“News”

page.click(':is(a:has-text("新闻"), a:has-text("News"))')

布局选择器定位

有时，当目标元素缺乏独特的特征时，很难为它想出一个好的选择器。在这种情况下，使用 Playwright 布局选择器可能会有所帮助。这些可以与常规 CSS 结合使用。

例如如下代码匹配文本“用户名”右侧的输入字段 - 当页面有多个难以相互区分的输入时很有用。

page.locator("input:right-of(:text('Username'))").click()

:right-of(inner > selector)- 在任何垂直位置匹配与内部选择器匹配的任何元素右侧的元素。
:left-of(inner > selector)- 在任何垂直位置匹配与内部选择器匹配的任何元素左侧的元素。
:above(inner > selector)- 匹配任何水平位置上匹配内部选择器的任何元素之上的元素。
:below(inner > selector)- 在任何水平位置匹配位于与内部选择器匹配的任何元素下方的元素。
:near(inner > selector)- 匹配与内部选择器匹配的任何元素附近（在 50 CSS 像素内）的元素。

# 在“Username”右侧输入TesterRoad
page.locator("input:right-of(:text(\"Username\"))").fill(TesterRoad)# 点击 promo card 附近的一个按钮
page.locator("button:near(.promo-card)").click()# 点击 "Label 3"左侧最近的单选按钮
page.locator("[type=radio]:left-of(:text(\"Label 3\"))").first.click()

注意：布局选择器取决于页面布局，当页面布局发生变化时，元素定位可能会失败。

元素可见性定位

Playwright有两种方法定位可见元素：

1.:visible CSS 选择器中的伪类

2.visible=选择器引擎

如下页面有两个按钮，第一个按钮不可见，第二个按钮可见

<button style='display: none'>Invisible</button>
<button>Visible</button>

点击第二个按钮

page.locator("button:visible").click()
page.locator("button >> visible=true").click()

定位第N个元素

有时页面包含许多相似的元素，很难选择一个特定的元素。例如：

<section> <button>Buy</button> </section>
<article><div> <button>Buy</button> </div></article>
<div><div> <button>Buy</button> </div></div>

我们可以使用:nth-match(:text(“Buy”), 3)从上面的HTML中选择第三个按钮。注意，索引是从一开始的。

# 点击第三个按钮 Bug
page.locator(":nth-match(:text('Buy'), 3)").click()

xpath定位

# 百度首页，使用 xpath 定位输入框，并输入“mrjade”
page.fill("//input[@name='wd']", "mrjade")
# 或者
page.fill("xpath=//*[@id='kw']","mrjade")

总结

Playwright和Selenium的元素定位方法有相似之处，因为都是对相同的WEB页面元素进行定位，所以差别不大，区别在于它们的定位方式，Selenium对每种选择器提供了对应的方法，而Playwright只需要写定位表达式就可以了，不需要指定具体方法。从这一点来看，Playwright是非常方便的。

资源分享

下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码，朋友们如果需要可以自行免费领取 【保证100%免费】

新一代最强开源UI自动化测试神器 Playwright - 元素定位相关推荐

2022年新一代最强开源UI自动化测试神器 ——Playwright（三）
感谢您抽出 . . 阅读本文一.playwright 脚本调试 Playwright提供了degbug工具,用于脚本调试. Playwright Inspector是一个GUI工具,可帮助修改和调试 ...
2022年新一代最强开源UI自动化测试神器（一）
感谢您抽出阅读本文一.Playwright简介 Playwright是微软开源的新一代自动化测试工具.类似于主流的Selenium. Playwright为现代Web应用程序提供可靠的端到端的自动 ...
UI自动化测试之八大元素定位方法（最新版）
Selenium-UI自动化测试之八大元素定位方法(最新版) 前言 UI界面本质上就是HTML直接体现,脚本通过HTML标签信息来找到具体的元素. 元素定位:通过代码调用方法查找元素一.ID定位概 ...
Android app UI自动化测试常用的元素定位方法
本文简要介绍了移动端Android APP进行UI自动化测试时,常用到的元素定位方法目录前言一.通过resource-id定位二.通过class name定位三.通过accessibilit ...
APP UI 自动化测试 H5页面元素定位
使用 uc-devtools 代替 uiautomatorviewer 查找定位H5元素由于uiautomatorviewer 只能定位APP原生页面: 所以要定位app H5 页面内的元素使用 ...
ADB投屏_最强开源投屏神器，跨平台电脑控制+文件传输——scrcpy
介绍 scrcpy是一个开源的跨平台投屏神器,支持Linux.Windows以及MacOS(本文介绍的scrapy不是Python下的那个爬虫框架),scrcpy在Github上非常的受欢迎,Star ...
自动化测试8大元素定位之xpath语法
8大元素定位 tag_name:通过标签名称,找出来的元素太多了 name:用户输入input,不出意外总会有name属性 class_name id: 1.同一个页面当中,某个id只能用一次, 2. ...
Appium 自动化测试 H5页面元素定位
简介在现在的移动端App中,由于开发效率.需求频繁变更的需求情况下,经常有相关的运营需求,经常要进行更新,如果全部采用原生开发,需要的成本比较高,后来就出现了内嵌的H5页面.那么这些H5页面元素 ...
通用AI元素识别在UI自动化测试的最佳实践
前言在UI自动化测试中,元素被识别出来后,才能更加精确地模拟相关用户行为,才能更好地开展自动化的其他内容.一般移动端APP会有页面元素属性,比如:ID,ClassName,Text等,可以方便定位需 ...
UI自动化测试 - POM设计模式
一.介绍基于selenium 的ui自动化测试核心上只要定位到元素,对元素执行相应的操作即可.例如下面的脚本代码:打开Chrome浏览器,在百度页面搜索自动化测试: from selenium im ...

新一代最强开源UI自动化测试神器 Playwright - 元素定位

总结

资源分享

新一代最强开源UI自动化测试神器 Playwright - 元素定位相关推荐

最新文章

热门文章