如何使用getByRole('row')定位带有row-id="1"的div元素？

给出的HTML结构：

...
<div class="table">
  <div role="row" row-id="1">...</div>
  <div role="row" row-id="2">...</div>
</div>
...

我尝试用getByRole('row').filter('[row-id="1"]')时，发现filter似乎只作用于子元素，无法生效。但根据Playwright文档，filter定位器“从外部定位器匹配项开始查询”，理论上应该可行，我是不是忽略了什么？另外，无法使用getByRole()的options.name参数。

解决方法 #

你可以通过两种方式实现需求：

1. 使用:scope伪类指定筛选当前元素本身
   Playwright的filter默认会从匹配元素的子节点开始查询，加上:scope伪类就能明确针对外部定位器匹配的row元素本身进行属性筛选：

   page.getByRole('row').filter(':scope[row-id="1"]')
   

2. 直接组合role与属性的CSS选择器
   如果你觉得filter写法麻烦，也可以直接把role和row-id属性组合成一个CSS选择器，用locator方法定位：

   page.locator('[role="row"][row-id="1"]')
   

之所以之前的写法不生效，是因为不带:scope的filter查询会默认向下查找子元素，而不是针对当前匹配的row元素本身进行判断，这就是你忽略的关键细节。

内容的提问来源于stack exchange，提问作者Sirea