title: Puppeteer methods for typing never complete typing the full strings passed to them
body: <h2>Problem</h2>
  
  <p><strong>Summary of problem:</strong> I'm writing several test suites (using Jest and Puppeteer) to automate tests of my AngularJS app's home page. Many of the tests I'd like to automate involve filling out forms with <code>&lt;textareas&gt;</code>'s wherein strings (of varying length) need to be typed. But the problem is that every Puppeteer method available for typing is extremely inconsistent, in that not all characters in the strings passed to these methods are ultimately typed, and sometimes these methods even break subsequent methods doing unrelated things. </p>
  
  <h2>Overview of testing environment</h2>
  
  <ul>
  <li>Puppeteer version: 1.19.0</li>
  <li>Jest version: 24.8.0</li>
  </ul>
  
  <h2>What I've tried to far</h2>
  
  <p><strong>Research:</strong> I've searched extensively for a solution on the Puppteeer's Github Issues page, as it seems like this problem is pretty widespread. So far I've tried the solutions provided in <a href="https://github.com/GoogleChrome/puppeteer/issues/1648" rel="nofollow noreferrer">#1648</a>, <a href="https://github.com/GoogleChrome/puppeteer/issues/2784" rel="nofollow noreferrer">#2784</a>, <a href="https://github.com/GoogleChrome/puppeteer/issues/1958" rel="nofollow noreferrer">#1958</a> and <a href="https://github.com/GoogleChrome/puppeteer/issues/1223" rel="nofollow noreferrer">#1223</a>. Below are the code snippets I've tried, taken from those various answers. None of them have worked so far.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- index.html --&gt;
  &lt;html&gt;
    &lt;body ng-app="myApp" ng-controller="myCtrl"&gt;
      &lt;div&gt;
        &lt;md-content&gt;
          &lt;form test-id="myForm"&gt;
            &lt;md-input-container&gt;
              &lt;div&gt;
                &lt;textarea ng-model="myCtrl.user.name" test-id="userName"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
            &lt;/md-input-container&gt;
            &lt;md-input-container&gt;
              &lt;input type="file" ng-model="myCtrl.user.photo" test-id="uploadPhoto"&gt;
            &lt;/md-input-container&gt;
            &lt;md-dialog-actions&gt;
              &lt;button type="submit" test-id="submitForm"&gt;Submit&lt;/button&gt;
            &lt;/md-dialog-actions&gt;
          &lt;/form&gt;
        &lt;/md-content&gt;
      &lt;/div&gt;
      &lt;!-- These divs appear after the form has been submitted --&gt;
      &lt;div&gt;
        &lt;p&gt;&lt;!-- username goes here --&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img&gt;&lt;!--  photo goes here --&gt;&lt;/img&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>// index.spec.js
  describe('fill out and submit form', () =&gt; {
  
    test('page has loaded', async() =&gt; {
  
      // note: I've tried both these methods for waiting for all the DOM
      // content to load before starting to fill out the form,
      // and neither make much of a difference in the typing behavior,
      // so I usually go with waiting for all network connections
      // to finish
      await page.goto('https://my-website.com', {waitUntil: 'networkidle0'});
      // await page.goto('https://my-website.com', {waitUntil: 'networkidle2'});
  
    });
  
    test('fill out form', async() =&gt; {
  
      let formSelector = 'form[test-id="myForm"]';
      // waits for form to appear
      await page.waitForSelector(formSelector, {visible: true, timeout: 3000});
  
      let longNameInputSelector = 'textarea[test-id="userName"]';
  
      // attempt 1: focus then page.keyboard.type
      // behavior: rarely finishes typing
      await page.focus(longNameInputSelector);
      await page.keyboard.type('Casey');
  
      // attempt 2: page.type
      // behavior: sometimes finishes typing
      await page.type(longNameInputSelector, 'Casey');
  
      // attempt 3: page.type then press 'Enter' 
      // behavior: this method tends to fix the typing but
      // breaks the photo uploading code below
      await page.type(longNameInputSelector, 'Casey');
      await page.keyboard.press('Enter');
  
      // attempt 4: page.type then press 'Tab'
      // behavior: sometimes finishes typing
      await page.type(longNameInputSelector, 'Casey');
      await page.keyboard.press('Tab');
  
      // attempt 5: wait for input selector to be visible and then type
      // behavior: rarely finishes typing
      await page.waitForSelector(longNameInputSelector, {visible: true, timeouts: 3000});
      await page.focus(longNameInputSelector);
      await page.keyboard.type('Casey');
  
      // attempt 6: convert input to Element Handle and then click
      // behavior: more reliable but fails occasionally
      let inputHandle = await page.$(longNameInputSelector);
      await inputHandle.click();
      await page.keyboard.type('Casey');
  
      // upload photo
      let inputPhotoSelector = 'input[type="file" test-id="uploadPhoto"]';
      const inputPhotoHandle = await page.$(inputPhotoSelector);
      const filePath = path.relative(process.cwd(), __dirname + '/me.png');
      await inputPhotoHandle.uploadFile(filePath);
    });
  
    test('submit form', async() =&gt; {
  
      // note: I've played a little with the way I'm submitting the form
      // to see if that could make any difference. So far it hasn't.
      // Here is what I've tried:
  
      // attempt 1: wait for the submit button to no longer be
      // disabled (i.e. wait for entire form to be filled out)
      // behavior: doesn't fix the problem. typing behavior still inconsistent
      let submitBtnSelector = 'button[test-id="submitForm"]:not([disabled])';
      await page.click(submitBtnSelector);
  
      // attempt 2: issue a fake click over the submit button to 
      // prevent autocomplete
      // behavior: doesn't fix the problem. typing still erratic
      await page.evaluate((sel) =&gt; {
        document.querySelector(sel).click();
      }, submitBtnSelector);
  
    });
  
  });
  </code></pre>
  
  <h2>Final thoughts/question:</h2>
  
  <p>Does anyone know of a <em>reliable</em> way of automating typing in Puppeteer so that my tests won't fail sporadically? </p>