the code i want to be able to execute:

const checkVisible = async (element: HTMLElement): Promise<boolean> => {
  const style = window.getComputedStyle(element)
  return style && style.visibility !== 'hidden' && hasVisibleBoundingBox()

  function hasVisibleBoundingBox(): boolean {
    const rect = element.getBoundingClientRect()
    return !!(rect.top || rect.bottom || rect.width || rect.height)
  }
}

...
await page.waitForFunction((el) => checkVisible(el), { timeout }, element1)
...
await page.waitForFunction((el) => {
  // some more complex usage
  if (!checkVisible(el)) return false
  ...
}, { timeout }, element2)

checkVisible function created in the node cannot be executed in pageFunction, even though it is fully adapted to the browser environment.

If I define window.checkVisible with page.evaluate() as early as possible. then it's difficult to cope with the challenge of frequent and erratic page refresh/redirect.

page.evaluate(() => {
  window.checkVisible = async (element: HTMLElement): Promise<boolean> => {
    const style = window.getComputedStyle(element)
    return style && style.visibility !== 'hidden' && hasVisibleBoundingBox()

    function hasVisibleBoundingBox(): boolean {
      const rect = element.getBoundingClientRect()
      return !!(rect.top || rect.bottom || rect.width || rect.height)
    }
  }
})

But I'm more reluctant to write the checkVisible() code countless times. is there any help?