feat(webkit): page.fill and friends (#40)

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);

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());
   }

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);
   }

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');