使用Puppeteer验证输入框readonly属性返回错误结果问题求解

错误点说明 #

1. DOM属性大小写不匹配：HTML原生的readonly对应DOM元素的属性名是驼峰写法readOnly，字母O为大写，你用全小写的readonly调用getProperty自然无法获取到对应值，就会返回undefined。
2. 选择器匹配潜在问题：用page.$('#serverUrl[readonly]')匹配失败大概率是两个原因：一是执行查询时元素还未完全渲染加载完成，二是部分场景下动态设置的布尔属性用CSS属性选择器匹配会有兼容性问题。
3. 变量名拼写错误：你最后打印输出的变量名是is_readyonly，比定义的is_readonly多了一个字母e，拼写错误也会导致输出不符合预期的false。

可行解决方法 #

方法1：修正属性名直接获取 #

把获取属性的参数改为驼峰写法的readOnly即可：

const inputField = await page.$('#serverUrl')
const isReadonly = await (await inputField.getProperty('readOnly')).jsonValue()
// 此时会正确返回布尔值true/false

方法2：在浏览器上下文直接判断（更稳妥） #

用page.evaluate直接在页面执行JS逻辑，不用处理属性序列化的问题，不容易出错：

const isReadonly = await page.evaluate(() => {
  const input = document.getElementById('serverUrl')
  // 也可以用input.hasAttribute('readonly')判断属性是否存在
  return input ? input.readOnly : false
})

方法3：属性选择器方案（需先确保元素加载完成） #

如果一定要用属性选择器判断，先等待元素加载完成再执行查询：

await page.waitForSelector('#serverUrl')
const isReadonly = await page.$('#serverUrl[readonly]') !== null

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