diff --git a/packages/injected/src/injectedScript.ts b/packages/injected/src/injectedScript.ts
index 85963d3a37696..f20a9872249ea 100644
--- a/packages/injected/src/injectedScript.ts
+++ b/packages/injected/src/injectedScript.ts
@@ -665,7 +665,7 @@ export class InjectedScript {
     return element;
   }
 
-  async checkElementStates(node: Node, states: ElementState[]): Promise<'error:notconnected' | { missingState: ElementState } | undefined> {
+  async checkElementStates(node: Node, states: ElementState[], frameVisible: boolean): Promise<'error:notconnected' | { missingState: ElementState } | undefined> {
     if (states.includes('stable')) {
       const stableResult = await this._checkElementIsStable(node);
       if (stableResult === false)
@@ -675,7 +675,7 @@ export class InjectedScript {
     }
     for (const state of states) {
       if (state !== 'stable') {
-        const result = this.elementState(node, state);
+        const result = this.elementState(node, state, frameVisible);
         if (result.received === 'error:notconnected')
           return 'error:notconnected';
         if (!result.matches)
@@ -753,7 +753,9 @@ export class InjectedScript {
     return { queryAll };
   }
 
-  elementState(node: Node, state: ElementStateWithoutStable): ElementStateQueryResult {
+  elementState(node: Node, state: ElementStateWithoutStable, frameVisible: boolean): ElementStateQueryResult;
+  elementState(node: Node, state: Exclude<ElementStateWithoutStable, 'visible' | 'hidden'>): ElementStateQueryResult;
+  elementState(node: Node, state: ElementStateWithoutStable, frameVisible?: boolean): ElementStateQueryResult {
     const element = this.retarget(node, ['visible', 'hidden'].includes(state) ? 'none' : 'follow-label');
     if (!element || !element.isConnected) {
       if (state === 'hidden')
@@ -762,7 +764,7 @@ export class InjectedScript {
     }
 
     if (state === 'visible' || state === 'hidden') {
-      const visible = isElementVisible(element);
+      const visible = !!frameVisible && isElementVisible(element);
       return {
         matches: state === 'visible' ? visible : !visible,
         received: visible ? 'visible' : 'hidden'
@@ -1464,20 +1466,20 @@ export class InjectedScript {
     this.onGlobalListenersRemoved.add(addHitTargetInterceptorListeners);
   }
 
-  async expect(element: Element, options: FrameExpectParams, elements: Element[]): Promise<{ matches: boolean, received?: ExpectReceived }> {
+  async expect(element: Element, options: FrameExpectParams, elements: Element[], frameVisible: boolean): Promise<{ matches: boolean, received?: ExpectReceived }> {
     const isArray = options.expression === 'to.have.count' || options.expression.endsWith('.array');
-    const core = isArray ? this.expectArray(elements, options) : await this.expectSingleElement(element, options);
-    const ariaSnapshot = core.matches !== options.isNot ? undefined : this._ariaSnapshotForExpect(element, options);
+    const core = isArray ? this.expectArray(elements, options) : await this.expectSingleElement(element, options, frameVisible);
+    const ariaSnapshot = core.matches !== options.isNot ? undefined : this._ariaSnapshotForExpect(element, options, frameVisible);
     if (core.received === undefined && ariaSnapshot === undefined)
       return { matches: core.matches };
     return { matches: core.matches, received: { value: core.received, ariaSnapshot } };
   }
 
-  private _ariaSnapshotForExpect(element: Element, options: FrameExpectParams): string | undefined {
+  private _ariaSnapshotForExpect(element: Element, options: FrameExpectParams, frameVisible: boolean): string | undefined {
     const expression = options.expression;
     if (expression === 'to.have.count' || expression.endsWith('.array') || expression === 'to.match.aria')
       return undefined;
-    if (isElementVisible(element) && expression !== 'to.have.title' && expression !== 'to.have.url') {
+    if (frameVisible && isElementVisible(element) && expression !== 'to.have.title' && expression !== 'to.have.url') {
       // Element-scoped snapshot. Containment matchers want the full subtree;
       // property matchers only need the element's own line.
       const isContainment = expression === 'to.have.text';
@@ -1488,7 +1490,7 @@ export class InjectedScript {
     return this.ariaSnapshotForExpectFailure(this.document.body, { mode: 'default' });
   }
 
-  private async expectSingleElement(element: Element, options: FrameExpectParams): Promise<{ matches: boolean, received?: any }> {
+  private async expectSingleElement(element: Element, options: FrameExpectParams, frameVisible: boolean): Promise<{ matches: boolean, received?: any }> {
     const expression = options.expression;
 
     {
@@ -1545,9 +1547,9 @@ export class InjectedScript {
           received: focused ? 'focused' : 'inactive',
         };
       } else if (expression === 'to.be.hidden') {
-        result = this.elementState(element, 'hidden');
+        result = this.elementState(element, 'hidden', frameVisible);
       } else if (expression === 'to.be.visible') {
-        result = this.elementState(element, 'visible');
+        result = this.elementState(element, 'visible', frameVisible);
       } else if (expression === 'to.be.attached') {
         result = {
           matches: true,
diff --git a/packages/playwright-core/src/server/dom.ts b/packages/playwright-core/src/server/dom.ts
index c90aa05331964..186d95a3d1d03 100644
--- a/packages/playwright-core/src/server/dom.ts
+++ b/packages/playwright-core/src/server/dom.ts
@@ -225,12 +225,12 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return await progress.race(this._page.delegate.scrollRectIntoViewIfNeeded(this, rect));
   }
 
-  async _waitAndScrollIntoViewIfNeeded(progress: Progress, waitForVisible: boolean): Promise<void> {
+  async _waitAndScrollIntoViewIfNeeded(progress: Progress, waitForVisible: boolean, frameVisible: boolean): Promise<void> {
     const result = await this._retryAction(progress, 'scroll into view', async progress => {
       progress.log(`  waiting for element to be stable`);
-      const waitResult = await progress.race(this.evaluateInUtility(async ([injected, node, { waitForVisible }]) => {
-        return await injected.checkElementStates(node, waitForVisible ? ['visible', 'stable'] : ['stable']);
-      }, { waitForVisible }));
+      const waitResult = await progress.race(this.evaluateInUtility(async ([injected, node, { waitForVisible, frameVisible }]) => {
+        return await injected.checkElementStates(node, waitForVisible ? ['visible', 'stable'] : ['stable'], frameVisible);
+      }, { waitForVisible, frameVisible }));
       if (waitResult)
         return waitResult;
       return await this._scrollRectIntoViewIfNeeded(progress);
@@ -239,7 +239,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
   }
 
   async scrollIntoViewIfNeeded(progress: Progress) {
-    await this._waitAndScrollIntoViewIfNeeded(progress, false /* waitForVisible */);
+    await this._waitAndScrollIntoViewIfNeeded(progress, false /* waitForVisible */, true /* frameVisible */);
   }
 
   private async _clickablePoint(progress: Progress): Promise<{ point: types.Point, box: types.Rect } | 'error:notvisible' | 'error:notinviewport' | 'error:notconnected'> {
@@ -378,7 +378,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
   }
 
   async _retryPointerAction(progress: Progress, actionName: ActionName, waitForEnabled: boolean, action: (progress: Progress, point: types.Point) => Promise<void>,
-    options: { waitAfter: boolean | 'disabled' } & types.PointerActionOptions & types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
+    options: { waitAfter: boolean | 'disabled' } & types.PointerActionOptions & types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
     // Note: do not perform locator handlers checkpoint to avoid moving the mouse in the middle of a drag operation.
     const skipActionPreChecks = actionName === 'move and up';
     return await this._retryAction(progress, actionName, async (progress, retry) => {
@@ -393,7 +393,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
         { block: 'start', inline: 'start' },
       ];
       const forceScrollOptions = scrollOptions[retry % scrollOptions.length];
-      return await this._performPointerAction(progress, actionName, waitForEnabled, action, forceScrollOptions, options);
+      return await this._performPointerAction(progress, actionName, waitForEnabled, action, forceScrollOptions, options, frameVisible);
     }, { ...options, skipActionPreChecks });
   }
 
@@ -404,6 +404,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     action: (progress: Progress, point: types.Point) => Promise<void>,
     forceScrollOptions: ScrollIntoViewOptions | undefined,
     options: { waitAfter: boolean | 'disabled' } & types.PointerActionOptions & types.PointerActionWaitOptions,
+    frameVisible: boolean,
   ): Promise<PerformActionResult> {
     const { force = false, position, scroll } = options;
 
@@ -433,9 +434,9 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     if (!force) {
       const elementStates: ElementState[] = waitForEnabled ? ['visible', 'enabled', 'stable'] : ['visible', 'stable'];
       progress.log(`  waiting for element to be ${waitForEnabled ? 'visible, enabled and stable' : 'visible and stable'}`);
-      const result = await progress.race(this.evaluateInUtility(async ([injected, node, { elementStates }]) => {
-        return await injected.checkElementStates(node, elementStates);
-      }, { elementStates }));
+      const result = await progress.race(this.evaluateInUtility(async ([injected, node, { elementStates, frameVisible }]) => {
+        return await injected.checkElementStates(node, elementStates, frameVisible);
+      }, { elementStates, frameVisible }));
       if (result)
         return result;
       progress.log(`  element is ${waitForEnabled ? 'visible, enabled and stable' : 'visible and stable'}`);
@@ -530,65 +531,65 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async hover(progress: Progress, options: types.PointerActionOptions & types.PointerActionWaitOptions): Promise<void> {
     await this._markAsTargetElement(progress);
-    const result = await this._hover(progress, options);
+    const result = await this._hover(progress, options, true /* frameVisible */);
     return assertDone(throwRetargetableDOMError(result));
   }
 
-  _hover(progress: Progress, options: types.PointerActionOptions & types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
-    return this._retryPointerAction(progress, 'hover', false /* waitForEnabled */, (progress, point) => this._page.mouse.move(progress, point.x, point.y), { ...options, waitAfter: 'disabled' });
+  _hover(progress: Progress, options: types.PointerActionOptions & types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
+    return this._retryPointerAction(progress, 'hover', false /* waitForEnabled */, (progress, point) => this._page.mouse.move(progress, point.x, point.y), { ...options, waitAfter: 'disabled' }, frameVisible);
   }
 
   async click(progress: Progress, options: { noWaitAfter?: boolean } & types.MouseClickOptions & types.PointerActionWaitOptions): Promise<void> {
     await this._markAsTargetElement(progress);
-    const result = await this._click(progress, { ...options, waitAfter: !options.noWaitAfter });
+    const result = await this._click(progress, { ...options, waitAfter: !options.noWaitAfter }, true /* frameVisible */);
     return assertDone(throwRetargetableDOMError(result));
   }
 
-  _click(progress: Progress, options: { waitAfter: boolean | 'disabled' } & types.MouseClickOptions & types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
-    return this._retryPointerAction(progress, 'click', true /* waitForEnabled */, (progress, point) => this._page.mouse.click(progress, point.x, point.y, options), options);
+  _click(progress: Progress, options: { waitAfter: boolean | 'disabled' } & types.MouseClickOptions & types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
+    return this._retryPointerAction(progress, 'click', true /* waitForEnabled */, (progress, point) => this._page.mouse.click(progress, point.x, point.y, options), options, frameVisible);
   }
 
   async dblclick(progress: Progress, options: types.MouseMultiClickOptions & types.PointerActionWaitOptions): Promise<void> {
     await this._markAsTargetElement(progress);
-    const result = await this._dblclick(progress, options);
+    const result = await this._dblclick(progress, options, true /* frameVisible */);
     return assertDone(throwRetargetableDOMError(result));
   }
 
-  _dblclick(progress: Progress, options: types.MouseMultiClickOptions & types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
-    return this._retryPointerAction(progress, 'dblclick', true /* waitForEnabled */, (progress, point) => this._page.mouse.click(progress, point.x, point.y, { ...options, clickCount: 2 }), { ...options, waitAfter: 'disabled' });
+  _dblclick(progress: Progress, options: types.MouseMultiClickOptions & types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
+    return this._retryPointerAction(progress, 'dblclick', true /* waitForEnabled */, (progress, point) => this._page.mouse.click(progress, point.x, point.y, { ...options, clickCount: 2 }), { ...options, waitAfter: 'disabled' }, frameVisible);
   }
 
   async tap(progress: Progress, options: types.PointerActionWaitOptions): Promise<void> {
     await this._markAsTargetElement(progress);
-    const result = await this._tap(progress, options);
+    const result = await this._tap(progress, options, true /* frameVisible */);
     return assertDone(throwRetargetableDOMError(result));
   }
 
-  _tap(progress: Progress, options: types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
-    return this._retryPointerAction(progress, 'tap', true /* waitForEnabled */, (progress, point) => this._page.touchscreen.tap(progress, point.x, point.y), { ...options, waitAfter: 'disabled' });
+  _tap(progress: Progress, options: types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
+    return this._retryPointerAction(progress, 'tap', true /* waitForEnabled */, (progress, point) => this._page.touchscreen.tap(progress, point.x, point.y), { ...options, waitAfter: 'disabled' }, frameVisible);
   }
 
   async selectOption(progress: Progress, elements: ElementHandle[], values: types.SelectOption[], options: types.CommonActionOptions): Promise<string[]> {
     await this._markAsTargetElement(progress);
-    const result = await this._selectOption(progress, elements, values, options);
+    const result = await this._selectOption(progress, elements, values, options, true /* frameVisible */);
     return throwRetargetableDOMError(result);
   }
 
-  async _selectOption(progress: Progress, elements: ElementHandle[], values: types.SelectOption[], options: types.CommonActionOptions, box?: types.Rect): Promise<string[] | 'error:notconnected'> {
+  async _selectOption(progress: Progress, elements: ElementHandle[], values: types.SelectOption[], options: types.CommonActionOptions, frameVisible: boolean, box?: types.Rect): Promise<string[] | 'error:notconnected'> {
     let resultingOptions: string[] = [];
     const result = await this._retryAction(progress, 'select option', async progress => {
       await this.instrumentation.onBeforeInputAction(progress, this, undefined, box);
       if (!options.force)
         progress.log(`  waiting for element to be visible and enabled`);
       const optionsToSelect = [...elements, ...values];
-      const result = await progress.race(this.evaluateInUtility(async ([injected, node, { optionsToSelect, force }]) => {
+      const result = await progress.race(this.evaluateInUtility(async ([injected, node, { optionsToSelect, force, frameVisible }]) => {
         if (!force) {
-          const checkResult = await injected.checkElementStates(node, ['visible', 'enabled']);
+          const checkResult = await injected.checkElementStates(node, ['visible', 'enabled'], frameVisible);
           if (checkResult)
             return checkResult;
         }
         return injected.selectOptions(node, optionsToSelect);
-      }, { optionsToSelect, force: options.force }));
+      }, { optionsToSelect, force: options.force, frameVisible }));
       if (Array.isArray(result)) {
         progress.log('  selected specified option(s)');
         resultingOptions = result;
@@ -603,24 +604,24 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async fill(progress: Progress, value: string, options: types.CommonActionOptions): Promise<void> {
     await this._markAsTargetElement(progress);
-    const result = await this._fill(progress, value, options);
+    const result = await this._fill(progress, value, options, true /* frameVisible */);
     assertDone(throwRetargetableDOMError(result));
   }
 
-  async _fill(progress: Progress, value: string, options: types.CommonActionOptions, box?: types.Rect): Promise<'error:notconnected' | 'done'> {
+  async _fill(progress: Progress, value: string, options: types.CommonActionOptions, frameVisible: boolean, box?: types.Rect): Promise<'error:notconnected' | 'done'> {
     progress.log(`  fill("${value}")`);
     return await this._retryAction(progress, 'fill', async progress => {
       await this.instrumentation.onBeforeInputAction(progress, this, undefined, box);
       if (!options.force)
         progress.log('  waiting for element to be visible, enabled and editable');
-      const result = await progress.race(this.evaluateInUtility(async ([injected, node, { value, force }]) => {
+      const result = await progress.race(this.evaluateInUtility(async ([injected, node, { value, force, frameVisible }]) => {
         if (!force) {
-          const checkResult = await injected.checkElementStates(node, ['visible', 'enabled', 'editable']);
+          const checkResult = await injected.checkElementStates(node, ['visible', 'enabled', 'editable'], frameVisible);
           if (checkResult)
             return checkResult;
         }
         return injected.fill(node, value);
-      }, { value, force: options.force }));
+      }, { value, force: options.force, frameVisible }));
       if (result === 'needsinput') {
         if (value)
           await this._page.keyboard.insertText(progress, value);
@@ -637,14 +638,14 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     const result = await this._retryAction(progress, 'selectText', async progress => {
       if (!options.force)
         progress.log('  waiting for element to be visible');
-      return await progress.race(this.evaluateInUtility(async ([injected, node, { force }]) => {
+      return await progress.race(this.evaluateInUtility(async ([injected, node, { force, frameVisible }]) => {
         if (!force) {
-          const checkResult = await injected.checkElementStates(node, ['visible']);
+          const checkResult = await injected.checkElementStates(node, ['visible'], frameVisible);
           if (checkResult)
             return checkResult;
         }
         return injected.selectText(node);
-      }, { force: options.force }));
+      }, { force: options.force, frameVisible: true }));
     }, options);
     assertDone(throwRetargetableDOMError(result));
   }
@@ -656,7 +657,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return assertDone(throwRetargetableDOMError(result));
   }
 
-  async _drop(progress: Progress, inputFileItems: InputFilesItems, data: { mimeType: string, value: string }[], options: types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
+  async _drop(progress: Progress, inputFileItems: InputFilesItems, data: { mimeType: string, value: string }[], options: types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
     const { filePayloads, localPaths } = inputFileItems;
     let payloads: { name: string, mimeType: string, buffer: string, lastModifiedMs?: number }[];
     if (localPaths && !filePayloads) {
@@ -720,7 +721,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
         if (disposeHandle)
           handle.dispose();
       }
-    }, { ...options, waitAfter: 'disabled' });
+    }, { ...options, waitAfter: 'disabled' }, frameVisible);
   }
 
   async _setInputFiles(progress: Progress, items: InputFilesItems, box?: types.Rect): Promise<'error:notconnected' | 'done'> {
@@ -812,16 +813,16 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
   }
 
   async check(progress: Progress, options: { position?: types.Point } & types.PointerActionWaitOptions) {
-    const result = await this._setChecked(progress, true, options);
+    const result = await this._setChecked(progress, true, options, true /* frameVisible */);
     return assertDone(throwRetargetableDOMError(result));
   }
 
   async uncheck(progress: Progress, options: { position?: types.Point } & types.PointerActionWaitOptions) {
-    const result = await this._setChecked(progress, false, options);
+    const result = await this._setChecked(progress, false, options, true /* frameVisible */);
     return assertDone(throwRetargetableDOMError(result));
   }
 
-  async _setChecked(progress: Progress, state: boolean, options: { position?: types.Point } & types.PointerActionWaitOptions): Promise<'error:notconnected' | 'done'> {
+  async _setChecked(progress: Progress, state: boolean, options: { position?: types.Point } & types.PointerActionWaitOptions, frameVisible: boolean): Promise<'error:notconnected' | 'done'> {
     const isChecked = async (progress: Progress) => {
       const result = await progress.race(this.evaluateInUtility(([injected, node]) => injected.elementState(node, 'checked'), {}));
       if (result === 'error:notconnected' || result.received === 'error:notconnected')
@@ -834,7 +835,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
       return 'done';
     if (!state && checkedState.isRadio)
       throw new NonRecoverableDOMError('Cannot uncheck radio button. Radio buttons can only be unchecked by selecting another radio button in the same group.');
-    const result = await this._click(progress, { ...options, waitAfter: 'disabled' });
+    const result = await this._click(progress, { ...options, waitAfter: 'disabled' }, frameVisible);
     if (result !== 'done')
       return result;
     if (options.trial)
@@ -850,7 +851,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
   }
 
   async screenshot(progress: Progress, options: ScreenshotOptions): Promise<Buffer> {
-    return await this._page.screenshotter.screenshotElement(progress, this, options);
+    return await this._page.screenshotter.screenshotElement(progress, this, options, true /* frameVisible */);
   }
 
   async querySelector(progress: Progress, selector: string, options: types.StrictOptions): Promise<ElementHandle | null> {
@@ -914,7 +915,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     const actionName = `wait for ${state}`;
     const result = await this._retryAction(progress, actionName, async progress => {
       return await progress.race(this.evaluateInUtility(async ([injected, node, state]) => {
-        return (await injected.checkElementStates(node, [state])) || 'done';
+        return (await injected.checkElementStates(node, [state], true /* frameVisible */)) || 'done';
       }, state));
     }, {});
     assertDone(throwRetargetableDOMError(result));
diff --git a/packages/playwright-core/src/server/frameSelectors.ts b/packages/playwright-core/src/server/frameSelectors.ts
index 7d25600ff5da9..64f69770b35f2 100644
--- a/packages/playwright-core/src/server/frameSelectors.ts
+++ b/packages/playwright-core/src/server/frameSelectors.ts
@@ -37,10 +37,11 @@ export type SelectorInfo = {
 type SelectorInFrame = {
   frame: Frame;
   info: SelectorInfo;
+  frameVisible: boolean;
   scope?: ElementHandle;
 };
 
-type MatchedElementsCallback<Arg, R> = (data: { injected: InjectedScript, elements: Element[], info: SelectorInfo }, arg: Unboxed<Arg>) => R | Promise<R>;
+type MatchedElementsCallback<Arg, R> = (data: { injected: InjectedScript, elements: Element[], info: SelectorInfo, frameVisible: boolean }, arg: Unboxed<Arg>) => R | Promise<R>;
 
 export class FrameSelectors {
   readonly frame: Frame;
@@ -154,8 +155,8 @@ export class FrameSelectors {
 
     const result: SelectorInFrame[] = [];
     const seenFrames = new Set<Frame>();
-    for (const startFrame of await this._anyFrameCandidates(scope)) {
-      const resolved = await this._resolveChainedSelector(startFrame, selector, options, chunks, startFrame === this.frame ? scope : undefined, startFrame !== this.frame /* noStall */);
+    for (const { frame: startFrame, frameVisible } of await this._anyFrameCandidates(scope)) {
+      const resolved = await this._resolveChainedSelector(startFrame, selector, options, chunks, startFrame === this.frame ? scope : undefined, startFrame !== this.frame /* noStall */, frameVisible);
       // Different starting frames may resolve into the same frame, e.g. with an aria-ref selector.
       if (!resolved || seenFrames.has(resolved.frame))
         continue;
@@ -166,75 +167,77 @@ export class FrameSelectors {
   }
 
   // All the frames the selector may start in: the frame subtree, restricted to the scope when given.
-  private async _anyFrameCandidates(scope: ElementHandle | undefined): Promise<Frame[]> {
-    const result: Frame[] = [];
-    const collectSubtree = (frame: Frame) => {
-      result.push(frame);
-      for (const child of frame.childFrames())
-        collectSubtree(child);
+  private async _anyFrameCandidates(scope: ElementHandle | undefined): Promise<{ frame: Frame, frameVisible: boolean }[]> {
+    const result: { frame: Frame, frameVisible: boolean }[] = [];
+    const info = this._parseSelector('css=frame,iframe', { strict: false });
+    const collectSubtree = async (frame: Frame, frameVisible: boolean, scope: ElementHandle | undefined) => {
+      result.push({ frame, frameVisible });
+      const childFrames = await this._queryFrames(frame, info, scope, true /* noStall */, frameVisible);
+      for (const childFrame of childFrames ?? [])
+        await collectSubtree(childFrame.frame, childFrame.frameVisible, undefined);
     };
+    await collectSubtree(this.frame, true, scope);
+    return result;
+  }
 
-    if (!scope) {
-      collectSubtree(this.frame);
-      return result;
-    }
-
-    result.push(this.frame);
-    await this.frame.raceAgainstEvaluationStallingEvents(async () => {
-      const injected = await scope._context.injectedScript();
-      const frameElements = await injected.evaluateHandle((injected, scope) => {
-        return injected.querySelectorAll(injected.parseSelector('css=frame,iframe'), scope);
-      }, scope);
-      const count = await frameElements.evaluate(elements => elements.length);
-      for (let i = 0; i < count; ++i) {
-        const frameElement = await frameElements.evaluateHandle((elements, i) => elements[i], i) as ElementHandle<Element>;
-        const childFrame = await this.frame._page.delegate.getContentFrame(frameElement);
-        frameElement.dispose();
-        if (childFrame)
-          collectSubtree(childFrame);
+  private async _queryFrames(frame: Frame, info: SelectorInfo, scope: ElementHandle | undefined, noStall: boolean, parentFrameVisible: boolean): Promise<{ frame: Frame, frameVisible: boolean }[] | null> {
+    const context = noStall ? frame.existingContext(info.world) : await frame.context(info.world);
+    if (!context)
+      return null;
+    const query = async () => {
+      const injected = await context.injectedScript();
+      const arrayHandle = await injected.evaluateHandle((injected, { info, scope, selectorString }) => {
+        const elements = injected.querySelectorAll(info.parsed, scope || document);
+        if (info.strict && elements.length > 1)
+          throw injected.strictModeViolationError(info.parsed, elements);
+        for (const element of elements) {
+          if (element.nodeName !== 'IFRAME' && element.nodeName !== 'FRAME')
+            throw injected.createStacklessError(`Selector "${selectorString}" resolved to ${injected.previewNode(element)}, <iframe> was expected`);
+        }
+        return elements;
+      }, { info, scope, selectorString: stringifySelector(info.parsed) });
+      const visible = parentFrameVisible ? await injected.evaluate((injected, elements) => elements.map(element => injected.utils.isElementVisible(element)), arrayHandle) : [];
+      const properties = await arrayHandle.internalGetProperties();
+      arrayHandle.dispose();
+      const result: { frame: Frame, frameVisible: boolean }[] = [];
+      let visibleIndex = 0;
+      for (const property of properties.values()) {
+        const handle = property.asElement() as ElementHandle<Element> | null;
+        const contentFrame = handle ? await frame._page.delegate.getContentFrame(handle) : null;
+        property.dispose();
+        if (contentFrame)
+          result.push({ frame: contentFrame, frameVisible: parentFrameVisible && visible[visibleIndex] === true });
+        ++visibleIndex;
       }
-      frameElements.dispose();
-    }).catch(() => {});
-    return result;
+      return result;
+    };
+    if (!noStall)
+      return await query();
+    return await frame.raceAgainstEvaluationStallingEvents(query).catch(e => {
+      if (e instanceof EvaluationStalledError)
+        return null;
+      throw e;
+    });
   }
 
-  private async _resolveChainedSelector(startFrame: Frame, selector: string, options: types.StrictOptions, frameChunks: ParsedSelector[], scope: ElementHandle | undefined, noStall: boolean): Promise<SelectorInFrame | null> {
+  private async _resolveChainedSelector(startFrame: Frame, selector: string, options: types.StrictOptions, frameChunks: ParsedSelector[], scope: ElementHandle | undefined, noStall: boolean, startFrameVisible = true): Promise<SelectorInFrame | null> {
     let frame = startFrame;
+    let frameVisible = startFrameVisible;
     for (let i = 0; i < frameChunks.length - 1; ++i) {
       const info = this._parseSelector(frameChunks[i], options);
       frame = this._jumpToAriaRefFrameIfNeeded(selector, info, frame);
-      const context = noStall ? frame.existingContext(info.world) : await frame.context(info.world);
-      if (!context)
-        return null;
-      const queryFrameElement = async () => {
-        const injectedScript = await context.injectedScript();
-        return await injectedScript.evaluateHandle((injected, { info, scope, selectorString }) => {
-          const element = injected.querySelector(info.parsed, scope || document, info.strict);
-          if (element && element.nodeName !== 'IFRAME' && element.nodeName !== 'FRAME')
-            throw injected.createStacklessError(`Selector "${selectorString}" resolved to ${injected.previewNode(element)}, <iframe> was expected`);
-          return element;
-        }, { info, scope: i === 0 ? scope : undefined, selectorString: stringifySelector(info.parsed) });
-      };
-      const handle = noStall ? await frame.raceAgainstEvaluationStallingEvents(queryFrameElement).catch(e => {
-        if (e instanceof EvaluationStalledError)
-          return null;
-        throw e;
-      }) : await queryFrameElement();
-      const element = handle?.asElement() as ElementHandle<Element> | null;
-      if (!element)
-        return null;
-      const maybeFrame = await frame._page.delegate.getContentFrame(element);
-      element.dispose();
-      if (!maybeFrame)
+      const frames = await this._queryFrames(frame, info, i === 0 ? scope : undefined, noStall, frameVisible);
+      if (!frames?.length)
         return null;
-      frame = maybeFrame;
+      frame = frames[0].frame;
+      frameVisible = frames[0].frameVisible;
     }
     // If we end up in the different frame, we should start from the frame root, so throw away the scope.
     if (frame !== startFrame)
       scope = undefined;
     const lastChunk = frame.selectors._parseSelector(frameChunks[frameChunks.length - 1], options);
     frame = this._jumpToAriaRefFrameIfNeeded(selector, lastChunk, frame);
-    return { frame, info: lastChunk, scope };
+    return { frame, info: lastChunk, scope, frameVisible };
   }
 
   private async _callOnSelectorInternal<Arg, R>(
@@ -243,11 +246,11 @@ export class FrameSelectors {
     pageFunction: MatchedElementsCallback<Arg, R>,
     arg: Arg,
     returnByValue: boolean,
-  ): Promise<{ frame: Frame, info: SelectorInfo, result: R | SmartHandle<R> } | null> {
+  ): Promise<{ frame: Frame, info: SelectorInfo, frameVisible: boolean, result: R | SmartHandle<R> } | null> {
     const resolved = await this.resolveFramesForSelector(selector, options, options.scope);
-    let aggregatedResult: { frame: Frame, info: SelectorInfo, result: R | SmartHandle<R> } | null = null;
+    let aggregatedResult: { frame: Frame, info: SelectorInfo, frameVisible: boolean, result: R | SmartHandle<R> } | null = null;
     const noStall = resolved.length > 1;
-    for (const { frame, info, scope } of resolved) {
+    for (const { frame, info, scope, frameVisible } of resolved) {
       const world = options.mainWorld ? 'main' : info.world;
       const context = noStall ? frame.existingContext(world) : await frame.context(world);
       if (!context)
@@ -269,8 +272,8 @@ export class FrameSelectors {
           if (!elements.length && !params.callWithoutMatches)
             return '--playwright--no--result--value--';
           const func = injected.eval('(' + params.functionText + ')') as MatchedElementsCallback<Arg, R>;
-          return func({ injected, elements, info: params.info }, params.arg);
-        }, { info, scope, functionText: String(pageFunction), arg, callWithoutMatches: options.callWithoutMatches, markTargets: options.markTargets, returnByValue });
+          return func({ injected, elements, info: params.info, frameVisible: params.frameVisible }, params.arg);
+        }, { info, scope, frameVisible, functionText: String(pageFunction), arg, callWithoutMatches: options.callWithoutMatches, markTargets: options.markTargets, returnByValue });
         if (returnByValue && evalResult === '--playwright--no--result--value--')
           return;
         if (!returnByValue && (evalResult as JSHandle)._value === '--playwright--no--result--value--') {
@@ -288,7 +291,7 @@ export class FrameSelectors {
         continue;
       if (aggregatedResult)
         throw new NonRecoverableDOMError(`frameLocator() matched elements in multiple frames.`);
-      aggregatedResult = { frame, info, result: maybeResult.result };
+      aggregatedResult = { frame, info, frameVisible, result: maybeResult.result };
     }
     return aggregatedResult;
   }
@@ -298,9 +301,9 @@ export class FrameSelectors {
     options: types.StrictOptions & { mainWorld?: boolean, callWithoutMatches?: boolean, scope?: ElementHandle, markTargets?: 'all' | 'first' | 'none' },
     pageFunction: MatchedElementsCallback<Arg, R>,
     arg: Arg,
-  ): Promise<{ frame: Frame, info: SelectorInfo, result: R } | null> {
+  ): Promise<{ frame: Frame, info: SelectorInfo, frameVisible: boolean, result: R } | null> {
     const result = await this._callOnSelectorInternal(selector, options, pageFunction, arg, true /* returnByValue */);
-    return result as { frame: Frame, info: SelectorInfo, result: R } | null;
+    return result as { frame: Frame, info: SelectorInfo, frameVisible: boolean, result: R } | null;
   }
 
   async callOnSelectorHandle<Arg, R>(
@@ -308,9 +311,9 @@ export class FrameSelectors {
     options: types.StrictOptions & { mainWorld?: boolean, scope?: ElementHandle, markTargets?: 'all' | 'first' | 'none' },
     pageFunction: MatchedElementsCallback<Arg, R>,
     arg: Arg,
-  ): Promise<{ frame: Frame, info: SelectorInfo, result: SmartHandle<R> } | null> {
+  ): Promise<{ frame: Frame, info: SelectorInfo, frameVisible: boolean, result: SmartHandle<R> } | null> {
     const result = await this._callOnSelectorInternal(selector, { ...options, callWithoutMatches: false }, pageFunction, arg, false /* returnByValue */);
-    return result as { frame: Frame, info: SelectorInfo, result: SmartHandle<R> } | null;
+    return result as { frame: Frame, info: SelectorInfo, frameVisible: boolean, result: SmartHandle<R> } | null;
   }
 }
 
diff --git a/packages/playwright-core/src/server/frames.ts b/packages/playwright-core/src/server/frames.ts
index fb2d901d3ba77..61d866696109a 100644
--- a/packages/playwright-core/src/server/frames.ts
+++ b/packages/playwright-core/src/server/frames.ts
@@ -850,9 +850,9 @@ export class Frame extends SdkObject<FrameEventMap> {
       if (scope && await progress.race(scope.evaluateInUtility(([injected, node]) => node.isConnected, {})) !== true)
         throw new dom.NonRecoverableDOMError('Element is not attached to the DOM');
 
-      const resolved = await progress.race(this.selectors.callOnSelectorHandle(selector, { ...options, scope }, ({ injected, elements }) => {
+      const resolved = await progress.race(this.selectors.callOnSelectorHandle(selector, { ...options, scope }, ({ injected, elements, frameVisible }) => {
         const element: Element | undefined  = elements[0];
-        const visible = element ? injected.utils.isElementVisible(element) : false;
+        const visible = element ? injected.elementState(element, 'visible', frameVisible).matches : false;
         let log = '';
         if (elements.length > 1)
           log = `  locator resolved to ${elements.length} elements. Proceeding with the first one: ${injected.previewNode(elements[0])}`;
@@ -1199,11 +1199,12 @@ export class Frame extends SdkObject<FrameEventMap> {
   private async _retryWithProgressIfNotConnected<R>(
     progress: Progress,
     selector: string,
-    options: { strict?: boolean, noAutoWaiting?: boolean, force?: boolean, performActionPreChecks?: boolean },
-    action: (progress: Progress, handle: dom.ElementHandle<Element>, box?: types.Rect) => Promise<R | 'error:notconnected'>): Promise<R> {
+    options: { strict?: boolean, noAutoWaiting?: boolean, force?: boolean, performActionPreChecks?: boolean, waitForFrameVisible?: boolean },
+    action: (progress: Progress, handle: dom.ElementHandle<Element>, box: types.Rect | undefined, frameVisible: boolean) => Promise<R | 'error:notconnected'>): Promise<R> {
     progress.log(`waiting for ${this._asLocator(selector)}`);
     const noAutoWaiting = (options as any).__testHookNoAutoWaiting ?? options.noAutoWaiting;
     const performActionPreChecks = (options.performActionPreChecks ?? !options.force) && !noAutoWaiting;
+    const waitForFrameVisible = options.waitForFrameVisible && !options.force;
     return this.retryWithProgressAndBackoff(progress, async (progress, continuePolling) => {
       if (performActionPreChecks)
         await this._page.performActionPreChecks(progress);
@@ -1233,10 +1234,17 @@ export class Frame extends SdkObject<FrameEventMap> {
         result.dispose();
         return continuePolling;
       }
+      if (waitForFrameVisible && !resolved.frameVisible) {
+        if (noAutoWaiting)
+          throw new dom.NonRecoverableDOMError('Element is not visible');
+        progress.log('  element is inside a hidden frame, retrying');
+        result.dispose();
+        return continuePolling;
+      }
       const element = await progress.race(result.evaluateHandle(r => r.element)) as dom.ElementHandle<Element>;
       result.dispose();
       try {
-        const result = await action(progress, element, box);
+        const result = await action(progress, element, box, resolved.frameVisible);
         if (result === 'error:notconnected') {
           if (noAutoWaiting)
             throw new dom.NonRecoverableDOMError('Element is not attached to the DOM');
@@ -1251,22 +1259,22 @@ export class Frame extends SdkObject<FrameEventMap> {
   }
 
   async rafrafTimeoutScreenshotElementWithProgress(progress: Progress, selector: string, timeout: number, options: ScreenshotOptions): Promise<Buffer> {
-    return await this._retryWithProgressIfNotConnected(progress, selector, { strict: true, performActionPreChecks: true }, async (progress, handle) => {
+    return await this._retryWithProgressIfNotConnected(progress, selector, { strict: true, performActionPreChecks: true, waitForFrameVisible: true }, async (progress, handle, box, frameVisible) => {
       await handle._frame.rafrafTimeout(progress, timeout);
-      return await this._page.screenshotter.screenshotElement(progress, handle, options);
+      return await this._page.screenshotter.screenshotElement(progress, handle, options, frameVisible);
     });
   }
 
   async click(progress: Progress, selector: string, options: { noWaitAfter?: boolean } & types.MouseClickOptions & types.PointerActionWaitOptions) {
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._click(progress, { ...options, waitAfter: !options.noWaitAfter })));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._click(progress, { ...options, waitAfter: !options.noWaitAfter }, frameVisible)));
   }
 
   async dblclick(progress: Progress, selector: string, options: types.MouseMultiClickOptions & types.PointerActionWaitOptions) {
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._dblclick(progress, options)));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._dblclick(progress, options, frameVisible)));
   }
 
   async dragAndDrop(progress: Progress, source: string, target: string, options: types.DragActionOptions & types.PointerActionWaitOptions) {
-    dom.assertDone(await this._retryWithProgressIfNotConnected(progress, source, options, async (progress, handle) => {
+    dom.assertDone(await this._retryWithProgressIfNotConnected(progress, source, { ...options, waitForFrameVisible: true }, async (progress, handle, box, frameVisible) => {
       return handle._retryPointerAction(progress, 'move and down', false, async (progress, point) => {
         await this._page.mouse.move(progress, point.x, point.y);
         await this._page.mouse.down(progress);
@@ -1274,10 +1282,10 @@ export class Frame extends SdkObject<FrameEventMap> {
         ...options,
         waitAfter: 'disabled',
         position: options.sourcePosition,
-      });
+      }, frameVisible);
     }));
     // Note: do not perform locator handlers checkpoint to avoid moving the mouse in the middle of a drag operation.
-    dom.assertDone(await this._retryWithProgressIfNotConnected(progress, target, { ...options, performActionPreChecks: false }, async (progress, handle) => {
+    dom.assertDone(await this._retryWithProgressIfNotConnected(progress, target, { ...options, performActionPreChecks: false, waitForFrameVisible: true }, async (progress, handle, box, frameVisible) => {
       return handle._retryPointerAction(progress, 'move and up', false, async (progress, point) => {
         await this._page.mouse.move(progress, point.x, point.y, { steps: options.steps });
         await this._page.mouse.up(progress);
@@ -1285,18 +1293,18 @@ export class Frame extends SdkObject<FrameEventMap> {
         ...options,
         waitAfter: 'disabled',
         position: options.targetPosition,
-      });
+      }, frameVisible);
     }));
   }
 
   async tap(progress: Progress, selector: string, options: types.PointerActionWaitOptions) {
     if (!this._page.browserContext._options.hasTouch)
       throw new Error('The page does not support tap. Use hasTouch context option to enable touch support.');
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._tap(progress, options)));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._tap(progress, options, frameVisible)));
   }
 
   async fill(progress: Progress, selector: string, value: string, options: types.CommonActionOptions) {
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle, box) => handle._fill(progress, value, options, box)));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._fill(progress, value, options, frameVisible, box)));
   }
 
   async focus(progress: Progress, selector: string, options: types.StrictOptions & { noAutoWaiting?: boolean }) {
@@ -1371,7 +1379,7 @@ export class Frame extends SdkObject<FrameEventMap> {
     return result;
   }
 
-  private async _elementState(progress: Progress, selector: string, state: ElementStateWithoutStable, options: types.QueryOnSelectorOptions, scope?: dom.ElementHandle): Promise<boolean> {
+  private async _elementState(progress: Progress, selector: string, state: Exclude<ElementStateWithoutStable, 'visible' | 'hidden'>, options: types.QueryOnSelectorOptions, scope?: dom.ElementHandle): Promise<boolean> {
     const { result } = await this._waitForFunctionOnSelector(progress, selector, (injected, element, data) => {
       return { result: injected.elementState(element, data.state) };
     }, { state }, options, scope);
@@ -1387,8 +1395,8 @@ export class Frame extends SdkObject<FrameEventMap> {
 
   async isVisibleInternal(progress: Progress, selector: string, options: types.StrictOptions = {}, scope?: dom.ElementHandle): Promise<boolean> {
     try {
-      const resolved = await progress.race(this.selectors.callOnSelector(selector, { ...options, scope }, ({ injected, elements }) => {
-        return injected.elementState(elements[0], 'visible').matches;
+      const resolved = await progress.race(this.selectors.callOnSelector(selector, { ...options, scope }, ({ injected, elements, frameVisible }) => {
+        return injected.elementState(elements[0], 'visible', frameVisible).matches;
       }, {}));
       if (!resolved)
         return false;
@@ -1421,11 +1429,11 @@ export class Frame extends SdkObject<FrameEventMap> {
   }
 
   async hover(progress: Progress, selector: string, options: types.PointerActionOptions & types.PointerActionWaitOptions) {
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._hover(progress, options)));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._hover(progress, options, frameVisible)));
   }
 
   async selectOption(progress: Progress, selector: string, elements: dom.ElementHandle[], values: types.SelectOption[], options: types.CommonActionOptions): Promise<string[]> {
-    return await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle, box) => handle._selectOption(progress, elements, values, options, box));
+    return await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._selectOption(progress, elements, values, options, frameVisible, box));
   }
 
   async setInputFiles(progress: Progress, selector: string, params: Omit<channels.FrameSetInputFilesParams, 'timeout'> & { noAutoWaiting?: boolean }): Promise<channels.FrameSetInputFilesResult> {
@@ -1440,7 +1448,7 @@ export class Frame extends SdkObject<FrameEventMap> {
       throw new Error('At least one of "files" or "data" must be provided.');
     const inputFileItems = hasFiles ? await progress.race(prepareFilesForUpload(this, params)) : { filePayloads: undefined, localPaths: undefined };
     const data = params.data ?? [];
-    dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._drop(progress, inputFileItems, data, options)));
+    dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._drop(progress, inputFileItems, data, options, frameVisible)));
   }
 
   async type(progress: Progress, selector: string, text: string, options: { delay?: number, noAutoWaiting?: boolean } & types.StrictOptions) {
@@ -1452,11 +1460,11 @@ export class Frame extends SdkObject<FrameEventMap> {
   }
 
   async check(progress: Progress, selector: string, options: types.PointerActionWaitOptions) {
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._setChecked(progress, true, options)));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._setChecked(progress, true, options, frameVisible)));
   }
 
   async uncheck(progress: Progress, selector: string, options: types.PointerActionWaitOptions) {
-    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, options, (progress, handle) => handle._setChecked(progress, false, options)));
+    return dom.assertDone(await this._retryWithProgressIfNotConnected(progress, selector, { ...options, waitForFrameVisible: true }, (progress, handle, box, frameVisible) => handle._setChecked(progress, false, options, frameVisible)));
   }
 
   async waitForTimeout(progress: Progress, timeout: number) {
@@ -1546,12 +1554,12 @@ export class Frame extends SdkObject<FrameEventMap> {
     let missingReceived = false;
 
     // Non-array expectations are strict (callOnSelector throws on multiple); array ones are not.
-    const resolved = await progress.race(this.selectors.callOnSelector(effectiveSelector, { strict: !isArray, mainWorld, markTargets: 'all' }, async ({ injected, elements }, options) => {
+    const resolved = await progress.race(this.selectors.callOnSelector(effectiveSelector, { strict: !isArray, mainWorld, markTargets: 'all' }, async ({ injected, elements, frameVisible }, options) => {
       const isArray = options.expression === 'to.have.count' || options.expression.endsWith('.array');
       const log = isArray
         ? `  locator resolved to ${elements.length} element${elements.length === 1 ? '' : 's'}`
         : `  locator resolved to ${injected.previewNode(elements[0])}`;
-      return { log, ...await injected.expect(elements[0], options, elements) };
+      return { log, ...await injected.expect(elements[0], options, elements, frameVisible) };
     }, options));
 
     if (resolved) {
diff --git a/packages/playwright-core/src/server/screenshotter.ts b/packages/playwright-core/src/server/screenshotter.ts
index 33db059bbb111..c2aa7b12c759e 100644
--- a/packages/playwright-core/src/server/screenshotter.ts
+++ b/packages/playwright-core/src/server/screenshotter.ts
@@ -221,7 +221,7 @@ export class Screenshotter {
     });
   }
 
-  async screenshotElement(progress: Progress, handle: dom.ElementHandle, options: ScreenshotOptions): Promise<Buffer> {
+  async screenshotElement(progress: Progress, handle: dom.ElementHandle, options: ScreenshotOptions, frameVisible: boolean): Promise<Buffer> {
     const format = validateScreenshotOptions(options);
     return this._queue._postTask(async () => {
       progress.log('taking element screenshot');
@@ -229,7 +229,7 @@ export class Screenshotter {
 
       await this._preparePageForScreenshot(progress, handle._frame, options.style, options.caret !== 'initial', options.animations === 'disabled');
       try {
-        await handle._waitAndScrollIntoViewIfNeeded(progress, true /* waitForVisible */);
+        await handle._waitAndScrollIntoViewIfNeeded(progress, true /* waitForVisible */, frameVisible);
 
         const boundingBox = await handle.boundingBox(progress);
         assert(boundingBox, 'Node is either not visible or not an HTMLElement');
diff --git a/tests/page/locator-any-frame.spec.ts b/tests/page/locator-any-frame.spec.ts
index 9059c437fac3f..847aa72b835d6 100644
--- a/tests/page/locator-any-frame.spec.ts
+++ b/tests/page/locator-any-frame.spec.ts
@@ -526,3 +526,22 @@ it('should support toHaveCount while another iframe is stalled', async ({ page,
   await expect.poll(() => page.frames().length).toBe(3);
   await expect(page.frameLocator().locator('button')).toHaveCount(1);
 });
+
+it('should treat elements inside hidden iframe as hidden', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/42719' } }, async ({ page, server }) => {
+  await routePage(page, 'empty.html', `<iframe src="a.html" style="visibility: hidden"></iframe>`);
+  await routePage(page, 'a.html', `<button onclick="window.__clicked = true">Click me</button>`);
+  await page.goto(server.EMPTY_PAGE);
+  const button = page.frameLocator().locator('button');
+  await expect(button).toBeAttached();
+  expect(await button.isVisible()).toBe(false);
+  await expect(button).toBeHidden();
+
+  const error = await button.click({ timeout: 1000 }).catch(e => e);
+  expect(error.message).toContain('element is inside a hidden frame, retrying');
+  expect(await page.frames()[1].evaluate(() => (window as any).__clicked)).toBe(undefined);
+
+  await page.evaluate(() => document.querySelector('iframe')!.style.visibility = 'visible');
+  await expect(button).toBeVisible();
+  await button.click();
+  expect(await page.frames()[1].evaluate(() => (window as any).__clicked)).toBe(true);
+});
diff --git a/tests/page/locator-frame.spec.ts b/tests/page/locator-frame.spec.ts
index 661cc24cc6cb0..e39e63f4035f9 100644
--- a/tests/page/locator-frame.spec.ts
+++ b/tests/page/locator-frame.spec.ts
@@ -318,3 +318,65 @@ it('frameLocator.owner should work', async ({ page, server }) => {
   await expect(locator).toBeVisible();
   expect(await locator.getAttribute('name')).toBe('frame1');
 });
+
+it('should treat elements inside hidden iframe as hidden', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/42719' } }, async ({ page }) => {
+  await page.setContent(`
+    <iframe name="hidden" style="visibility: hidden" srcdoc="<button>Hidden</button>"></iframe>
+    <div style="visibility: hidden">
+      <iframe name="hidden-parent" srcdoc="<button>Hidden parent</button>"></iframe>
+      <iframe name="visible-override" style="visibility: visible" srcdoc="<button>Visible override</button>"></iframe>
+    </div>
+    <iframe name="outer" style="visibility: hidden" srcdoc="<iframe name='inner' srcdoc='<button>Nested</button>'></iframe>"></iframe>
+  `);
+
+  for (const button of [
+    page.frameLocator('[name=hidden]').locator('button'),
+    page.frameLocator('[name=hidden-parent]').locator('button'),
+    page.frameLocator('[name=outer]').frameLocator('[name=inner]').locator('button'),
+  ]) {
+    await expect(button).toBeAttached();
+    expect(await button.isVisible()).toBe(false);
+    expect(await button.isHidden()).toBe(true);
+    await expect(button).toBeHidden();
+    await expect(button).not.toBeVisible();
+    await button.waitFor({ state: 'hidden' });
+  }
+
+  const button = page.frameLocator('[name=visible-override]').locator('button');
+  expect(await button.isVisible()).toBe(true);
+  await expect(button).toBeVisible();
+  await button.waitFor({ state: 'visible' });
+});
+
+it('should wait for hidden iframe to become visible', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/42719' } }, async ({ page }) => {
+  await page.setContent(`<iframe name="frame" style="visibility: hidden" srcdoc="<button onclick='window.__clicked = true'>Button</button>"></iframe>`);
+  const button = page.frameLocator('[name=frame]').locator('button');
+  await expect(button).toBeHidden();
+
+  const error = await button.click({ timeout: 1000 }).catch(e => e);
+  expect(error.message).toContain('element is inside a hidden frame, retrying');
+  expect(await button.evaluate(() => (window as any).__clicked)).toBe(undefined);
+
+  const clickPromise = button.click();
+  const visiblePromise = expect(button).toBeVisible();
+  await page.evaluate(() => document.querySelector('iframe')!.style.visibility = 'visible');
+  await Promise.all([clickPromise, visiblePromise]);
+  expect(await button.evaluate(() => (window as any).__clicked)).toBe(true);
+
+  await page.evaluate(() => document.querySelector('iframe')!.style.visibility = 'hidden');
+  await expect(button).toBeHidden();
+  expect(await button.isVisible()).toBe(false);
+});
+
+it('should treat elements inside hidden cross-origin iframe as hidden', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/42719' } }, async ({ page, server }) => {
+  await page.goto(server.EMPTY_PAGE);
+  await page.setContent(`<iframe style="visibility: hidden" src="${server.CROSS_PROCESS_PREFIX}/frames/frame.html"></iframe>`);
+  const div = page.frameLocator('iframe').locator('div');
+  await expect(div).toHaveText(`Hi, I'm frame`);
+  expect(await div.isVisible()).toBe(false);
+  await expect(div).toBeHidden();
+
+  await page.evaluate(() => document.querySelector('iframe')!.style.visibility = 'visible');
+  await expect(div).toBeVisible();
+  expect(await div.isVisible()).toBe(true);
+});
diff --git a/tests/page/page-aria-snapshot-ai.spec.ts b/tests/page/page-aria-snapshot-ai.spec.ts
index 27f0eea5ca411..7d070c25c58a5 100644
--- a/tests/page/page-aria-snapshot-ai.spec.ts
+++ b/tests/page/page-aria-snapshot-ai.spec.ts
@@ -971,3 +971,18 @@ it('should only annotate the top element in a hidden subtree', { annotation: { t
       - paragraph [ref=e4]: Paragraph
   `);
 });
+
+it('should not include hidden iframes', async ({ page }) => {
+  await page.setContent(`
+    <iframe name="visible" srcdoc="<button>Visible</button>"></iframe>
+    <iframe name="hidden" style="visibility: hidden" srcdoc="<button>Hidden</button>"></iframe>
+    <iframe name="none" style="display: none" srcdoc="<button>None</button>"></iframe>
+  `);
+  const snapshot = await snapshotForAI(page);
+  expect(snapshot).toContainYaml(`
+    - iframe [ref=e2]:
+      - button "Visible" [ref=f1e2]
+  `);
+  expect(snapshot).not.toContain('Hidden');
+  expect(snapshot).not.toContain('None');
+});
diff --git a/tests/page/page-aria-snapshot.spec.ts b/tests/page/page-aria-snapshot.spec.ts
index 7cb41c8881620..bf0dd98a3be03 100644
--- a/tests/page/page-aria-snapshot.spec.ts
+++ b/tests/page/page-aria-snapshot.spec.ts
@@ -794,3 +794,14 @@ it('should not include box when option is omitted', async ({ page }) => {
   const snapshot = await page.ariaSnapshot();
   expect(snapshot).not.toMatch(/\[box=/);
 });
+
+it('should not include hidden iframes', async ({ page }) => {
+  await page.setContent(`
+    <iframe name="visible" srcdoc="<button>Visible</button>"></iframe>
+    <iframe name="hidden" style="visibility: hidden" srcdoc="<button>Hidden</button>"></iframe>
+    <iframe name="none" style="display: none" srcdoc="<button>None</button>"></iframe>
+  `);
+  expect(await page.ariaSnapshot()).toBe(unshift(`
+    - iframe
+  `));
+});