代码之家 › 专栏 › 技术社区 › demouser123

使用puppeteer禁用检查元素

puppeteer css-selectors javascript

7

demouser123 · 技术社区 · 8 年前

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

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

这个 残疾人 一旦条件满足,属性就不存在-因此HTML

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

我要检查按钮是否具有属性 残疾人 但是,由于属性中没有值,所以我找不到这样做的方法。

例如,如果 残疾人 属性有类似的内容

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

但是由于属性没有值,在这种情况下如何继续?

3 回复 | 直到 7 年前

1

8

Grant Miller 7 年前

下面是一个全面的解决方案,演示如何使用以下方法解决问题:

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

2

4

AJC24 8 年前

您应该能够这样做:

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

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

希望这有帮助!

3

1

tony19 thanksd 8 年前

或者,您可以更改 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