feat(fill): wait for the element to be enabled/writable/visible (#2435)

src/dom.ts

@@ -351,7 +351,12 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     assert(helper.isString(value), 'Value must be string. Found value "' + value + '" of type "' + (typeof value) + '"');
     const deadline = this._page._timeoutSettings.computeDeadline(options);
     await this._page._frameManager.waitForSignalsCreatedBy(async () => {
-      const injectedResult = await this._evaluateInUtility(({ injected, node }, value) => injected.fill(node, value), value);
+      const poll = await this._evaluateHandleInUtility(({ injected, node }, { value }) => {
+        return injected.waitForEnabledAndFill(node, value);
+      }, { value });
+      try {
+        const filledPromise = poll.evaluate(poll => poll.result);
+        const injectedResult = await helper.waitWithDeadline(filledPromise, 'element to be visible and enabled', deadline, 'pw:input');
         const needsInput = handleInjectedResult(injectedResult);
         if (needsInput) {
           if (value)
@@ -359,6 +364,9 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
           else
             await this._page.keyboard.press('Delete');
         }
+      } finally {
+        poll.evaluate(poll => poll.cancel()).catch(e => {}).then(() => poll.dispose());
+      }
     }, deadline, options, true);
   }
 

src/injected/injectedScript.ts

@@ -212,14 +212,15 @@ export default class InjectedScript {
     return { status: 'success', value: options.filter(option => option.selected).map(option => option.value) };
   }
 
-  fill(node: Node, value: string): types.InjectedScriptResult<boolean> {
+  waitForEnabledAndFill(node: Node, value: string): types.InjectedScriptPoll<types.InjectedScriptResult<boolean>> {
+    return this.poll('raf', () => {
       if (node.nodeType !== Node.ELEMENT_NODE)
         return { status: 'error', error: 'Node is not of type HTMLElement' };
       const element = node as HTMLElement;
       if (!element.isConnected)
         return { status: 'notconnected' };
       if (!this.isVisible(element))
-      return { status: 'error', error: 'Element is not visible' };
+        return false;
       if (element.nodeName.toLowerCase() === 'input') {
         const input = element as HTMLInputElement;
         const type = (input.getAttribute('type') || '').toLowerCase();
@@ -233,9 +234,9 @@ export default class InjectedScript {
             return { status: 'error', error: 'Cannot type text into input[type=number].' };
         }
         if (input.disabled)
-        return { status: 'error', error: 'Cannot fill a disabled input.' };
+          return false;
         if (input.readOnly)
-        return { status: 'error', error: 'Cannot fill a readonly input.' };
+          return false;
         if (kDateTypes.has(type)) {
           value = value.trim();
           input.focus();
@@ -249,9 +250,9 @@ export default class InjectedScript {
       } else if (element.nodeName.toLowerCase() === 'textarea') {
         const textarea = element as HTMLTextAreaElement;
         if (textarea.disabled)
-        return { status: 'error', error: 'Cannot fill a disabled textarea.' };
+          return false;
         if (textarea.readOnly)
-        return { status: 'error', error: 'Cannot fill a readonly textarea.' };
+          return false;
       } else if (!element.isContentEditable) {
         return { status: 'error', error: 'Element is not an <input>, <textarea> or [contenteditable] element.' };
       }
@@ -259,6 +260,7 @@ export default class InjectedScript {
       if (result.status === 'success')
         return { status: 'success', value: true };  // Still need to input the value.
       return result;
+    });
   }
 
   selectText(node: Node): types.InjectedScriptResult {

test/page.spec.js

@@ -1013,6 +1013,11 @@ describe('Page.select', function() {
 });
 
 describe('Page.fill', function() {
+  async function giveItAChanceToFill(page) {
+    for (let i = 0; i < 5; i++)
+      await page.evaluate(() => new Promise(f => requestAnimationFrame(() => requestAnimationFrame(f))));
+  }
+
   it('should fill textarea', async({page, server}) => {
     await page.goto(server.PREFIX + '/input/textarea.html');
     await page.fill('textarea', 'some value');
@@ -1113,27 +1118,47 @@ describe('Page.fill', function() {
     await page.fill('textarea', 123).catch(e => error = e);
     expect(error.message).toContain('Value must be string.');
   });
-  it('should throw on disabled and readonly elements', async({page, server}) => {
+  it('should retry on disabled element', async({page, server}) => {
     await page.goto(server.PREFIX + '/input/textarea.html');
     await page.$eval('input', i => i.disabled = true);
-    const disabledError = await page.fill('input', 'some value').catch(e => e);
+    let done = false;
-    expect(disabledError.message).toBe('Cannot fill a disabled input.');
 
+    const promise = page.fill('input', 'some value').then(() => done = true);
+    await giveItAChanceToFill(page);
+    expect(done).toBe(false);
+    expect(await page.evaluate(() => result)).toBe('');
+
+    await page.$eval('input', i => i.disabled = false);
+    await promise;
+    expect(await page.evaluate(() => result)).toBe('some value');
+  });
+  it('should retry on readonly element', async({page, server}) => {
     await page.goto(server.PREFIX + '/input/textarea.html');
     await page.$eval('textarea', i => i.readOnly = true);
-    const readonlyError = await page.fill('textarea', 'some value').catch(e => e);
+    let done = false;
-    expect(readonlyError.message).toBe('Cannot fill a readonly textarea.');
+
+    const promise = page.fill('textarea', 'some value').then(() => done = true);
+    await giveItAChanceToFill(page);
+    expect(done).toBe(false);
+    expect(await page.evaluate(() => result)).toBe('');
+
+    await page.$eval('textarea', i => i.readOnly = false);
+    await promise;
+    expect(await page.evaluate(() => result)).toBe('some value');
   });
-  it('should throw on hidden and invisible elements', async({page, server}) => {
+  it('should retry on invisible element', async({page, server}) => {
     await page.goto(server.PREFIX + '/input/textarea.html');
     await page.$eval('input', i => i.style.display = 'none');
-    const invisibleError = await page.fill('input', 'some value', { force: true }).catch(e => e);
+    let done = false;
-    expect(invisibleError.message).toBe('Element is not visible');
 
-    await page.goto(server.PREFIX + '/input/textarea.html');
+    const promise = page.fill('input', 'some value').then(() => done = true);
-    await page.$eval('input', i => i.style.visibility = 'hidden');
+    await giveItAChanceToFill(page);
-    const hiddenError = await page.fill('input', 'some value', { force: true }).catch(e => e);
+    expect(done).toBe(false);
-    expect(hiddenError.message).toBe('Element is not visible');
+    expect(await page.evaluate(() => result)).toBe('');
+
+    await page.$eval('input', i => i.style.display = 'inline');
+    await promise;
+    expect(await page.evaluate(() => result)).toBe('some value');
   });
   it('should be able to fill the body', async({page}) => {
     await page.setContent(`<body contentEditable="true"></body>`);