使用page.evaluate无法获取元素textContent，UI可见但DOM返回空值

以下是几种可能的原因和对应解决方法：

• 目标元素是输入框，内容存在于value属性而非textContent
  带有data-placeholder的元素通常是输入框（如<input>或<textarea>），这类元素的用户输入内容存储在value属性里，textContent自然为空。修改代码获取value即可：

  var updatedFirstName = await page.evaluate(() => 
    document.querySelector('[data-placeholder="First Name"]').value
  );
  console.log('updated firstname is ' + updatedFirstName);
  

• DOM元素未完成更新，存在渲染延迟
  即使UI视觉上已显示内容，DOM可能还未同步更新。可以先等待元素的内容不为空，再执行获取操作：

  // 等待元素内容加载完成
  await page.waitForFunction(selector => {
    const el = document.querySelector(selector);
    return el && (el.value || el.textContent).trim() !== '';
  }, '[data-placeholder="First Name"]');
  
  // 再获取内容
  var updatedFirstName = await page.evaluate(() => {
    const el = document.querySelector('[data-placeholder="First Name"]');
    return el.value || el.textContent;
  });
  console.log('updated firstname is ' + updatedFirstName);
  

• 选择器匹配到了错误的元素
  页面中可能存在多个带有data-placeholder="First Name"的元素，当前选择器拿到的是未更新的空元素。可以通过增加选择器精度（比如结合父元素类名）来定位目标元素：

  // 示例：结合父容器类名缩小范围
  var updatedFirstName = await page.evaluate(() => 
    document.querySelector('.user-profile [data-placeholder="First Name"]').value
  );
  

• 文本内容存在于子元素中
  如果目标元素是容器，实际文本在它的子节点里，需要调整选择器指向子元素：

  // 假设文本在子span中
  var updatedFirstName = await page.evaluate(() => 
    document.querySelector('[data-placeholder="First Name"] span').textContent
  );
  

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