使用 Puppeteer 禁用检查元素答案

【问题标题】：Checking an element is disabled using Puppeteer使用 Puppeteer 禁用检查元素
【发布时间】：2019-01-02 14:24:07
【问题描述】：

我有一个初始状态为 disabled 的按钮 -

<button type = "submit" class="ant-btn ant-btn-primary ant-btn-lg" disabled>

一旦条件满足，disabled 属性就不存在了——所以 HTML 变成了

<button type = "submit" class="ant-btn ant-btn-primary ant-btn-lg">

我想检查按钮是否具有属性disabled，但是由于该属性没有任何值，我无法找到这样做的方法。

例如，如果disabled 属性有这样的东西

<button type = "submit" class="ant-btn ant-btn-primary ant-btn-lg" disabled = "disabled">

那么我可以做这样的事情

let button = await page.$('button');
let valueHandle = await input.getProperty('disabled');
assert.equal(await valueHandle.jsonValue(), 'disabled');

但是由于该属性没有值，在这种情况下如何进行？

【问题讨论】：

标签： javascript css-selectors puppeteer

【解决方案1】：

你应该可以做这样的事情：

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

您的按钮是否被禁用的值应存储在isDisabled 变量中。

希望这会有所帮助！

【讨论】：

【解决方案2】：

或者，您可以将page.$() 查询更改为button[disabled]。 null 结果意味着该按钮未被禁用。要检查启用的按钮，请查询 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

【讨论】：

【解决方案3】：

这是一个全面的解决方案，展示了如何使用以下方法解决您的问题：

page.$()、page.$$()、page.$eval()、page.$$eval()、page.$x() 和 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);

【讨论】：