fix: typing emoji (#2824)

This changes sendCharacter to use document.execCommand instead of sending a `'char'` event from the protocol. This is more aligned with how input would come in from emoji keyboards, and removes the 3ish byte limit on characters that can be sent which prevented larger emoji from being rendered correctly.

Emoji will still fail to type correctly if typing them into an iframe that is in shadow dom.

fixes #1096

lib/Input.js

@@ -148,13 +148,7 @@ class Keyboard {
    * @param {string} char
    */
   async sendCharacter(char) {
-    await this._client.send('Input.dispatchKeyEvent', {
+    await this._client.send('Input.insertText', {text: char});
-      type: 'char',
-      modifiers: this._modifiers,
-      text: char,
-      key: char,
-      unmodifiedText: char
-    });
   }
 
   /**

test/input.spec.js

@@ -472,6 +472,19 @@ module.exports.addTests = function({testRunner, expect, DeviceDescriptors}) {
       error = await page.keyboard.press('😊').catch(e => e);
       expect(error && error.message).toBe('Unknown key: "😊"');
     });
+    it('should type emoji', async({page, server}) => {
+      await page.goto(server.PREFIX + '/input/textarea.html');
+      await page.type('textarea', '👹 Tokyo street Japan 🇯🇵');
+      expect(await page.$eval('textarea', textarea => textarea.value)).toBe('👹 Tokyo street Japan 🇯🇵');
+    });
+    it('should type emoji into an iframe', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await utils.attachFrame(page, 'emoji-test', server.PREFIX + '/input/textarea.html');
+      const frame = page.frames()[1];
+      const textarea = await frame.$('textarea');
+      await textarea.type('👹 Tokyo street Japan 🇯🇵');
+      expect(await frame.$eval('textarea', textarea => textarea.value)).toBe('👹 Tokyo street Japan 🇯🇵');
+    });
     function dimensions() {
       const rect = document.querySelector('textarea').getBoundingClientRect();
       return {