如何通过固定前缀类名定位元素？Playwright定位报错解决

你的报错是因为字符串引号冲突导致的语法错误——外层用了单引号，内部的_wrapper_也用单引号，JS/TS会把它当成未定义的变量。下面给你几种可行的解决方法：

方法1：修正XPath的引号问题 #

把内部的单引号换成双引号，或者转义单引号，就能解决语法错误：

// 用双引号包裹内部字符串
await page.locator('div[contains(@class,"_wrapper_")]')

// 或者转义单引号
await page.locator('div[contains(@class,\'_wrapper_\')]')

不过这种contains写法有个小问题：如果有其他类名包含_wrapper_子串（比如abc_wrapper_def），也会被误匹配。

方法2：用CSS属性选择器（更推荐） #

CSS原生支持前缀匹配和包含匹配，性能比XPath更好，还能更精准控制：

• 匹配类名以_wrapper_开头的div：

await page.locator('div[class^="_wrapper_"]')

• 更严谨的写法：考虑类名可能不是第一个的情况（比如<div class="other_class _wrapper_xxx">），同时匹配开头和中间包含的情况：

await page.locator('div[class^="_wrapper_"], div[class*=" _wrapper_"]')

这里[class*=" _wrapper_"]匹配类名中有空格加_wrapper_的情况，避免误匹配其他包含该子串的类名。

方法3：用Playwright的filter方法（灵活正则匹配） #

如果需要更复杂的匹配逻辑，可以用filter结合正则表达式：

// 匹配类名以_wrapper_开头的div
await page.locator('div').filter({ hasClass: /^_wrapper_/ })

// 匹配类名中包含_wrapper_的div（不管位置）
await page.locator('div').filter({ hasClass: /_wrapper_/ })

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