How can I verify element visibility using Puppeteer with plain JavaScript?

Other Questions Puppeteer
1

Using Puppeteer and plain JavaScript, how can I check if an element is visible by evaluating all relevant CSS properties instead of just verifying display:none?

Example:

const isVisible = await page.evaluate(() => {
  const elem = document.querySelector('#navigation');
  return window.getComputedStyle(elem).display !== 'none';
});
2

try getting the box dimensions via getBoundingClientRect along with checking computed style props like opacity and visibility. if the element has 0 width or height or if opacity is 0, its likely not truly visble