From 731f9453c53f48c38c46c5dc4110fa44cd7427b5 Mon Sep 17 00:00:00 2001
From: Fabian Mendez <32204060+fabianMendez@users.noreply.github.com>
Date: Tue, 3 Aug 2021 10:22:40 -0500
Subject: [PATCH] feat(inputValue): implement inputValue for select elements
 (#7951)

---
 docs/src/api/class-elementhandle.md          |  2 +-
 docs/src/api/class-frame.md                  |  2 +-
 docs/src/api/class-locator.md                |  2 +-
 docs/src/api/class-page.md                   |  2 +-
 src/server/common/domErrors.ts               |  2 +-
 src/server/dom.ts                            | 12 ++++++------
 tests/assets/dom.html                        |  1 +
 tests/page/elementhandle-convenience.spec.ts |  7 +++++--
 tests/page/locator-convenience.spec.ts       |  7 +++++--
 types/types.d.ts                             |  8 ++++----
 10 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/docs/src/api/class-elementhandle.md b/docs/src/api/class-elementhandle.md
index 841ec7adc3..cc7e4021f0 100644
--- a/docs/src/api/class-elementhandle.md
+++ b/docs/src/api/class-elementhandle.md
@@ -516,7 +516,7 @@ Returns the `element.innerText`.
 ## async method: ElementHandle.inputValue
 - returns: <[string]>
 
-Returns `input.value` for `<input>` or `<textarea>` element. Throws for non-input elements.
+Returns `input.value` for `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
 
 ### option: ElementHandle.inputValue.timeout = %%-input-timeout-%%
 
diff --git a/docs/src/api/class-frame.md b/docs/src/api/class-frame.md
index 056a4c0484..ae8c01f132 100644
--- a/docs/src/api/class-frame.md
+++ b/docs/src/api/class-frame.md
@@ -855,7 +855,7 @@ Returns `element.innerText`.
 ## async method: Frame.inputValue
 - returns: <[string]>
 
-Returns `input.value` for the selected `<input>` or `<textarea>` element. Throws for non-input elements.
+Returns `input.value` for the selected `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
 
 ### param: Frame.inputValue.selector = %%-input-selector-%%
 
diff --git a/docs/src/api/class-locator.md b/docs/src/api/class-locator.md
index 2de827f540..60c3fcb676 100644
--- a/docs/src/api/class-locator.md
+++ b/docs/src/api/class-locator.md
@@ -520,7 +520,7 @@ Returns the `element.innerText`.
 ## async method: Locator.inputValue
 - returns: <[string]>
 
-Returns `input.value` for `<input>` or `<textarea>` element. Throws for non-input elements.
+Returns `input.value` for `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
 
 ### option: Locator.inputValue.timeout = %%-input-timeout-%%
 
diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index 67f7f778a9..ce4247a6ab 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -1961,7 +1961,7 @@ Returns `element.innerText`.
 ## async method: Page.inputValue
 - returns: <[string]>
 
-Returns `input.value` for the selected `<input>` or `<textarea>` element. Throws for non-input elements.
+Returns `input.value` for the selected `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
 
 ### param: Page.inputValue.selector = %%-input-selector-%%
 
diff --git a/src/server/common/domErrors.ts b/src/server/common/domErrors.ts
index fc374066bb..7b43195754 100644
--- a/src/server/common/domErrors.ts
+++ b/src/server/common/domErrors.ts
@@ -22,7 +22,7 @@ export type FatalDOMError =
   'error:notfillablenumberinput' |
   'error:notvaliddate' |
   'error:notinput' |
-  'error:notinputvalue' |
+  'error:hasnovalue' |
   'error:notselect' |
   'error:notcheckbox' |
   'error:notmultiplefileinput';
diff --git a/src/server/dom.ts b/src/server/dom.ts
index 9bb1be1dd2..500d707d3e 100644
--- a/src/server/dom.ts
+++ b/src/server/dom.ts
@@ -181,8 +181,8 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async inputValue(): Promise<string> {
     return throwFatalDOMError(await this.evaluateInUtility(([injeced, node]) => {
-      if (node.nodeType !== Node.ELEMENT_NODE || (node.nodeName !== 'INPUT' && node.nodeName !== 'TEXTAREA'))
-        return 'error:notinputvalue';
+      if (node.nodeType !== Node.ELEMENT_NODE || (node.nodeName !== 'INPUT' && node.nodeName !== 'TEXTAREA' && node.nodeName !== 'SELECT'))
+        return 'error:hasnovalue';
       const element = node as unknown as (HTMLInputElement | HTMLTextAreaElement);
       return { value: element.value };
     }, undefined)).value;
@@ -883,8 +883,8 @@ export function throwFatalDOMError<T>(result: T | FatalDOMError): T {
     throw new Error(`Malformed value`);
   if (result === 'error:notinput')
     throw new Error('Node is not an HTMLInputElement');
-  if (result === 'error:notinputvalue')
-    throw new Error('Node is not an HTMLInputElement or HTMLTextAreaElement');
+  if (result === 'error:hasnovalue')
+    throw new Error('Node is not an HTMLInputElement or HTMLTextAreaElement or HTMLSelectElement');
   if (result === 'error:notselect')
     throw new Error('Element is not a <select> element.');
   if (result === 'error:notcheckbox')
@@ -1039,8 +1039,8 @@ export function inputValueTask(selector: SelectorInfo): SchedulableTask<string>
       if (!element)
         return continuePolling;
       progress.log(`  selector resolved to ${injected.previewNode(element)}`);
-      if (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA')
-        return 'error:notinputvalue';
+      if (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA' && element.nodeName !== 'SELECT')
+        return 'error:hasnovalue';
       return (element as any).value;
     });
   }, { parsed: selector.parsed, strict: selector.strict,  });
diff --git a/tests/assets/dom.html b/tests/assets/dom.html
index d214becc5c..25572912e7 100644
--- a/tests/assets/dom.html
+++ b/tests/assets/dom.html
@@ -2,3 +2,4 @@
 more text</div></div><input id="check" type=checkbox checked foo="bar&quot;">
 <input id="input"></input>
 <textarea id="textarea"></textarea>
+<select id="select"><option></option><option value="foo"></option></select>
diff --git a/tests/page/elementhandle-convenience.spec.ts b/tests/page/elementhandle-convenience.spec.ts
index 79ba9ce5a4..3ecd81be62 100644
--- a/tests/page/elementhandle-convenience.spec.ts
+++ b/tests/page/elementhandle-convenience.spec.ts
@@ -42,6 +42,9 @@ it('getAttribute should work', async ({ page, server }) => {
 it('inputValue should work', async ({ page, server }) => {
   await page.goto(`${server.PREFIX}/dom.html`);
 
+  await page.selectOption('#select', 'foo');
+  expect(await page.inputValue('#select')).toBe('foo');
+
   await page.fill('#textarea', 'text value');
   expect(await page.inputValue('#textarea')).toBe('text value');
 
@@ -50,9 +53,9 @@ it('inputValue should work', async ({ page, server }) => {
   const handle = await page.$('#input');
   expect(await handle.inputValue()).toBe('input value');
 
-  expect(await page.inputValue('#inner').catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement');
+  expect(await page.inputValue('#inner').catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement or HTMLSelectElement');
   const handle2 = await page.$('#inner');
-  expect(await handle2.inputValue().catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement');
+  expect(await handle2.inputValue().catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement or HTMLSelectElement');
 });
 
 it('innerHTML should work', async ({ page, server }) => {
diff --git a/tests/page/locator-convenience.spec.ts b/tests/page/locator-convenience.spec.ts
index db96de60b9..a8cd9ed5b0 100644
--- a/tests/page/locator-convenience.spec.ts
+++ b/tests/page/locator-convenience.spec.ts
@@ -42,6 +42,9 @@ it('getAttribute should work', async ({ page, server }) => {
 it('inputValue should work', async ({ page, server }) => {
   await page.goto(`${server.PREFIX}/dom.html`);
 
+  await page.selectOption('#select', 'foo');
+  expect(await page.inputValue('#select')).toBe('foo');
+
   await page.fill('#textarea', 'text value');
   expect(await page.inputValue('#textarea')).toBe('text value');
 
@@ -50,9 +53,9 @@ it('inputValue should work', async ({ page, server }) => {
   const locator = page.locator('#input');
   expect(await locator.inputValue()).toBe('input value');
 
-  expect(await page.inputValue('#inner').catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement');
+  expect(await page.inputValue('#inner').catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement or HTMLSelectElement');
   const locator2 = page.locator('#inner');
-  expect(await locator2.inputValue().catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement');
+  expect(await locator2.inputValue().catch(e => e.message)).toContain('Node is not an HTMLInputElement or HTMLTextAreaElement or HTMLSelectElement');
 });
 
 it('innerHTML should work', async ({ page, server }) => {
diff --git a/types/types.d.ts b/types/types.d.ts
index a575639c5a..5ce622f473 100644
--- a/types/types.d.ts
+++ b/types/types.d.ts
@@ -1890,7 +1890,7 @@ export interface Page {
   }): Promise<string>;
 
   /**
-   * Returns `input.value` for the selected `<input>` or `<textarea>` element. Throws for non-input elements.
+   * Returns `input.value` for the selected `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
    * @param selector A selector to search for an element. If there are multiple elements satisfying the selector, the first will be used. See [working with selectors](https://playwright.dev/docs/selectors) for more details.
    * @param options
    */
@@ -4141,7 +4141,7 @@ export interface Frame {
   }): Promise<string>;
 
   /**
-   * Returns `input.value` for the selected `<input>` or `<textarea>` element. Throws for non-input elements.
+   * Returns `input.value` for the selected `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
    * @param selector A selector to search for an element. If there are multiple elements satisfying the selector, the first will be used. See [working with selectors](https://playwright.dev/docs/selectors) for more details.
    * @param options
    */
@@ -6461,7 +6461,7 @@ export interface ElementHandle<T=Node> extends JSHandle<T> {
   innerText(): Promise<string>;
 
   /**
-   * Returns `input.value` for `<input>` or `<textarea>` element. Throws for non-input elements.
+   * Returns `input.value` for `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
    * @param options
    */
   inputValue(options?: {
@@ -7543,7 +7543,7 @@ export interface Locator {
   }): Promise<string>;
 
   /**
-   * Returns `input.value` for `<input>` or `<textarea>` element. Throws for non-input elements.
+   * Returns `input.value` for `<input>` or `<textarea>` or `<select>` element. Throws for non-input elements.
    * @param options
    */
   inputValue(options?: {