How to check the disabled property on an element handle in puppeteer?

user_8548451 0
Viewed 1094

I am having the code as given below:

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)

I also tried this:

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 ???

Whereas I tried this in the browser console and giving correct result:

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

But not getting disabled/enabled property using puppeteer.

ui-testing jest-puppeteer puppeteer
1 Answers

It's virtually the same as in Puppeteer, and here on SO is the same question.

To check whether a button is disabled:

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

or with page.$eval():

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

To check all buttons are disabled:

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

Or to check a button is enabled:

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

There are more solutions, these are just some examples. I recommend reading the linked SO question.

user_104019310
Related