为何Playwright将<th>标签的ARIA角色识别为cell而非columnheader？

Playwright推荐通过面向用户的属性和显式约定（比如page.getByRole()）定位页面元素。但在定位<th>标签时会出现矛盾：Chrome开发者工具无障碍面板和MDN文档都显示<th>的ARIA角色应为columnheader，但使用page.getByRole('columnheader')却无法找到元素，反而用cell角色能成功定位。

复现代码 #

<table>
  <thead><tr><th>Header</th></tr></thead>
  <tbody><tr><td>Value</td></tr></tbody>
</table>

原因分析 #

核心问题出在浏览器无障碍树的实际判定逻辑与理论文档的差异：

• 虽然MDN明确<th>的默认ARIA角色是columnheader，但当<th>未明确设置scope属性时，部分浏览器的无障碍树会弱化其表头语义，将其归类为普通cell角色。
• Playwright的getByRole()严格遵循页面运行时的无障碍树状态，而非理论上的标签默认角色；而Chrome开发者工具的无障碍面板可能展示的是标签的默认语义，并非实际运行时的无障碍树节点角色。

解决方法 #

给<th>添加明确的scope属性，让浏览器无障碍树正确识别其表头角色：

<table>
  <thead><tr><th scope="col">Header</th></tr></thead>
  <tbody><tr><td>Value</td></tr></tbody>
</table>

此时使用page.getByRole('columnheader')就能准确定位到该<th>元素。

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