登录
【Playwright学习笔记 07】其它用户视觉定位的方法
2026年1月23日 23:26
本文介绍了四种基于元素视觉属性的定位方法：1. 通过placeholder属性定位input元素，使用get_by_placeholder方法；2. 通过关联label定位元素，使用get_by_la
根据文本内容定位
Page/Locator 对象的 get_by_text 方法
比如，
如果要获取 所有 文本内容包含 11 的元素，就可以这样
elements = page.get_by_text('11').all()
如果，你希望包含的内容是以 11 结尾的，就可以使用正则表达式对象 作为参数，如下
import re
elements = page.get_by_text(re.compile("11$")).all()
根据 元素 role 定位
web应用现在有一种标准 称之为： ARIA （Accessible Rich Internet Applications）。
ARIA 根据web界面元素的用途，为这些元素定义了一套 角色（ Role ） 信息，添加到页面中，
从而 让 残疾人士，或者 普通人在 某种环境下（比如夜里，太空中），不方便使用常规方法操作应用，使用辅助技术工具，来操作web应用的。
若想定位这个元素：
<div class="alert-message">
您已成功注册，很快您将收到一封确认电子邮件
</div>
直接可以根据如下代码 定位该元素
# 根据 role 定位
lc = page.get_by_role('alert')
# 打印元素文本
print(lc.inner_text())
html元素中，有些 特定语义元素（semantic elements）被ARIA规范认定为自身就包含 ARIA role 信息，并不需要我们明显的加上 ARIA role 属性设置，
比如
<progress value="75" max="100">75 %</progress>
就等于隐含了如下信息
<progress value="75" max="100"
role="progressbar"
aria-valuenow="75"
aria-valuemax="100">75 %</div>
所以，直接可以根据如下代码 定位该元素
# 根据 role 定位
lc = page.get_by_role('progressbar')
# 打印元素属性 value 的值
print(lc.get_attribute('value'))
再比如 search 类型的输入框，默认就有 searchbox role，
<input type="search">
ARIA Attribute
ARIA规范除了可以给元素添加 ARIA role ，还可以添加其它 ARIA属性（ARIA attributes） ，比如
<div role="heading" aria-level="1">白月黑羽标题1</div>
<div role="heading" aria-level="2">白月黑羽标题2</div>
aria-level 就是一个 ARIA 属性，表示 role 为 heading 时的 等级 信息
上面的定义，其实和下面的 html 元素 h1/h2 等价
<h1>白月黑羽标题1</h1>
<h2>白月黑羽标题2</h2>
上例中，h2 元素，隐含了 role="heading" aria-level="2" ， 所以可以用下面代码定位
lc = page.get_by_role('heading',level=2)
print(lc.inner_text())
Accessible Name
只根据 ARIA role 和 ARIA属性 往往并不能唯一定位元素。
role定位最常见的组合是 ARIA role 和 Accessible Name
因为，Accessible Name 就像元素的 名字 一样，往往可以唯一定位。
html 元素标准属性 name 是浏览器内部的，用户看不到，比如
Accessible Name 不一样，它是元素界面可见的文本名，
<a name='link2byhy' href="https://www.byhy.net">白月黑羽教程</a>
比如上面的元素，暗含的 Accessible Name 值就是 白月黑羽教程 ， 当然也暗含了 ARIA role 值为 link
所以，可以这样定位
lc = page.get_by_role('link',name='白月黑羽教程')
print(lc.click())
上面的写法， 只要 Accessible Name 包含 参数name 的字符串内容即可，而且大小写不分， 并不需要完全一致。
所以，这样也可以定位到
lc = page.get_by_role('link',name='白月黑羽')
如果你需要 Accessible Name 和 参数name 的内容完全一致，可以指定 exact=True ，如下
lc = page.get_by_role('link',name='白月黑羽', exact=True)
name值还可以通过正则表达式，进行较复杂的匹配规则，比如
lc = page.get_by_role('link',name=re.compile("^白月.*羽"))
我们这里说一些常见的：
<a> <td> <button> Accessible Name 值 就是其内部的文本内容。
<textarea> <input> 这些输入框，它们的 Accessible Name 值 是和他们关联的 的文本。
比如：
<label>
<input type="checkbox" /> Subscribe
</label>
这个 checkbox 的 Accessible Name 却是 Subscribe
一些元素 比如 <img> ，它的 Accessible Name 是其html 属性 alt 的值
比如
<img src="grape.jpg" alt="banana"/>
role定位代码复杂，建议使用codegen代码助手来完成
