如何使用Puppeteer和CSS选择器定位动态ID元素？

你原来用的#select2-*-container写法无效，因为CSS选择器中#后需要精确匹配ID值，*在这里不具备通配符作用。推荐以下几种可行的定位方式：

1. CSS属性前缀+后缀匹配 #

利用CSS属性选择器的^=（匹配属性开头）和$=（匹配属性结尾）组合，精准定位ID格式固定的元素：

// Puppeteer写法
const element = await page.$('span[id^="select-"][id$="-container"]');

// 页面上下文直接执行的写法
const select = document.querySelector('span[id^="select-"][id$="-container"]');

该选择器会匹配所有ID以select-开头、以-container结尾的<span>元素，完全适配ID中间的随机字符串。

2. 基于固定文本内容定位 #

如果元素内的文本（比如示例里的"Text"）固定不变，用XPath定位会更可靠：

// Puppeteer中使用XPath匹配精确文本
const [element] = await page.$x('//span[text()="Text"]');

// 若文本是部分匹配，改用contains
const [element] = await page.$x('//span[contains(text(), "Text")]');

3. 基于元素层级关系定位 #

如果这个动态ID元素的父/兄弟元素有固定标识（比如固定类名、ID），可以通过层级关联定位：
假设父元素有固定类fixed-parent，写法如下：

const element = await page.$('.fixed-parent > span[id^="select-"][id$="-container"]');

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