初期状態が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');
しかし、属性の値がないので、この場合はどのように進めるのですか?
以下は、問題を解決する方法を示す包括的なソリューションです。
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);
次のようなことができるはずです。
const isDisabled = await page.$eval('button', (button) => {
return button.disabled;
});
ボタンが無効かどうかの値は、isDisabled
変数に保存する必要があります。
お役に立てれば!
または、 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;
_