个人中心
文章发布
退出
作者热门文章
- 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
我获得了一些源代码示例，我想测试一些功能。不幸的是，我在执行程序时遇到问题: 11:41:31 [linqus@ottsrvafq1 example]$ javac -g test/test.jav
我想测试ggplot生成的两个图是否相同。一种选择是在绘图对象上使用all.equal，但我宁愿进行更艰巨的测试以确保它们相同，这似乎是identical()为我提供的东西。 但是，当我测试使用相同d
我确实使用 JUnit5 执行我的 Maven 测试，其中所有测试类都有 @ExtendWith({ProcessExtension.class}) 注释。如果是这种情况，此扩展必须根据特殊逻辑使测试
在开始使用 Node.js 开发有用的东西之前，您的流程是什么？您是否在 VowJS、Expresso 上创建测试？你使用 Selenium 测试吗？什么时候？ 我有兴趣获得一个很好的工作流程来开发我
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 3 年前。 基于示例here ，我尝试为我的
我正在考虑测试一些 Vue.js 组件，作为 Laravel 应用程序的一部分。所以，我有一个在 Blade 模板中使用并生成 GET 的组件。在 mounted 期间请求生命周期钩子(Hook)。假
考虑以下程序: #include struct Test { int a; }; int main() { Test t=Test(); std::cout<
我目前的立场是:如果我使用 web 测试(在我的例子中可能是通过 VS.NET'08 测试工具和 WatiN)以及代码覆盖率和广泛的数据来彻底测试我的 ASP.NET 应用程序，我应该不需要编写单独的
我正在使用 C#、.NET 4.7 我有 3 个字符串，即。 [test.1, test.10, test.2] 我需要对它们进行排序以获得: test.1 test.2 test.10 我可能会得到
我有一个 ID 为“rv_list”的 RecyclerView。单击任何 RecyclerView 项目时，每个项目内都有一个可见的 id 为“star”的 View 。 我想用 expresso
我正在使用 Jest 和模拟器测试 Firebase 函数，尽管这些测试可能来自竞争条件。所谓 flakey，我的意思是有时它们会通过，有时不会，即使在同一台机器上也是如此。 测试和函数是用 Type
我在测试我与 typeahead.js ( https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js
我正在尝试使用 Teamcity 自动运行测试，但似乎当代理编译项目时，它没有正确完成，因为当我运行运行测试之类的命令时，我收到以下错误: fatal error: 'Pushwoosh/PushNo
这是我第一次玩 cucumber ，还创建了一个测试和 API 的套件。我的问题是在测试 API 时是否需要运行它？ 例如我脑子里有这个， 启动 express 服务器作为后台任务 然后当它启动时(我
我有我的主要应用程序项目，然后是我的测试的第二个项目。将所有类型的测试存储在该测试项目中是一种好的做法，还是应该将一些测试驻留在主应用程序项目中？ 我应该在我的主项目中保留 POJO JUnit(测试
我正在努力弄清楚如何实现这个计数。模型是用户、测试、等级 用户 has_many 测试，测试 has_many 成绩。 每个等级都有一个计算分数(strong_pass、pass、fail、stron
我正在尝试测试一些涉及 OkHttp3 的下载代码，但不幸失败了。目标:测试 下载图像文件并验证其是否有效。平台:安卓。此代码可在生产环境中运行，但测试代码没有任何意义。 产品代码 class Fil
当我想为 iOS 运行 UI 测试时，我收到以下消息: SetUp : System.Exception : Unable to determine simulator version for X 堆
我正在使用 Firebase Remote Config 在 iOS 上设置 A/B 测试。 一切都已设置完毕，我正在 iOS 应用程序中读取服务器端默认值。 但是在多个模拟器上尝试，它们都读取了默认
[已编辑]:我已经用 promise 方式更改了我的代码。 我正在写 React with this starter 由 facebook 创建，我是测试方面的新手。 现在我有一个关于图像的组件，它有
我是一名优秀的程序员,十分优秀！