Playwright E2E测试中无法获取input元素值的问题求助

错误原因 #

报错TypeError: Cannot read properties of null (reading 'getAttribute')说明issueDateBox为null，即Playwright未找到目标input元素。以下是针对性解决思路：

1. 优化元素定位选择器 #

优先使用更稳定的测试专属定位符，避免依赖易变的id/class：

• 用页面已提供的data-testid定位：

  const issueDateBox = await this.page.waitForSelector('[data-testid="issued_at--input"]');
  

• 检查选择器拼写是否正确，同时确认元素不在iframe或Shadow DOM中：
  • 若在iframe，需先通过page.frameLocator('iframe选择器')切换上下文后再定位元素；
  • 若在Shadow DOM，需使用page.locator('父元素').locator('input#issued_at', { hasShadowDOM: true })。

2. 添加元素加载等待 #

直接用page.$()可能因元素未渲染完成导致找不到，改用waitForSelector强制等待元素出现：

// 等待元素可见（确保能读取值）
const issueDateBox = await this.page.waitForSelector('input#issued_at', { 
  state: 'visible', 
  timeout: 5000 // 可选：自定义超时时间，默认30000ms
});

3. 正确获取input值的方法 #

readonly input的value可能存在初始HTML属性和当前DOM值不一致的情况，推荐以下两种可靠方式：

• 使用Playwright内置的inputValue()方法：

  const issueDateText = await issueDateBox.inputValue();
  

• 通过$eval直接读取DOM元素的value属性：

  const issueDateText = await this.page.$eval('input#issued_at', el => el.value);
  

注：getAttribute('value')仅能获取HTML标签上的初始值，若页面通过JS动态修改过值，会导致读取结果不准确。

修正后的完整示例 #

async daysBetweenDates() {
    // 等待元素可见并定位
    const issueDateBox = await this.page.waitForSelector('[data-testid="issued_at--input"]', { state: 'visible' });
    // 获取当前input的实际值
    const issueDateText = await issueDateBox.inputValue();
    console.log(issueDateText);
}

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