### [按类名片段定位元素：选择器写法](https://www.huociguo.com/article/1579)

**Published:** 2026-10-01T10:43:46

**Author:** 米了

**Excerpt:** 类名带随机后缀时，CSS 属性选择器就能按片段匹配，XPath 留给按文本或跨层级的场合。含两种写法与三条注意…

构建工具生成的类名常带随机后缀，例如 `card_wrapper_9f3a`，完整类名每次构建都变。定位时不必拼完整字符串，按固定片段匹配即可，CSS 属性选择器优先。

![屏幕上的编程代码特写，用于说明按类名片段定位元素](https://api.huociguo.com/wp-content/uploads/2026/10/d2.jpg)

固定前缀加随机后缀的类名，按片段匹配最稳

## 两种写法

```js
// CSS 属性选择器，推荐
await page.locator('[class*="_wrapper_"]').click();

// XPath，用于按文本或跨层级匹配
await page.locator('xpath=//*[contains(@class, "_wrapper_")]').click();
```

属性选择器的三种匹配方式按需要选择：`[class^=]` 匹配开头，`[class$=]` 匹配结尾，`[class*=]` 匹配任意位置。类名前缀固定时用前两种更精确。

## 三条注意点

1.  优先用 CSS 属性选择器。表达式更短，执行与报错信息都更清晰；XPath 留给按可见文本、按层级关系定位的场景。
2.  收窄范围。在容器元素下再查目标，避免页面上多个同名片段被一起命中。
3.  配合等待。动态渲染的界面要先等元素进入可交互状态再操作，否则匹配到的是占位节点。

## 两类不推荐的写法

-   按位置索引定位，例如取第三个匹配项。DOM 顺序一变，脚本就指向别的元素。
-   依赖完整类名字符串。构建产物更新后类名后缀变化，定位直接失效。

## 调试顺序

先在浏览器控制台用同一个表达式验证命中数量，确认唯一后再写进脚本。命中多个时补父级范围或改用数据属性；页面本身没有稳定属性时，与前端约定补一个 `data-testid`，比适配随机类名更持久。

**Tags:** class选择器, XPath, 元素定位, 开发者工具, 自动化测试

**Categories:** HTML5

---