puppeteer - 如何检查 puppeteer 中元素句柄上的 disabled 属性？

Question

我的代码如下：

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 获得禁用/启用的属性。

Answer 1

它与 Puppeteer 中的几乎相同，在 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 问题。