Checking an element is disabled using Puppeteer

Here's a comprehensive solution showing how to solve your problem using:

page.$(), page.$$(), page.$eval(), page.$$eval(), page.$x(), and page.evaluate().

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

// Using page.$$()
const is_disabled = (await page.$$('button[disabled]')).length !== 0;

// Using page.$eval()
const is_disabled = await page.$eval('button[disabled]', button => button !== null).catch(error => error.toString() !== 'Error: Error: failed to find element matching selector "button[disabled]"');

// Using page.$$eval()
const is_disabled = await page.$$eval('button[disabled]', buttons => buttons.length !== 0);

// Using page.$x()
const is_disabled = (await page.$x('//button[@disabled]')).length !== 0;

// Using page.evaluate()
const is_disabled = await page.evaluate(() => document.querySelector('button[disabled]') !== null);

You should be able to do something like this:

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

Your value for whether the button is disabled or not should then be stored in the isDisabled variable.

Hope this helps!

Alternatively, you could change your page.$() query to button[disabled]. A null result implies the button is not disabled. To check for enabled buttons, query for button:not([disabled]).

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

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

demo