在 Playwright 中，可通过 XPath 的 starts-with() 函数定位类名以固定前缀（如 _wrapper_）开头的元素，避免因动态后缀（如 _12npv_9）导致定位失败。
在 playwright 中，可通过 xpath 的 `starts-with()` 函数定位类名以固定前缀（如 `_wrapper_`）开头的元素，避免因动态后缀（如 `_12npv_9`）导致定位失败。
当 HTML 元素的 class 属性为动态拼接形式（例如 <div class="_wrapper_12npv_9">），其中 _wrapper_ 恒定而后续部分随构建变更时，直接使用 CSS 选择器（如 [class^="_wrapper_"]）虽可行，但需注意：Playwright 的 locator() 方法默认优先解析为 CSS 选择器；若传入 XPath 表达式，则必须显式以 // 开头，否则会被误判并报错（如 Cannot find name '_wrapper_'）。
✅ 正确的 XPath 写法如下（推荐使用 starts-with，语义更精确、性能略优）：
<code class="ts">await page.locator("//div[starts-with(@class, '_wrapper_')]");</code>⚠️ 常见错误及修正：
- ❌ 错误：
'div[contains(@class,'_wrapper_')]'
→ 缺少//前缀，且单引号嵌套导致语法错误； - ❌ 错误：
'[class*="_wrapper_"]'（CSS 写法）
→ 虽能匹配含_wrapper_的任意位置，但可能误命中my_wrapper_foo等非目标元素； - ✅ 更健壮的 CSS 替代方案（如偏好纯 CSS）：
<code class="ts">await page.locator('div[class^="_wrapper_"]');</code>
? 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
starts-with(@class, ...)匹配的是class属性字符串的起始位置，适用于class值为单一类名（如_wrapper_abc）的场景； - 若元素有多个类（如
class="_wrapper_abc theme-dark"），@class值包含空格，此时starts-with将失效——应改用contains(concat(' ', @class, ' '), ' _wrapper_ ')或更可靠的策略（如添加data-testid属性）； - 生产环境强烈建议与开发协同，在动态类名组件上增加稳定属性（如
data-testid="wrapper-root"），从根本上提升定位稳定性与可维护性。
综上，针对纯前缀匹配场景，优先使用 //div[starts-with(@class, '_wrapper_')]；若存在多类名或长期维护需求，请推动补充语义化测试属性。
