How can I check that an element is visible with Puppeteer and pure JavaScript?

Question

I wish to check that a DOM element is visible with Puppeteer and pure JavaScript (not jQuery), how can I do this? By visible I mean that the element is displayed through CSS, and not hidden (f.ex. by display: none).

For example, I can determine whether my element #menu is not hidden via CSS rule display: none, in the following way:

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

How can I determine in general though if the element is hidden or not, and not just through display: none?

I don't know how consistently it works for other methods of hiding, but `elem.getBoundingClientRect()` returns distinctive data you can test against. — AuxTaco, Dec 08 '17 at 10:56
@AuxTaco using```elem.getBoundingClientRect()``` returns a ```{}``` on console.log, whether the element is ready or not :( — PayamB., Dec 04 '19 at 08:08
Since Puppeteer can always run normal JS, the canonical thread [Check if element is visible in DOM](https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom/21696585#21696585) should be linked because it has a huge number of resources that can be used via `.evaluate()` in Puppeteer. — ggorlen, Dec 31 '21 at 05:30
@PayamB. did you try returning `JSON.stringify(elem.getBoundingClientRect())`? The reason it probably matters is that `elem.getBounding...` is a read-only [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) rather than a plain object, so Puppeteer's serialization seems to be affected and doesn't capture the full object. — ggorlen, Dec 31 '21 at 05:31

aknuds1 · Accepted Answer · 2017-12-08T13:39:41.663

50

I found that Puppeteer has an API method for this purpose: Page.waitForSelector, via its visible option. I wasn't aware of the latter option, but it lets you wait until an element is visible.

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

Conversely you can wait for an element to be hidden, via the hidden option.

I think this is the idiomatic answer, with regards to the Puppeteer API. Thanks to Colin Cline though as I think his answer is probably useful as a general JavaScript solution.

edited Dec 08 '17 at 13:39

answered Dec 08 '17 at 11:45

aknuds1

65,625
67
195
317

4

This will throw if the element is not visible. If it is perfectly acceptable that the element not be visible, then throwing is NOT appropriate. I wish developers would stop throwing exceptions for normal behavior, just return a value like null! – Gerry Feb 21 '19 at 16:07
1

@Gerry thats exactly my problem , i want to check for the element and then do something based on that if the element is not ready , but it throws and makes app crash when looking for the element – PayamB. Dec 04 '19 at 08:06
1

The question was how to test if an element is visible, not waiting for it to be added to the DOM and then to become visible, which is what this "accepted" solution does. – user3483642 Aug 09 '21 at 02:46
This doesn't work for elements that are behind other elements z-Index, though. – lowcrawler Jun 02 '22 at 01:34
1

I don't understand how the acceptable answer is an answer that will make the script pause if the element does not exist (due to the wait) – Wazime Aug 07 '22 at 11:19

Colin Cline · Answer 2 · 2017-12-08T11:14:59.257

15

One is by checking its display style value. Second is by checking its height, for exp if the element is a child of an element which is display: none, the offsetHeight will be 0 and thus you know the element is not visible despite its display value. opacity: 0 is not considered as hidden element so we will not checking it.

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

You can check elem.offsetWidth as well and is not bad before any calculation, check if element exist or not.

edited Dec 08 '17 at 11:14

answered Dec 08 '17 at 11:09

Colin Cline

1,291
1
12
25

And "window" var where is defined? – pabgaran Feb 10 '18 at 17:23
1

@pabgaran The window object represents a window containing a DOM document; [getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). You can cache the window into a variable ofc but its a global object – Colin Cline Feb 12 '18 at 00:46
You're right. I'm a beginner with puppetter. All this code is working inside a "navigator", so window, document, etc are always available. – pabgaran Feb 12 '18 at 12:18
this solution just saved my day , except that i checked the height of the element . – PayamB. Dec 04 '19 at 08:46

score 10 · Answer 3 · answered Apr 21 '20 at 07:16

10

Use boundingBox()

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

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

answered Apr 21 '20 at 07:16

huypham

184
3
8

The link in the question goes to github, but github responds with a 404. I submit a link to the same content on the pptr docs website. https://pptr.dev/api/puppeteer.elementhandle.boundingbox/ – Lucas May 24 '23 at 14:06

score 7 · Answer 4 · answered Mar 18 '20 at 03:24

The current accepted answer involves waiting for an element to appear and become visible.

If we are not interested in waiting on the element, and we would simply like to test the visibility of the element, we can use a combination of getComputedStyle() and getBoundingClientRect() to test whether or not the element is visible.

We can first check that the visibility is not set to hidden.

Then we can validate that the bounding box is visible by checking that the bottom, top, height, and width attributes are not set to 0 (this will filter out elements that have 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);
});

