fix(fill): make fill work for input[type=number] (#819)

microsoft · Feb 3, 2020 · 1059e22 · 1059e22
1 parent b82bc5f
commit 1059e22
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/dom.ts b/src/dom.ts
@@ -358,7 +358,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async fill(value: string): Promise<void> {
     assert(helper.isString(value), 'Value must be string. Found value "' + value + '" of type "' + (typeof value) + '"');
-    const error = await this._evaluateInUtility((node: Node) => {
+    const error = await this._evaluateInUtility((node: Node, value: string) => {
       if (node.nodeType !== Node.ELEMENT_NODE)
         return 'Node is not of type HTMLElement';
       const element = node as HTMLElement;
@@ -375,9 +375,14 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
       if (element.nodeName.toLowerCase() === 'input') {
         const input = element as HTMLInputElement;
         const type = input.getAttribute('type') || '';
-        const kTextInputTypes = new Set(['', 'email', 'password', 'search', 'tel', 'text', 'url']);
+        const kTextInputTypes = new Set(['', 'email', 'number', 'password', 'search', 'tel', 'text', 'url']);
         if (!kTextInputTypes.has(type.toLowerCase()))
           return 'Cannot fill input of type "' + type + '".';
+        if (type.toLowerCase() === 'number') {
+          value = value.trim();
+          if (!value || isNaN(Number(value)))
+            return 'Cannot type text into input[type=number].';
+        }
         if (input.disabled)
           return 'Cannot fill a disabled input.';
         if (input.readOnly)
@@ -406,7 +411,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
         return 'Element is not an <input>, <textarea> or [contenteditable] element.';
       }
       return false;
-    });
+    }, value);
     if (error)
       throw new Error(error);
     await this._page.keyboard.sendCharacters(value);

diff --git a/test/page.spec.js b/test/page.spec.js
@@ -1002,9 +1002,9 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF
       await page.fill('input', 'some value');
       expect(await page.evaluate(() => result)).toBe('some value');
     });
-    it('should throw on non-text inputs', async({page, server}) => {
+    it('should throw on unsupported inputs', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/textarea.html');
-      for (const type of ['color', 'number', 'date']) {
+      for (const type of ['color', 'date']) {
         await page.$eval('input', (input, type) => input.setAttribute('type', type), type);
         let error = null;
         await page.fill('input', '').catch(e => error = e);
@@ -1110,6 +1110,28 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF
       await page.fill('div', 'some value');
       expect(await page.$eval('div', d => d.textContent)).toBe('some value');
     });
+    it('should be able to fill the input[type=number]', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      await page.fill('input', '42');
+      expect(await page.evaluate(() => input.value)).toBe('42');
+    });
+    it('should be able to fill exponent into the input[type=number]', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      await page.fill('input', '-10e5');
+      expect(await page.evaluate(() => input.value)).toBe('-10e5');
+    });
+    it('should not be able to fill input[type=number] with empty string', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      let error = null;
+      await page.fill('input', '').catch(e => error = e);
+      expect(error.message).toContain('Cannot type text into input[type=number].');
+    });
+    it('should not be able to fill text into the input[type=number]', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      let error = null;
+      await page.fill('input', '').catch(e => error = e);
+      expect(error.message).toContain('Cannot type text into input[type=number].');
+    });
   });
 
   describe('Page.Events.Close', function() {