构建工具生成的类名常带随机后缀，例如 card_wrapper_9f3a，完整类名每次构建都变。定位时不必拼完整字符串，按固定片段匹配即可，CSS 属性选择器优先。
两种写法
// CSS 属性选择器，推荐
await page.locator('[class*="_wrapper_"]').click();
// XPath，用于按文本或跨层级匹配
await page.locator('xpath=//*[contains(@class, "_wrapper_")]').click();
属性选择器的三种匹配方式按需要选择：[class^=] 匹配开头，[class$=] 匹配结尾，[class*=] 匹配任意位置。类名前缀固定时用前两种更精确。
三条注意点
- 优先用 CSS 属性选择器。表达式更短，执行与报错信息都更清晰；XPath 留给按可见文本、按层级关系定位的场景。
- 收窄范围。在容器元素下再查目标，避免页面上多个同名片段被一起命中。
- 配合等待。动态渲染的界面要先等元素进入可交互状态再操作，否则匹配到的是占位节点。
两类不推荐的写法
- 按位置索引定位，例如取第三个匹配项。DOM 顺序一变，脚本就指向别的元素。
- 依赖完整类名字符串。构建产物更新后类名后缀变化，定位直接失效。
调试顺序
先在浏览器控制台用同一个表达式验证命中数量，确认唯一后再写进脚本。命中多个时补父级范围或改用数据属性；页面本身没有稳定属性时，与前端约定补一个 data-testid，比适配随机类名更持久。