Puppeteer - How to check visibility of an HTML element?

In case you were using Puppeteer and rand into this error

Node is either not visible or not an HTMLelement

This blog post might be able to help you fix it.

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.

It is important to check the visibility of an element in Puppeteer before performing any action on it else you will run into a similar error.

How to check if the element is ready for an action or not?

With some degree of trial and error, this is the function to check whether the element is ready for an action or not. It checks for the visibility of the element by checking the style of the element for display, opacity, and visibility. If this is true, we also check for boxModel of the element. The BoxModel contains:

• Content
• Padding
• Border
• Margin
• Width
• Height

The purpose of checking BoxModel is that even if the element is present and visible, then also it might not be in the viewport. By ensuring the BoxModel of the element, we know the height, width, coordinates etc which reaffirms that the element is now completely ready for any 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;
}