bem类名不能直接作playwright定位依据，因其属css实现细节、缺乏语义且易随样式重构变更；应优先使用page.get_by_role()等语义化方法，仅当bem类名作为约定“语义锚点”或元素完全无文本/aria时才谨慎使用css选择器。
为什么BEM类名不能直接当Playwright定位依据
BEM类名（如 product-card__title--highlighted）本质是CSS实现细节，不是用户可见语义。Playwright官方明确建议：优先用 page.get_by_role()、page.get_by_label() 等语义化方法，而非依赖类名。因为BEM类名可能随样式重构批量变更——比如团队把 btn--primary 升级为 button--solid，所有基于 .btn--primary 的 locator 全挂，但 page.get_by_role('button', { name: '提交' }) 依然有效。
哪些BEM场景下可以安全用CSS选择器
只有满足以下全部条件时，才考虑用BEM类名写CSS选择器：
- 该类名是团队约定的“语义锚点”，比如
data-testid被强制映射到BEM结构（如data-testid="user-profile__avatar"），且CI中用stylelint-selector-bem-pattern拦截非法拼写 - 目标元素完全无文本、无ARIA属性、无label关联（极少见），且必须靠视觉结构定位，例如某个纯图标按钮的容器：
page.locator('.icon-button--delete') - 你控制着前端代码，且已配置Playwright的
testIdAttribute为data-testid，而BEM类名被同步注入为该属性值
否则，.card__body--collapsed 这类带状态修饰符的类名，几乎必然在展开/收起后失效——因为DOM里这个类名会动态增删。
如何把BEM“翻译”成Playwright推荐定位方式
与其匹配类名，不如提取BEM结构里隐含的用户语义：
-
search-form__input→ 用page.get_by_label('搜索关键词')或page.get_by_placeholder('请输入商品名称') -
product-list__item→ 不要写page.locator('.product-list__item').nth(0)，改用page.locator('article').filter({ hasText: 'iPhone 15' }).get_by_role('button', { name: '加入购物车' }) -
nav-main__link--active→ 直接用page.get_by_role('link', { name: '首页', selected: true })，比依赖修饰符更可靠
关键点：BEM的 __element 部分（如 __input）往往对应可访问性角色，--modifier（如 --active）往往对应ARIA状态（selected, expanded），这才是Playwright真正能稳定识别的信号。
遇到BEM类名动态拼接时的硬解法
React/Vue项目里常见 className={clsx('btn', { 'btn--primary': isPrimary })}，导致类名不固定。此时：
- 禁止用
page.locator('.btn--primary')——它只在isPrimary === true时存在 - 改用组合定位：
page.locator('.btn').filter({ has: page.locator('text=提交') })，先抓所有按钮，再按文本筛选 - 或升级到Playwright 1.52+的伪类：
page.locator('button:has-text("提交"):is(.btn)')，利用:is()匹配任意一个条件成立 - 终极方案：推动前端在按钮上加
data-testid="submit-btn"，然后统一走page.get_by_test_id('submit-btn')
真正难的不是写对选择器，而是判断这个BEM类名到底承载的是样式责任，还是接口契约——前者随时会变，后者才值得写进测试脚本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
