使用 Puppeteer 检查元素是否被禁用

Question

我有一个按钮，初始状态为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');

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

- demouser123

Answer 1

这是一份全面的解决方案，展示如何使用以下工具解决您的问题：

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);

- Grant Miller

Answer 2

你应该能够做到像这样：

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

你应该将按钮是否禁用的值存储在isDisabled变量中。

希望这可以帮助你！

- AJC24

Answer 3

或者，您可以将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

- tony19

---

@Amit 我建议你发布一个问题，这样熟悉该主题的人就可以帮助你。但是请注意，我在 Puppeteer 的 API 文档中没有看到 page.locator()。 - tony19

Answer 4

我想检查按钮是否具有禁用属性，但由于该属性没有值，因此我无法找到方法来这样做。

当前属性是您检查的内容，因为disabled是一个布尔属性。

到目前为止提供的答案都有效。我建议（尽管我不知道在问题提出时是否可用）的是让API为您工作。而不是自己检查条件，您将等待元素变为可用。这可以使用waitForSelector或waitForXPath完成。在此示例中，我将使用XPath。

HTML

<label for="account_email">Email</label>
<input type="email" autocomplete="username" autofocus="autofocus" id="account_email">
<button disabled>Continue</button>

JS

await page.goto('www.example.com', { waitUntil }) // go to page
await page.$x('//label[text() = "Email"]/following-sibling::input') // get input
  .then(([input]) => input.type('[e-mail]')) // fulfill condition(valid email)
await page.waitForXPath('//button[text() = "Continue"][not(@disabled)]') // wait for button
  .then(button => button.click()) // click the button only after it is enabled

- santanaG