web-dev-qa-db-ja.com

Puppeteerと純粋なJavaScriptで要素が表示されていることを確認するにはどうすればよいですか？

Puppeteer および純粋なJavaScript（jQueryではない）でDOM要素が表示されることを確認したいのですが、どうすればよいですか？可視とは、要素が非表示ではなくCSSを介して表示されることを意味します（f.ex. by display: none）。

たとえば、次の方法で、CSSルール#menuを介して、要素display: noneが非表示になっていないかどうかを判断できます。

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

display: noneだけでなく、要素が非表示になっているかどうかを一般的に判断するにはどうすればよいですか？

javascriptcsspuppeteer
7
aknuds1

Puppeteerには、この目的のためのAPIメソッド Page.waitForSelector があり、visibleオプションを介していることがわかりました。後者のオプションについては知りませんでしたが、要素が表示されるまで待つことができます。

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

逆に、hiddenオプションを使用して、要素が非表示になるのを待つことができます。

Puppeteer APIに関しては、これが慣用的な答えだと思います。 Colin Clineに感謝しますが、彼の答えはおそらく一般的なJavaScriptソリューションとして役立つと思います。

22
aknuds1

Oneは、表示スタイルの値を確認することによります。 Secondは、要素がdisplay: none、offsetHeightは0これにより、要素は表示値にもかかわらず表示されないことがわかります。 opacity: 0は隠し要素と見なされないため、チェックしません。

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

確認してもいい elem.offsetWidthも計算され、計算の前に悪くない場合は、要素が存在するかどうかを確認します。

6
Colin Cline