Puppeteer中如何获取元素类名并判断是否包含expanded类

报错原因 #

你的代码报错是因为page.$()是异步API，必须加await才能拿到真实的DOM元素句柄（ElementHandle），未加await时selector变量是Promise实例，本身没有getProperty方法。

最优方案：直接判断元素是否包含expanded类 #

使用page.$eval可以一次性完成判断，无需单独操作元素句柄，代码更简洁：

const menuSelector = 'body > div.main-sidebar > ul.navbar > li:nth-child(5) > h3'
// 元素存在且包含expanded类返回true，元素不存在或无对应类返回false
const isMenuExpanded = await page.$eval(
  menuSelector,
  el => el.classList.contains('expanded')
).catch(() => false)

末尾的catch用来兼容元素不存在的场景，避免抛出异常，你可以根据业务需求调整异常处理逻辑。

可选方案：获取元素所有类名 #

如果你需要拿到该元素的全量类名列表，可以使用如下写法：

const menuSelector = 'body > div.main-sidebar > ul.navbar > li:nth-child(5) > h3'
// 等待元素加载完成后获取元素句柄
const menuElement = await page.waitForSelector(menuSelector)
// 获取className属性并转为字符串
const className = await (await menuElement.getProperty('className')).jsonValue()
// 分割得到类名数组
const classList = className.split(' ')
// 判断是否展开
const isMenuExpanded = classList.includes('expanded')
console.log('元素所有类名：', classList)

适配动画场景的补充方案 #

如果菜单展开有动画过渡，可以直接用page.waitForSelector等待元素变为指定状态：

// 最多等待2秒，直到菜单变为展开状态
await page.waitForSelector(`${menuSelector}.expanded`, { timeout: 2000 })

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