From 92a6500b2332f12190773e38b39660e2b8f54d27 Mon Sep 17 00:00:00 2001
From: Joel Einbinder <joel.einbinder@gmail.com>
Date: Wed, 20 Nov 2019 16:57:37 -0800
Subject: [PATCH] feat(webkit): page.fill and friends (#40)

---
 src/webkit/FrameManager.ts |  7 +++++++
 src/webkit/JSHandle.ts     | 36 ++++++++++++++++++++++++++++++++++++
 src/webkit/Page.ts         |  4 ++++
 test/page.spec.js          |  2 +-
 4 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/webkit/FrameManager.ts b/src/webkit/FrameManager.ts
index a0ea701f17..723e295f59 100644
--- a/src/webkit/FrameManager.ts
+++ b/src/webkit/FrameManager.ts
@@ -526,6 +526,13 @@ export class Frame {
     await handle.dispose();
   }
 
+  async fill(selector: string, value: string) {
+    const handle = await this.$(selector);
+    assert(handle, 'No node found for selector: ' + selector);
+    await handle.fill(value);
+    await handle.dispose();
+  }
+
   async focus(selector: string) {
     const handle = await this.$(selector);
     assert(handle, 'No node found for selector: ' + selector);
diff --git a/src/webkit/JSHandle.ts b/src/webkit/JSHandle.ts
index 50379f5ebe..6dc15e4e0a 100644
--- a/src/webkit/JSHandle.ts
+++ b/src/webkit/JSHandle.ts
@@ -243,6 +243,42 @@ export class ElementHandle extends JSHandle {
     }, values);
   }
 
+  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.evaluate((element: HTMLElement) => {
+      if (element.nodeType !== Node.ELEMENT_NODE)
+        return 'Node is not of type HTMLElement';
+      if (element.nodeName.toLowerCase() === 'input') {
+        const input = element as HTMLInputElement;
+        const type = input.getAttribute('type') || '';
+        const kTextInputTypes = new Set(['', 'password', 'search', 'tel', 'text', 'url']);
+        if (!kTextInputTypes.has(type.toLowerCase()))
+          return 'Cannot fill input of type "' + type + '".';
+        input.selectionStart = 0;
+        input.selectionEnd = input.value.length;
+      } else if (element.nodeName.toLowerCase() === 'textarea') {
+        const textarea = element as HTMLTextAreaElement;
+        textarea.selectionStart = 0;
+        textarea.selectionEnd = textarea.value.length;
+      } else if (element.isContentEditable) {
+        if (!element.ownerDocument || !element.ownerDocument.defaultView)
+          return 'Element does not belong to a window';
+        const range = element.ownerDocument.createRange();
+        range.selectNodeContents(element);
+        const selection = element.ownerDocument.defaultView.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+      } else {
+        return 'Element is not an <input>, <textarea> or [contenteditable] element.';
+      }
+      return false;
+    });
+    if (error)
+      throw new Error(error);
+    await this.focus();
+    await this._page.keyboard.sendCharacter(value);
+  }
+
   async focus() {
     await this.evaluate(element => element.focus());
   }
diff --git a/src/webkit/Page.ts b/src/webkit/Page.ts
index 139bfd9022..d0b1ed3a9a 100644
--- a/src/webkit/Page.ts
+++ b/src/webkit/Page.ts
@@ -439,6 +439,10 @@ export class Page extends EventEmitter {
     return this.mainFrame().hover(selector);
   }
 
+  fill(selector: string, value: string) {
+    return this.mainFrame().fill(selector, value);
+  }
+
   focus(selector: string) {
     return this.mainFrame().focus(selector);
   }
diff --git a/test/page.spec.js b/test/page.spec.js
index 78d1a68878..fb01ffd104 100644
--- a/test/page.spec.js
+++ b/test/page.spec.js
@@ -978,7 +978,7 @@ module.exports.addTests = function({testRunner, expect, headless, playwright, FF
     });
   });
 
-  describe.skip(FFOX || WEBKIT)('Page.fill', function() {
+  describe.skip(FFOX)('Page.fill', function() {
     it('should fill textarea', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/textarea.html');
       await page.fill('textarea', 'some value');