From fd81982c3377124cc58f994284d3418f5709c069 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 18 Oct 2021 10:47:37 -0700
Subject: [PATCH] fix(selectors): combine visible with other selectors (#9585)

---
 .../src/server/injected/injectedScript.ts         |  3 ++-
 tests/page/locator-misc-2.spec.ts                 | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts
index 672a8be9dd..36ca779ad7 100644
--- a/packages/playwright-core/src/server/injected/injectedScript.ts
+++ b/packages/playwright-core/src/server/injected/injectedScript.ts
@@ -154,7 +154,8 @@ export class InjectedScript {
 
     if (part.name === 'visible') {
       const visible = Boolean(part.body);
-      return roots.filter(match => visible === isVisible(match.element));
+      const filtered = roots.filter(match => visible === isVisible(match.element));
+      return this._querySelectorRecursively(filtered, selector, index + 1, queryCache);
     }
 
     const result: ElementMatch[] = [];
diff --git a/tests/page/locator-misc-2.spec.ts b/tests/page/locator-misc-2.spec.ts
index 614a444cd8..19416e370f 100644
--- a/tests/page/locator-misc-2.spec.ts
+++ b/tests/page/locator-misc-2.spec.ts
@@ -99,3 +99,18 @@ it('should waitFor hidden', async ({ page }) => {
   await page.$eval('div', div => div.innerHTML = '');
   await promise;
 });
+
+it('should combine visible with other selectors', async ({ page }) => {
+  page.on('console', m => console.log(m.text()));
+  await page.setContent(`<div>
+  <div class="item" style="display: none">Hidden data0</div>
+  <div class="item">visible data1</div>
+  <div class="item" style="display: none">Hidden data1</div>
+  <div class="item">visible data2</div>
+  <div class="item" style="display: none">Hidden data1</div>
+  <div class="item">visible data3</div>
+  </div>`);
+  const locator = page.locator('.item >> visible=true').nth(1);
+  await expect(locator).toHaveText('visible data2');
+  await expect(page.locator('.item >> visible=true >> text=data3')).toHaveText('visible data3');
+});