From 13dedd27ca5c1a954747e82a533bd7da09bdc548 Mon Sep 17 00:00:00 2001
From: Ross Wollman <rwoll@users.noreply.github.com>
Date: Mon, 28 Mar 2022 16:10:16 -0700
Subject: [PATCH] test: out-of-viewport should be considered visible (#13134)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #13131.

Per the visibility spec on https://playwright.dev/docs/next/actionability#visible:

> Element is considered visible when it has non-empty bounding box and does not have visibility:hidden computed style. Note that elements of zero size or with display:none are not considered visible.

✅ non-empty bounding box
✅ does not have visibility:hidden

Given the above conditions are satisfied, the locator is considered visible.

https://github.com/microsoft/playwright/issues/8740 proposes something like `isInViewport()` that would be better suited for checking if an element is offscreen.
---
 tests/page/page-wait-for-selector-2.spec.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/tests/page/page-wait-for-selector-2.spec.ts b/tests/page/page-wait-for-selector-2.spec.ts
index e68975c826..f242744a29 100644
--- a/tests/page/page-wait-for-selector-2.spec.ts
+++ b/tests/page/page-wait-for-selector-2.spec.ts
@@ -67,6 +67,27 @@ it('should wait for visible recursively', async ({ page, server }) => {
   expect(divVisible).toBe(true);
 });
 
+it('should consider outside of viewport visible', async ({ page }) => {
+  await page.setContent(`
+    <style>
+      .cover {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100px;
+        height: 100px;
+        background-color: red;
+        transform: translateX(-200px);
+      }
+    </style>
+    <div class="cover">cover</div>
+  `);
+
+  const cover = page.locator('.cover');
+  await cover.waitFor({ state: 'visible' });
+  await expect(cover).toBeVisible();
+});
+
 it('hidden should wait for hidden', async ({ page, server }) => {
   let divHidden = false;
   await page.setContent(`<div style='display: block;'>content</div>`);