Playwright调用getAttribute()报错属性不可见，如何获取data-timeframe值？

云原生阿岚

2026-7-1

解决Playwright获取data-timeframe属性失败的问题

你的核心问题是定位器指向了错误的元素：你定位的是父元素.rbc-event-content[title="trip27012024"]，但data-timeframe属性实际在它的子元素.custom-cal-event-wrap上。另外Playwright默认要求操作可见元素，若目标元素不可见也会触发报错。

正确解决方案

方案1：直接定位到包含目标属性的子元素

// 修正定位器，指向子元素
const eventWrap = this.page.locator(`.rbc-event-content[title="trip27012024"] .custom-cal-event-wrap`);
// 获取属性值
const timeframeAttribute = await eventWrap.getAttribute("data-timeframe");
console.log(timeframeAttribute);

方案2：允许操作不可见元素（如果元素存在但不可见）

如果子元素确实存在但因样式隐藏，可添加visibility: "hidden"选项跳过可见性检查：

const eventWrap = this.page.locator(`.rbc-event-content[title="trip27012024"] .custom-cal-event-wrap`, { visibility: "hidden" });
const timeframeAttribute = await eventWrap.getAttribute("data-timeframe");

方案3：通过父元素查找子元素（evaluate方式）

如果需要保留父元素定位，可在evaluate中查询子元素：

const eventContent = this.page.locator(`.rbc-event-content[title="trip27012024"]`);
const timeframeAttribute = await eventContent.evaluate(node => {
  const childNode = node.querySelector(".custom-cal-event-wrap");
  return childNode ? childNode.getAttribute("data-timeframe") : null;
});