Puppeteer page.select方法忽略select元素disabled属性问题咨询

问题原因 #

Puppeteer 提供的 page.select() 方法的底层逻辑是直接操作DOM修改select元素的选中属性，不会校验元素的disabled、readonly等交互限制属性，所以会绕过浏览器层面的用户交互限制，这是工具的正常设计行为，并非bug，也没有额外的配置项可以改变这个逻辑。

正确的校验方案 #

方案1：直接读取禁用属性验证（推荐） #

不需要通过尝试修改值来判断元素是否禁用，直接读取DOM的disabled属性即可，是最准确高效的验证方式，示例代码如下：

const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
  const browser = await puppeteer.launch( { headless: false} );
  const page = await browser.newPage();
  const content = fs.readFileSync('./index.html', 'utf8');
  await page.setContent(content);
  // 读取元素disabled属性
  const isDropdownDisabled = await page.$eval('#dropdown', el => el.disabled);
  // 此处可加入你的断言逻辑，比如判断isDropdownDisabled为true
  console.log(isDropdownDisabled); // 输出true，验证元素确实禁用
  await browser.close();
})();

方案2：模拟真实用户交互验证 #

如果需要模拟普通用户的操作逻辑，验证禁用状态下用户确实无法修改下拉值，不要使用page.select()，改用模拟鼠标点击的交互方式，这类操作会遵守浏览器的交互限制：

const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
  const browser = await puppeteer.launch( { headless: false} );
  const page = await browser.newPage();
  const content = fs.readFileSync('./index.html', 'utf8');
  await page.setContent(content);
  // 尝试点击下拉框和option，禁用状态下操作不会生效
  await page.click('#dropdown');
  await page.click('option[value="op2"]').catch(() => {}); // 禁用状态下点击option可能抛出异常，加catch避免中断
  // 校验选中值是否还是默认的op1
  const selectedValue = await page.$eval('#dropdown', el => el.value);
  console.log(selectedValue === 'op1'); // 输出true，验证用户无法修改禁用下拉框的值
  await browser.close();
})();

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