Firstly, you can determine if an element is visible by examining its display style value. Another method is to assess the height of the element; for example, if the element is nested within a parent element with a display: none property, the offsetHeight will be 0, indicating that the element is not visible despite its display setting. It's important to note that an element with opacity: 0 is not necessarily considered hidden and should not be factored in during visibility checks.

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

Additionally, it may be helpful to verify elem.offsetWidth before performing any calculations to ensure the existence of the element.

Try out the boundingBox() function

Retrieve the element's bounding box in relation to the main frame, returning null if the element is not visible.

Learn more: https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#elementhandleboundingbox

The approved solution currently involves patiently waiting for an element to appear and then becoming visible.

If we are not keen on waiting for the element and simply want to verify its visibility, we can utilize a combination of getComputedStyle() and getBoundingClientRect() to check if the element is actually visible.

To begin with, we need to ensure that the visibility property is not set to hidden.

Subsequently, we can confirm the visibility of the bounding box by verifying that attributes like bottom, top, height, and width are not equal to 0 (this will eliminate elements with display set to none as well).

const element_is_visible = await page.evaluate(() => {
  const element = document.querySelector('#example');
  const style = getComputedStyle(element);
  const rect = element.getBoundingClientRect();

  return style.visibility !== 'hidden' && !!(rect.bottom || rect.top || rect.height || rect.width);
});

Perhaps you could try utilizing the elementHandle.boundingBox() method as suggested by @huypham.

This method returns a Promise that displays the bounding box of the element (relative to the main frame), or null if the element is not visible.

Here is an example snippet:

      const loadMoreButton = await getDataPage.$(
        'button.ao-tour-reviews__load-more-cta.js-ao-tour-reviews__load-more-cta'
      );

      const buttonVisible = await loadMoreButton.boundingBox();

      If (buttonVisible) {
        await loadMoreButton.click().catch((e) => {
          console.log('💥💥💥: ' + e)
        });
      }

Using the playwright's approach to determine element visibility - https://github.com/microsoft/playwright/blob/master/src/server/injected/injectedScript.ts#L120-L129

function isElementVisible(el: Element): boolean {
    // It is important to have logic similar to waitForDisplayedAtStablePosition() for consistent results.
    if (!el.ownerDocument || !el.ownerDocument.defaultView)
      return true;
    const computedStyle = el.ownerDocument.defaultView.getComputedStyle(el);
    if (!computedStyle || computedStyle.visibility === 'hidden')
      return false;
    const boundingRect = el.getBoundingClientRect();
    return boundingRect.width > 0 && boundingRect.height > 0;
}

The response from @aknuds1 is spot-on, but here's a helpful tip to make things even easier for yourself. You can create a helper function like this one, which will return true if the element is visible and false otherwise.

function checkVisibility(page, selector, timeout = 150) {
    return new Promise((resolve) => {
        page.waitForSelector(selector, {visible: true, timeout}).then(() => {
            resolve(true);
        }).catch(() => {
            resolve(false);
        });
    });
}

How to Use:

For plain JavaScript with Puppeteer

let isVisible = await checkVisibility(page, selector)
isVisible = await checkVisibility(page, selector, 300)

If you are using Jest or another testing framework

expect(await checkVisibility(page, selector)).toBeTrue();

In the case of Jest (or most other frameworks), you can take it a step further by creating a custom matcher to enhance the existing ones. (https://jestjs.io/docs/expect#expectextendmatchers)

expect.extend({
    async toHaveVisible(page, selector, timeout = 150) {
        let isVisible = await checkVisibility(page, selector, timeout);

        if (isVisible) {
            return {
                message: () => `expected ${selector} not to be visible`,
                pass: true
            };
        } else {
            return {
                message: () => `expected ${selector} to be visible`,
                pass: false
            };
        }
    }
});

await expect(page).toHaveVisible(selector);
await expect(page).not.toHaveVisible(anotherSelector);
await expect(page).not.toHaveVisible(yetAnotherSelector, 300);

It seems like this is the method that jQuery uses:

visible = await page.evaluate((e) => e.offsetWidth > 0 && e.offsetHeight > 0, element)

If you're looking to determine the visibility of an element, you can utilize this handy function. It's important to ensure that the page has fully loaded before utilizing this function. One way to do this is by using waitForSelector on other elements that are expected to be visible.

async function checkVisibility(page, selector) {
  return await page.evaluate((selector) => {
    var elem = document.querySelector(selector);
    if (elem) {
      var computedStyle = window.getComputedStyle(elem);

      return computedStyle && computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden' && computedStyle.opacity !== '0';
    }
    else {
      return false;
    }
  }, selector);
}


// Example usage:
page.waitForSelector('#anotherElement');
var isVisible = await checkVisibility(page, '#visibleOrHidden');

if (isVisible) {
// Perform actions on #visibleOrHidden
}

This piece of code is quite useful for handling scenarios where an element is present on the page but not visible. Typically, this occurs when the element's display property is set to none or its visibility is hidden in CSS. In such cases, attempting to interact with the element using Puppeteer may result in failures.

async function checkElementVisibility(element, page) {
  const isVisibleHandle = await page.evaluateHandle((e) => {
    const style = window.getComputedStyle(e);
    return (style && style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0');
  }, element);
  
  var visible = await isVisibleHandle.jsonValue();
  const box = await element.boxModel();
  
  if (visible && box) {
    return true;
  }
  
  return false;
}

Why not give Element.checkVisibility() a go? It's fully supported in Chrome. Here's a breakdown of how it functions, as outlined in the CSS specification:

When invoked on an element (this), checkVisibility(options) follows these steps:

1. If there's no associated box with this element, the method returns false.
2. If any ancestor of this containing shadow content has a visibility of "hidden", return false.
3. If the checkOpacity option in options is enabled and either this element or its ancestors have an opacity value of 0, return false.
4. If the checkVisibilityCSS option in options is enabled and this element is invisible, return false.
5. Otherwise, return true.

To ensure that an element is visible, its parent's visibility must be recursively checked since the element will not be visible if its parent is hidden.

// Enhanced function for checking visibility
    function isVisible(element) {
        // Recursive function to check visibility of all parents
        function checkVisibilityRecursively(el) {
            if (!el || el === document) return true;

            const style = window.getComputedStyle(el);

            // Check if element or any parent is invisible due to styles
            if (style.display === 'none' ||
                style.visibility === 'hidden' ||
                style.opacity === '0'
            ) {
                return false;
            }

            // Recursively check visibility for parent element
            return checkVisibilityRecursively(el.parentElement);
        }

        return checkVisibilityRecursively(element);
    }