如何在 puppeteer 中检查元素句柄上的禁用属性？

问题描述

我的代码如下：

let btns = await page.$$(".move-to-preview-env");
let addToRepl = await btns[0];
let moveBtn = await btns[1];

console.log('addtoRepl ',addToRepl) // I want to check if these buttons are enabled or disabled ??
console.log('moveBtn ',moveBtn)

我也试过这个：

let btns = await page.$$('button[disabled]')
let btn1 = await btns[0].disabled;
let btn2 = await btns[1].disabled;
console.log('btns ',btns)   // giving array of element handle
console.log('btn1',btn1)   // giving undefined ???

而我在浏览器控制台中尝试了这个并给出了正确的结果：

let ele = document.querySelectorAll('button[disabled]');
ele[0].disabled  // true

但不能使用 puppeteer 获取禁用/启用的属性。

解决方法

它几乎与 Puppeteer 中的相同，here on SO 是相同的问题。

检查按钮是否被禁用：

const isDisabled = await page.$('button[disabled]') !== null;

或使用page.$eval()：

const isDisabled = await page.$eval('button',btn => btn.disabled);

检查所有按钮是否被禁用：

const disabledButtons = (await page.$$('button[disabled]')).length;
const buttons = (await page.$$('button')).length;
// now assert the two numbers are equal

或检查按钮是否启用：

const isEnabled = await page.$('button:not([disabled])') !== null;

还有更多解决方案，这些只是一些示例。我建议阅读链接的 SO 问题。