fix(isVisible): do not throw when element is not connected (#8012)

src/server/dom.ts

@@ -697,7 +697,9 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async isVisible(): Promise<boolean> {
     const result = await this.evaluateInUtility(([injected, node]) => injected.checkElementState(node, 'visible'), {});
-    return throwRetargetableDOMError(throwFatalDOMError(result));
+    if (result === 'error:notconnected')
+      return false;
+    return throwFatalDOMError(result);
   }
 
   async isHidden(): Promise<boolean> {

tests/page/elementhandle-convenience.spec.ts

@@ -211,6 +211,25 @@ it('element state checks should work for label with zero-sized input', async ({p
   expect(await page.isDisabled('text=Click me')).toBe(true);
 });
 
+it('isVisible should not throw when the DOM element is not connected', async ({page}) => {
+  await page.setContent(`<div id="root"></div>`);
+  await page.evaluate(() => {
+    function insert() {
+      document.getElementById('root').innerHTML = '<div id="problem">Problem</div>';
+      window.requestAnimationFrame(remove);
+    }
+    function remove() {
+      const node = document.getElementById('problem');
+      node?.parentNode?.removeChild(node);
+      window.requestAnimationFrame(insert);
+    }
+    window.requestAnimationFrame(insert);
+  });
+
+  for (let i = 0; i < 10; i++)
+    await page.isVisible('#problem');
+});
+
 it('isEnabled and isDisabled should work', async ({ page }) => {
   await page.setContent(`
     <button disabled>button1</button>