【Playwright学习笔记 06】用户视觉定位的方法

根据文本内容定位

Page/Locator 对象的 get_by_text 方法

比如,

如果要获取 所有 文本内容包含 11 的元素,就可以这样

python 复制代码
elements = page.get_by_text('11').all()

如果,你希望包含的内容是以 11 结尾的,就可以使用正则表达式对象 作为参数,如下

python 复制代码
import re
elements = page.get_by_text(re.compile("11$")).all()

根据 元素 role 定位

web应用现在有一种标准 称之为: ARIA (Accessible Rich Internet Applications)。

ARIA 根据web界面元素的用途,为这些元素定义了一套 角色( Role ) 信息,添加到页面中,

从而 让 残疾人士,或者 普通人在 某种环境下(比如夜里,太空中),不方便使用常规方法操作应用,使用辅助技术工具,来操作web应用的。

若想定位这个元素:

html 复制代码
<div class="alert-message">
  您已成功注册,很快您将收到一封确认电子邮件
</div>

直接可以根据如下代码 定位该元素

python 复制代码
# 根据 role 定位
lc = page.get_by_role('alert')

# 打印元素文本
print(lc.inner_text())

html元素中,有些 特定语义元素(semantic elements)被ARIA规范认定为自身就包含 ARIA role 信息,并不需要我们明显的加上 ARIA role 属性设置,

比如

html 复制代码
<progress value="75" max="100">75 %</progress>

就等于隐含了如下信息

html 复制代码
<progress value="75" max="100"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemax="100">75 %</div>

所以,直接可以根据如下代码 定位该元素

python 复制代码
# 根据 role 定位
lc = page.get_by_role('progressbar')

# 打印元素属性 value 的值
print(lc.get_attribute('value'))

再比如 search 类型的输入框,默认就有 searchbox role,

python 复制代码
<input type="search">

ARIA Attribute

ARIA规范除了可以给元素添加 ARIA role ,还可以添加其它 ARIA属性(ARIA attributes) ,比如

html 复制代码
<div role="heading" aria-level="1">白月黑羽标题1</div>
<div role="heading" aria-level="2">白月黑羽标题2</div>

aria-level 就是一个 ARIA 属性,表示 role 为 heading 时的 等级 信息

上面的定义,其实和下面的 html 元素 h1/h2 等价

html 复制代码
<h1>白月黑羽标题1</h1>
<h2>白月黑羽标题2</h2>

上例中,h2 元素,隐含了**role="heading" aria-level="2"**, 所以可以用下面代码定位

python 复制代码
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 不一样,它是元素界面可见的文本名,

python 复制代码
<a name='link2byhy' href="https://www.byhy.net">白月黑羽教程</a>

比如上面的元素,暗含的**Accessible Name** 值就是 白月黑羽教程 , 当然也暗含了 ARIA role 值为 link

所以,可以这样定位

python 复制代码
lc = page.get_by_role('link',name='白月黑羽教程')
print(lc.click())

上面的写法, 只要 Accessible Name 包含 参数name 的字符串内容即可,而且大小写不分, 并不需要完全一致。

所以,这样也可以定位到

python 复制代码
lc = page.get_by_role('link',name='白月黑羽')

如果你需要 Accessible Name 和 参数name 的内容完全一致,可以指定 exact=True ,如下

python 复制代码
lc = page.get_by_role('link',name='白月黑羽', exact=True)

name值还可以通过正则表达式,进行较复杂的匹配规则,比如

python 复制代码
lc = page.get_by_role('link',name=re.compile("^白月.*羽"))

我们这里说一些常见的:

<a> <td> <button> Accessible Name 值 就是其内部的文本内容。

<textarea> <input> 这些输入框,它们的 Accessible Name 值 是和他们关联的 的文本。

比如:

html 复制代码
<label>
  <input type="checkbox" /> Subscribe
</label>

这个 checkbox 的 Accessible Name 却是 Subscribe

一些元素 比如 <img> ,它的 Accessible Name 是其html 属性 alt 的值

比如

html 复制代码
<img src="grape.jpg" alt="banana"/>

role定位代码复杂,建议使用codegen代码助手来完成

相关推荐
Century_Dragon15 分钟前
让新能源故障诊断实训“触手可及“——仿真教学软件(VR)介绍
学习
江屿风30 分钟前
【Git-组件】【Git入门:从文档灾难到版本掌控】流食般投喂
运维·笔记·git·组件·版本控制
楚山之石1 小时前
【Radiology】影像组学的标准化与可重复性:IBSI 卷积滤波器共识及其未能覆盖的环节
人工智能·学习·机器学习·mri
小李不想当小白2 小时前
HAL库之UART(STM32 HAL库学习笔记)
笔记·stm32·单片机·嵌入式硬件·学习·嵌入式
旖旎夜光3 小时前
【C++ 基础入门】C++ 多态(中):虚函数表、多态原理与动静绑定
开发语言·c++·笔记·学习
旖旎夜光4 小时前
【C++ 基础入门】C++多态(下):单/多继承虚表、多态补充与 21 道高频题
开发语言·c++·笔记·学习
叼烟扛炮9 小时前
[LangChain] 学习笔记(07):大模型长出手脚——工具(Tools)定义与调用闭环
笔记·学习·langchain
叼烟扛炮13 小时前
[LangChain] 学习笔记(06):突破大模型限制——结构化输出(Structured Output)
windows·笔记·学习·langchain
且从容.14 小时前
VUE3学习笔记(根据黑马教程总结)
笔记·学习
蒸蒸yyyyzwd16 小时前
关于 AI 开发相关的一些面经。
笔记·学习