如何断言Puppeteer中指定ID元素的类名包含指定字符串？

嘿，这个问题我之前踩过坑！你现在的代码报错，核心原因是getProperty('className')返回的不是你以为的字符串，而是一个JSHandle对象——这是Playwright用来表示浏览器端JS对象的包装器，直接用expect(...).toContain()自然会判断失败。

给你几个可行的解决办法，按推荐度排序：

方法一：直接用DOM的classList方法检查（最推荐） #

不用单独提取类名字符串，直接在浏览器上下文里判断元素是否包含目标类，逻辑更清晰也更可靠：

const hasThumbsUp = await this.page.evaluate(() => {
  const targetEl = document.getElementById('test');
  return targetEl.classList.contains('thumbs-up');
});
expect(hasThumbsUp).toBe(true);

classList.contains()是浏览器原生的类检查方法，比字符串匹配更精准（不会出现比如thumbs-up-extra这种类似字符串误判的情况）。

方法二：把JSHandle转成字符串再断言 #

如果一定要保留你原来的代码结构，需要先把getProperty拿到的JSHandle对象转成实际的字符串值，用jsonValue()方法就行：

const thumbsUp = await this.page.$('[id="test"]');
const classNameHandle = await thumbsUp.getProperty('className');
const className = await classNameHandle.jsonValue(); // 提取实际字符串
expect(className).toContain('thumbs-up');

方法三：用evaluate提取类名字符串 #

另一种提取字符串的方式是通过page.evaluate()直接从元素上获取className：

const thumbsUp = await this.page.$('[id="test"]');
const className = await this.page.evaluate(el => el.className, thumbsUp);
expect(className).toContain('thumbs-up');

这种方式和方法二本质类似，但代码更简洁一点。

总的来说，优先选方法一，因为它利用了原生DOM API，避免了字符串处理可能带来的意外问题。

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