This does not work for elements that are behind other elements (ie: stacked elements in a z-index) ... is there a full-featured solution like this that does? — lowcrawler, Jun 02 '22 at 01:36

score 5 · Answer 5 · answered Sep 25 '20 at 02:34

Maybe you can using elementHandle.boundingBox() (thank to @huypham idea)

It will return a Promise that show a bounding box of the element (relative to the main frame), or null if the element is not visible.

The snippet example:

      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)
        });
      }

Stanislav Modrák · Answer 6 · 2022-07-20T14:43:32.173

The answer @aknuds1 gave is perfect but you may make it even more convenient for yourself by creating a helper such as this one. This resolves to true if the element is visible and to false otherwise.

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

Usage

in pure JS with Puppeteer

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

and if you happen to use Jest or another framework

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

in the case of Jest (and most other frameworks), you can go even further and create a custom matcher to extend the existing ones. (https://jestjs.io/docs/expect#expectextendmatchers)

expect.extend({
    async toHaveVisible(page, selector, timeout = 150) {
        let isVisible = await isElementVisible(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);

score 1 · Answer 7 · answered Oct 11 '20 at 16:20

based on playwright's logic for checking if the element is visible - https://github.com/microsoft/playwright/blob/master/src/server/injected/injectedScript.ts#L120-L129

function isVisible(element: Element): boolean {
    // Note: this logic should be similar to waitForDisplayedAtStablePosition() to avoid surprises.
    if (!element.ownerDocument || !element.ownerDocument.defaultView)
      return true;
    const style = element.ownerDocument.defaultView.getComputedStyle(element);
    if (!style || style.visibility === 'hidden')
      return false;
    const rect = element.getBoundingClientRect();
    return rect.width > 0 && rect.height > 0;
  }

score 0 · Answer 8 · answered Jan 29 '20 at 07:11

0

Apparently here's how jQuery does it:

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

answered Jan 29 '20 at 07:11

pguardiario

53,827
19
119
159

redrockzee · Answer 9 · 2020-02-10T08:29:04.890

If you just want to know if an element is visible or not then you can use this function. You should make sure that the page is ready before calling this function. You can do that by using waitForSelector on other elements you expect to be visible.

async function isVisible(page, selector) {
  return await page.evaluate((selector) => {
    var e = document.querySelector(selector);
    if (e) {
      var style = window.getComputedStyle(e);

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


// Example usage:
page.waitForSelector('#otherPeerElement');
var myElementIsVisible = await isVisible(page, '#visibleOrNot');

if (myElementIsVisible) {
// Interact with #visibleOrNot
}

score 0 · Answer 10 · answered May 14 '20 at 12:27

this code definitely help you. It basically means the element is already available on the page but is not visible yet or in CSS, the display property is set as none or visibility is hidden. Now, while writing our tests, we assume that as soon as the element is available, do an action on it like clicking or typing. But as this element is not yet visible, Puppeteer fails to perform that action.

async function isLocatorReady(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;
}

score 0 · Answer 11 · answered Jun 27 '23 at 21:07

You can also try to utilize Element.checkVisibility(). It's supported in chrome. Here is how it works from the css spec:

The checkVisibility(options) method must run these steps, when called on an element this:

If this does not have an associated box, return false.

If a shadow-including ancestor of this has content-visibility: hidden, return false.

If the checkOpacity dictionary member of options is true, and this, or a shadow-including ancestor of this, has a computed opacity value of 0, return false.

If the checkVisibilityCSS dictionary member of options is true, and this is invisible, return false.

Return true.

score -1 · Answer 12 · answered Jul 15 '20 at 05:56

-1

const firstName= await page.$('[name=firstName]')
expect(firstName!=null).equal(true)

answered Jul 15 '20 at 05:56

Salman Srabon

247
2
3

score -3 · Answer 13 · answered Feb 11 '19 at 22:34

-3

I would use @aknuds1 's approach, but you can also do the following.

expect((await page.$('#element')) !== null).toEqual(true)

If you are fetching a resource asynchronously, be aware that the above expectation may not pass, since it won't wait for the changes to reflect on the UI. That's why this approach may not be preferred in this scenario.

answered Feb 11 '19 at 22:34

Antuan

501
2
6
18

@Gerry you are utterly wrong. Please read the question better before you make a comment. – Antuan Mar 03 '19 at 00:39
1

It appears your answer is expecting the use of a puppeteer testing framework such as jest-puppeteer and the OP did not specify they are testing. – mckenna Sep 27 '19 at 14:39

How can I check that an element is visible with Puppeteer and pure JavaScript?

13 Answers13

Usage

Linked