web-dev-qa-db-fra.com

Vérifier qu'un élément est désactivé avec Puppeteer

J'ai un bouton qui a un état initial de disabled - 

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

L’attribut disabled n’est plus présent une fois les conditions remplies - le code HTML devient alors 

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

Je veux vérifier que le bouton a l'attribut disabled. Cependant, comme l'attribut n'a aucune valeur, je ne suis pas en mesure de trouver un moyen de le faire. 

Par exemple, si l'attribut disabled avait quelque chose comme ceci 

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

alors je peux faire quelque chose comme ça

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

mais puisqu'il n'y a pas de valeur pour l'attribut, comment procéder dans ce cas? 

javascriptcss-selectorspuppeteer
6
demouser123

Voici une solution complète montrant comment résoudre votre problème en utilisant:

page.$() , page.$$() , page.$eval() , page.$$eval() , page.$x() , et 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 );
8
Grant Miller

Vous devriez pouvoir faire quelque chose comme ça:

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

Votre valeur indiquant si le bouton est désactivé ou non doit ensuite être stockée dans la variable isDisabled.

J'espère que cela t'aides!

3
AJC24

Vous pouvez également remplacer votre page.$() query par button[disabled]. Un résultat null implique que le bouton n'est pas désactivé. Pour rechercher les boutons activés, recherchez button:not([disabled]).

const disabledButton = await page.$('button[disabled]');
const isDisabled = disabledButton !== null;

const enabledButton = await page.$('button:not([disabled])');
const isEnabled = enabledButton !== null;

démo

1
tony19