个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
26
4
说到元素定位，小伙伴或者童鞋们肯定会首先想到 selenium 的八大元素定位大法。同理Playwright也有自己的元素定位的方法。今天就给小伙伴或者童鞋们讲解和分享一下Playwright的元素定位方法.
宏哥对UI自动化的理解：定位元素--->操作元素---->断言.
定位器（Locator）是 Playwright 的自动等待和重试能力的核心部分。定位器是一种随时在网页上查找元素的方法，用于在元素上执行诸如 .click、.fill 之类的操作。可以使用 page.locator(selector, **kwargs) 方法创建自定义定位器.
选择器（Selector）是用于创建定位器的字符串。Playwright 支持许多不同的选择器，比如 Text、CSS、XPath 等。阅读 in-depth guide 文档，了解更多关于可用的选择器以及如何进行选择的信息.
这些是 playwright 推荐的内置定位器.
当然除了这些，还有其他定位方法，selenium的8种by元素定位，id、xpath、css等都可使用，还有W3C标准规定的webDriver协议为5种定位方式CSS、Link text、Partial link text、Tag name、XPath 。
playwright把这些定位归类成3种，分别是：css、xpath、text.
如:
page.locator(
"
xpath=//h2
"
)
page.locator(
"
text=文本输入
"
)
page.locator(
"
#s-usersetting-top
"
)
page.locator(
"
input[name=\"wd\"]
"
).click()
page.get_by_role(
"
button
"
, name=
"
百度一下
"
).click()
page2.get_by_placeholder(
"
唱片名、表演者、条码、ISRC
"
).click()
page2.get_by_text(
"
或者，亲自来帮豆瓣添加：
"
).click()
官方文档给出一个登录系统的使用示例如下:
page.get_by_label(
"
User Name
"
).fill(
"
John
"
)
page.get_by_label(
"
Password
"
).fill(
"
secret-password
"
)
page.get_by_role(
"
button
"
, name=
"
Sign in
"
).click()
expect(page.get_by_text(
"
Welcome, John!
"
)).to_be_visible()
Playwright带有多个内置定位器。为了使测试具有弹性，我们建议优先考虑面向用户的属性和显式协定，例如page.get_by_role()。例如：以下 DOM 结构.
button通过名称为“登录”的角色定位元素.
page.get_by_role(
"
button
"
, name=
"
Sign in
"
).click()
每次将定位器用于操作时，都会在页面中找到一个最新的 DOM 元素。在下面的代码片段中，底层 DOM 元素将被定位两次，一次在每个动作之前。这意味着如果 DOM 由于重新渲染而在调用之间发生变化，则将使用与定位器对应的新元素.
locator = page.get_by_role(
"
button
"
, name=
"
Sign in
"
)
locator.hover()
locator.click()
请注意，所有创建定位器的方法（例如page.get_by_label() ）也可用于Locator和FrameLocator类，因此您可以将它们链接起来并迭代地缩小定位器的范围.
locator = page.frame_locator(
"
my-frame
"
).get_by_role(
"
button
"
, name=
"
Sign in
"
)
locator.click()
page.get_by_role ()定位器反映了用户和辅助技术如何感知页面，例如某个元素是按钮还是复选框。按角色定位时，通常还应传递可访问的名称，以便定位器准确定位元素.
例如，考虑以下 DOM 结构.
您可以通过其隐式角色定位每个元素:
expect(page.get_by_role(
"
heading
"
, name=
"
Sign up
"
)).to_be_visible()
page.get_by_role(
"
checkbox
"
, name=
"
Subscribe
"
).check()
page.get_by_role(
"
button
"
, name=re.compile(
"
submit
"
, re.IGNORECASE)).click()
角色定位器包括按钮、复选框、标题、链接、列表、表格等，并遵循ARIA 角色、ARIA 属性和可访问名称的 W3C 规范.
请注意：许多html元素如：<button>都有一个隐式定义的角色，该角色可被角色定位器识别.
请注意，角色定位器不会取代可访问性审核和一致性测试，而是提供有关 ARIA 指南的早期反馈.
我们建议优先使用角色定位器来定位元素，因为这是最接近用户和辅助技术感知页面的方式.
大多数表单控件通常都有专用标签，可以方便地用于与表单交互。在这种情况下，您可以使用page.get_by_label()通过其关联标签定位控件。例如：以下 DOM 结构.
您可以在通过标签文本定位后填写输入:
page.get_by_label(
"
Password
"
).fill(
"
secret
"
)
定位表单区域时，使用标签定位器.
输入可能具有占位符属性，以向用户提示应输入的值。您可以使用page.get_by_placeholder()定位此类输入。例如：以下 DOM 结构.
您可以在通过占位符文本定位后填充输入:
page.get_by_placeholder(
"
name@example.com
"
).fill(
"
playwright@microsoft.com
"
)
在定位没有标签但具有占位符文本的表单元素时，使用此定位器.
根据元素包含的文本查找元素。使用page.get_by_text()时，您可以通过子字符串、精确字符串或正则表达式进行匹配。例如:以下 DOM 结构.
您可以通过元素包含的文本来查找该元素:
expect(page.get_by_text(
"
Welcome, John
"
)).to_be_visible()
设置完全匹配:
expect(page.get_by_text(
"
Welcome, John
"
, exact=True)).to_be_visible()
与正则表达式匹配:
expect(page
.get_by_text(re.compile(
"
welcome, john
"
, re.IGNORECASE)))
.to_be_visible()
建议使用文本定位器来查找非交互式元素，如div, span, p 等。对于交互式元素，如请button, a, input, 使用角色定位器.
您还可以按文本进行筛选，这在尝试在列表中定位特定项目时很有用.
所有图像都应该有一个alt描述图像的属性。您可以使用page.get_by_alt_text()根据替代文本定位图像。例如:以下 DOM 结构.
可以在通过替代文本选项找到图像后单击它:
page.get_by_alt_text(
"
playwright logo
"
).click()
使用page.get_by_title()找到具有匹配 title 属性的元素。例如:以下 DOM 结构.
您可以在通过标题文本找到它后检查问题数:
expect(page.get_by_title(
"
Issues count
"
)).to_have_text(
"
25 issues
"
)
当您的元素具有该title属性时使用此定位器.
通过测试 ID 进行测试是最具弹性的测试方式，因为即使您的文本或属性角色发生变化，测试仍会通过。QA 和开发人员应该定义明确的测试 ID 并使用page.get_by_test_id()查询它们。但是，通过测试 ID 进行的测试不是面向用户的。如果角色或文本值对您很重要，那么请考虑使用面向用户的定位器，例如角色定位器和文本定位器。例如:以下 DOM 结构.
您可以通过它的测试 ID 定位到该元素:
page.get_by_test_id(
"
directions
"
).click()
当你选择使用测试id的方法，或者角色、文本无法定位时，你也可以使用测试id进行定位.
默认情况下，page.get_by_test_id()将根据data-testid属性定位元素，但您可以在测试配置中或通过调用selectors.set_test_id_attribute()对其进行配置.
设置测试 ID 以使用自定义数据属性进行测试.
playwright.selectors.set_test_id_attribute(
"
data-pw
"
)
在您的 html 中，您现在可以使用data-pwtest id 而不是 default data-testid.
然后像往常一样定位元素:
page.get_by_test_id(
"
directions
"
).click()
如果必须使用 CSS 或 XPath 定位器，则可以使用 page.locator（）创建一个定位器，该定位器采用描述如何在页面中定位元素的选择器。Playwright 支持 CSS 和 XPath 选择器，并在省略前缀 css=或 xpath= 时自动检测它们。它会自动判断你写的是css还是xpath语法，前提是你语法没有错误.
page.locator(
"
css=button
"
).click()
page.locator(
"
xpath=//button
"
).click()
page.locator(
"
button
"
).click()
page.locator(
"
//button
"
).click()
XPath 和 CSS 选择器可以绑定到 DOM 结构或实现。当 DOM 结构更改时，这些选择器可能会中断。下面的长 CSS 或 XPath 链是导致测试不稳定的 不良做法的示例:
page.locator(
"
#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input
"
).click()
page.locator(
'
//*[@id="tsf"]/div[2]/div[1]/div[1]/div/div[2]/input
'
).click()
不建议使用 CSS 和 XPath，因为 DOM 经常会发生变化，从而导致无弹性测试。相反，请尝试提出一个接近用户感知页面的定位器，例如角色定位器，或使用测试 ID 定义显式测试协定.
文本选择器是一个非常实用的定位方式，根据页面上看到的text文本就可以定位了，比如我们经常使用xpath 的文本选择器定位.
//*[text()="北京-宏哥"] //*[contains(text(),"北京-宏哥") playwright 封装了text文本定位的方式，也可以支持2种文本定位方式 。
page.click(
"
text=北京-宏哥
"
)
page.click(
"
text='北京-宏哥'
"
)
text=北京-宏哥和text='北京-宏哥'的区别:
text文本除了可以定位a标签，还可以定位 button 按钮，input标签的button 按钮，有value="百度一下" 文本值 。
<input type=button value=
"
百度一下
"
>
或者是button 标签的按钮 。
<button>百度一下</button>
HTML 属性选择器, 根据html元素的id 定位 。
page.fill(
"
id=kw
"
,
"
北京-宏哥
"
)
定位目标元素，我们有时候可以使用 >>（两个大于号） 连接不同的selector可组合使用，例如：我们定位百度首页的登录 。
#
id 属性+ css
page.fill(
'
form >> [name="username"]
'
,
"
北京-宏哥
"
)
page.fill(
'
form >> #TANGRAM__PSP_11__password
'
,
"
aa123456
"
)
page.click(
"
text=登录
"
)
form >> [name="username"] 定位方式等价于 。
#
page.fill('form >> [name="username"]', "北京-宏哥")
page.locator(
"
form
"
).locator(
'
[name="username"]
'
).fill(
"
北京-宏哥
"
)
相当于是根据父元素找到子元素了 。
登录按钮的值是 value="登录 > " ,可以用text文本定位的方式，模糊匹配到，这种人性化的设计提高了定位的效率.
<input id=
"
TANGRAM__PSP_11__submit
"
type=
"
submit
"
value=
"
登录
"
class
=
"
pass-button pass-button-submit
"
>
今天这一篇主要是讲解我们日常工作中在使用Playwright进行元素定位的一些比较常用的定位方法的理论基础知识以及在什么情况下推荐使用，当然了这不是一成不变的，希望大家在使用中可以灵活的应用.
好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助.
最后此篇关于《最新出炉》系列初窥篇-Python+Playwright自动化测试-5-元素定位大法-上篇的文章就讲到这里了,如果你想了解更多关于《最新出炉》系列初窥篇-Python+Playwright自动化测试-5-元素定位大法-上篇的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
ECharts是一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观、生动、可交互、可高度个性化定制
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文
作为一名ios开发攻城狮,在苹果没有出arc(自动内存管理机制)时,我们几乎有一半的开发时间都耗费在这么管理内存上.后来苹果很人性的出了arc,虽然在很大程度上,帮助我们开发者节省了精力和时间.但是
如何反转Pandas中DataSeries的排序顺序，以便我按降序使用它们？ 最佳答案 In [28]: s = pd.Series([20, 10, 30], ['c', 'a', 'b']) In
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Is jQuery $.browser Deprecated? 最新的 jQuery 库是否发生变化 $.brows
我正在开发一个 Intranet 项目，所以我无法复制/粘贴代码，所以希望我的描述和一些小片段会有所帮助。 我知道 MySQL 触发器无法做到这一点，但希望有一种干净的 JPA PrePersist(
这是数据集: 人员状态日期 埃里克 1 1/1/2015 埃里克 2 2/1/2015 埃里克 3 2015 年 3 月 1 日 约翰福音 1 3/1/2015 约翰福音 2 2015 年 2 月 1
现在我正在使用下面的查询按每篇文章的 auto_increment id 排序 mysql_query("SELECT * FROM articles ORDER BY id DESC"); 我想知道
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等方面的建议的问题。您可以编辑问题，以便用事实和引用来回答它。 关闭
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等方面的建议的问题。您可以编辑问题，以便用事实和引用来回答它。 关闭
现在我正在使用下面的查询按每篇文章的 auto_increment id 排序 mysql_query("SELECT * FROM articles ORDER BY id DESC"); 我想知道
在我们做文章的时候常用一些函数修改来实现自己的页面效果，例如，时间的自定义格式 我们常常需要乃至的，搜集了些有关时间格式的CODE，作大家为参考,希望对大家有些帮助 列表页list_article
我想将某些东西提交到 github 存储库，但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支，提交了我的更改并提交了一个 pull-request。 现在，问题是过了一段时间其他人已经
我是 SQL 新手，所以现有的答案对我来说有点复杂。 我有三张 table : WORKER |id |name |date |... JOB |id |name |salary |accept AP
我正在自动从PowerPoint和Excel电子表格中生成PowerPoint报表。在粘贴表格之前，我已经完成了整个过程。 我使用PPApp.CommandBars.ExecuteMso ("Past
我们有 1 个 Kafka 主题和 1 个分区: 从 spring boot kafka 消费者那里看到一个相当奇怪的行为。 Spring kafka消费者在重新启动时总是从主题的开头开始消费。 我已
通过编程从iOS照片库获取最新照片是否有技巧？ 我知道我可以按日期搜索，但是我必须每隔一微秒进行一次扫描，以便进行某种比较以准确地找到它。 有没有人做过这个或任何想法？ 最佳答案 我之前采取的一种方法
我们上周将 Web 应用程序中的 Telerik Kendo 库从 V2015.2.902 升级到 V2016.1.112。从那时起，我们注意到使用 Kendo 的页面需要很长时间才能加载(30 秒到
我有两个表: STUDENT GRADES ---------- ---------- id id name person_id ad
我是一名优秀的程序员,十分优秀！