web-dev-qa-db-fra.com

Comment puis-je vérifier qu'un élément est visible avec Puppeteer et JavaScript pur?

Je souhaite vérifier qu'un élément DOM est visible avec Puppeteer et JavaScript pur (pas jQuery), comment faire? Par visible, je veux dire que l'élément est affiché via CSS, et non caché (par exemple par display: none).

Par exemple, je peux déterminer si mon élément #menu n'est pas masqué via la règle CSS display: none, de la manière suivante:

const isNotHidden = await page.$eval('#menu', (elem) => {
  return elem.style.display !== 'none'
})

Comment puis-je déterminer en général si l'élément est masqué ou non, et pas seulement par display: none?

javascriptcsspuppeteer
7
aknuds1

J'ai trouvé que Puppeteer a une méthode API à cet effet: Page.waitForSelector , via son option visible. Je n'étais pas au courant de cette dernière option, mais elle vous permet d'attendre qu'un élément soit visible.

await page.waitForSelector('#element', {
  visible: true,
})

Inversement, vous pouvez attendre qu'un élément soit masqué, via l'option hidden.

Je pense que c'est la réponse idiomatique, en ce qui concerne l'API Puppeteer. Merci à Colin Cline, car je pense que sa réponse est probablement utile en tant que solution JavaScript générale.

22
aknuds1

One est en vérifiant sa valeur de style d'affichage. Second est en vérifiant sa hauteur, pour exp si l'élément est un enfant d'un élément qui est display: none, le offsetHeight sera 0 et ainsi vous savez que l'élément n'est pas visible malgré sa valeur d'affichage. opacity: 0 n'est pas considéré comme un élément caché, nous ne le vérifierons donc pas.

const isNotHidden = await page.$eval('#menu', (elem) => {
    return window.getComputedStyle(elem).getPropertyValue('display') !== 'none' && elem.offsetHeight
});

Tu peux vérifier elem.offsetWidth également et n'est pas mauvais avant tout calcul, vérifiez si l'élément existe ou non.

6
Colin Cline