Wie kann ich überprüfen, ob ein Element mit Puppenspieler und reinem JavaScript sichtbar ist?

Question

Ich möchte überprüfen, dass ein DOM-Element mit Puppeteer und reinem JavaScript (nicht jQuery) sichtbar ist, wie kann ich das tun? Mit "sichtbar" bezeichne ich, dass das Element über CSS angezeigt und nicht ausgeblendet wird (z. B. durch).

Zum Beispiel kann ich feststellen, ob #menu mein Element über CSS-Regel display: none, in der folgenden Art und Weise nicht verborgen:

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

Wie kann ich im Allgemeinen, obwohl festzustellen, ob das Element verborgen ist oder nicht, und nicht nur durch ?

Answer 1

Ich fand, dass Puppeteer eine API-Methode für diesen Zweck hat: Page.waitForSelector, über seine visible Option. Ich war mir der letzteren Option nicht bewusst, aber es lässt Sie warten, bis ein Element sichtbar ist.

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

Umgekehrt können Sie für ein Element warten über die hidden Option versteckt werden.

Ich denke, das ist die idiomatische Antwort, in Bezug auf die Puppeteer API. Danke an Colin Cline, obwohl ich denke, dass seine Antwort wahrscheinlich als allgemeine JavaScript-Lösung nützlich ist.

Answer 2

Ein wird durch Überprüfung seiner Anzeigeart Wert. Sekunde ist durch Überprüfung seiner Höhe, für exp wenn das Element ein Kind eines Elements ist, das display: none ist, wird offsetHeight0 sein, und Sie wissen also, dass das Element trotz seines Anzeigewerts nicht sichtbar ist. opacity: 0 wird nicht als verstecktes Element betrachtet, daher werden wir es nicht prüfen.

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

können Sie elem.offsetWidth auch überprüfen und ist vor jeder Berechnung nicht schlecht, überprüfen, ob Element vorhanden ist oder nicht.