From 2ac9c08d0ca01a65cb3c361a9334ef9804421332 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 2 Dec 2021 10:31:06 -0800
Subject: [PATCH] feat(inputValue): allow on labels, retarget (#10666)

---
 packages/playwright-core/src/server/dom.ts                | 6 +++---
 packages/playwright-core/src/server/frames.ts             | 5 +++--
 .../playwright-core/src/server/injected/injectedScript.ts | 1 +
 tests/page/elementhandle-convenience.spec.ts              | 7 +++++++
 tests/page/locator-convenience.spec.ts                    | 6 ++++++
 tests/playwright-test/playwright.expect.text.spec.ts      | 8 +++++++-
 6 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/playwright-core/src/server/dom.ts b/packages/playwright-core/src/server/dom.ts
index 9a261d50a1..a6cf6178c1 100644
--- a/packages/playwright-core/src/server/dom.ts
+++ b/packages/playwright-core/src/server/dom.ts
@@ -199,10 +199,10 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async inputValue(): Promise<string> {
     return throwRetargetableDOMError(await this.evaluateInUtility(([injected, node]) => {
-      if (node.nodeType !== Node.ELEMENT_NODE || (node.nodeName !== 'INPUT' && node.nodeName !== 'TEXTAREA' && node.nodeName !== 'SELECT'))
+      const element = injected.retarget(node, 'follow-label');
+      if (!element || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT'))
         throw injected.createStacklessError('Node is not an <input>, <textarea> or <select> element');
-      const element = node as unknown as (HTMLInputElement | HTMLTextAreaElement);
-      return { value: element.value };
+      return { value: (element as HTMLInputElement | HTMLTextAreaElement).value };
     }, undefined)).value;
   }
 
diff --git a/packages/playwright-core/src/server/frames.ts b/packages/playwright-core/src/server/frames.ts
index 6a2f31d77b..2fab5b3f1e 100644
--- a/packages/playwright-core/src/server/frames.ts
+++ b/packages/playwright-core/src/server/frames.ts
@@ -1117,8 +1117,9 @@ export class Frame extends SdkObject {
   }
 
   async inputValue(metadata: CallMetadata, selector: string, options: types.TimeoutOptions & types.StrictOptions = {}): Promise<string> {
-    return this._scheduleRerunnableTask(metadata, selector, (progress, element) => {
-      if (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT')
+    return this._scheduleRerunnableTask(metadata, selector, (progress, node) => {
+      const element = progress.injectedScript.retarget(node, 'follow-label');
+      if (!element || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT'))
         throw progress.injectedScript.createStacklessError('Node is not an <input>, <textarea> or <select> element');
       return (element as any).value;
     }, undefined, options);
diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts
index 0febe508bb..2c4ab0855a 100644
--- a/packages/playwright-core/src/server/injected/injectedScript.ts
+++ b/packages/playwright-core/src/server/injected/injectedScript.ts
@@ -954,6 +954,7 @@ export class InjectedScript {
       } else if (expression === 'to.have.url') {
         received = document.location.href;
       } else if (expression === 'to.have.value') {
+        element = this.retarget(element, 'follow-label')!;
         if (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT')
           throw this.createStacklessError('Not an input element');
         received = (element as any).value;
diff --git a/tests/page/elementhandle-convenience.spec.ts b/tests/page/elementhandle-convenience.spec.ts
index 039fbecee8..bb5a4fb657 100644
--- a/tests/page/elementhandle-convenience.spec.ts
+++ b/tests/page/elementhandle-convenience.spec.ts
@@ -58,6 +58,13 @@ it('inputValue should work', async ({ page, server }) => {
   expect(await handle2.inputValue().catch(e => e.message)).toContain('Node is not an <input>, <textarea> or <select> element');
 });
 
+it('inputValue should work on label', async ({ page, server }) => {
+  await page.setContent(`<label><input type=text></input></label>`);
+  await page.fill('input', 'foo');
+  const handle = await page.$('label');
+  expect(await handle.inputValue()).toBe('foo');
+});
+
 it('innerHTML should work', async ({ page, server }) => {
   await page.goto(`${server.PREFIX}/dom.html`);
   const handle = await page.$('#outer');
diff --git a/tests/page/locator-convenience.spec.ts b/tests/page/locator-convenience.spec.ts
index 20f84f139d..c04e732dae 100644
--- a/tests/page/locator-convenience.spec.ts
+++ b/tests/page/locator-convenience.spec.ts
@@ -58,6 +58,12 @@ it('inputValue should work', async ({ page, server }) => {
   expect(await locator2.inputValue().catch(e => e.message)).toContain('Node is not an <input>, <textarea> or <select> element');
 });
 
+it('inputValue should work on label', async ({ page, server }) => {
+  await page.setContent(`<label><input type=text></input></label>`);
+  await page.fill('input', 'foo');
+  expect(await page.locator('label').inputValue()).toBe('foo');
+});
+
 it('innerHTML should work', async ({ page, server }) => {
   await page.goto(`${server.PREFIX}/dom.html`);
   const locator = page.locator('#outer');
diff --git a/tests/playwright-test/playwright.expect.text.spec.ts b/tests/playwright-test/playwright.expect.text.spec.ts
index 7fec79d570..5908eb6690 100644
--- a/tests/playwright-test/playwright.expect.text.spec.ts
+++ b/tests/playwright-test/playwright.expect.text.spec.ts
@@ -341,9 +341,15 @@ test('should support toHaveValue', async ({ runInlineTest }) => {
         await locator.fill('Text content');
         await expect(locator).toHaveValue('Text content');
       });
+
+      test('pass on label', async ({ page }) => {
+        await page.setContent('<label><input></input></label>');
+        await page.locator('label input').fill('Text content');
+        await expect(page.locator('label')).toHaveValue('Text content');
+      });
       `,
   }, { workers: 1 });
-  expect(result.passed).toBe(1);
+  expect(result.passed).toBe(2);
   expect(result.exitCode).toBe(0);
 });