web-dev-qa-db-ja.com

Puppeteerを使用して要素のチェックを無効にする

初期状態が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');

しかし、属性の値がないので、この場合はどのように進めるのですか?

11
demouser123

以下は、問題を解決する方法を示す包括的なソリューションです。

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);
11
Grant Miller

次のようなことができるはずです。

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

ボタンが無効かどうかの値は、isDisabled変数に保存する必要があります。

お役に立てれば!

5
AJC24

または、 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;
_

デモ

3
tony19