fix(codegen): make sure input recording with japanese IME Work (#16210)

Co-authored-by: kawasaki.taiga <kigtaiga@gmail.com>
Co-authored-by: Max Schmitt <max@schmitt.mx>

packages/playwright-core/src/server/injected/recorder.ts

@@ -326,7 +326,7 @@ class Recorder {
       if (event.key === 'Insert' && event.shiftKey)
         return false;
     }
-    if (['Shift', 'Control', 'Meta', 'Alt'].includes(event.key))
+    if (['Shift', 'Control', 'Meta', 'Alt', 'Process'].includes(event.key))
       return false;
     const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
     if (event.key.length === 1 && !hasModifier)

tests/library/inspector/cli-codegen-1.spec.ts

@@ -260,6 +260,50 @@ test.describe('cli codegen', () => {
     expect(message.text()).toBe('John');
   });
 
+  test('should fill japanese text', async ({ page, openRecorder }) => {
+    const recorder = await openRecorder();
+
+    // In Japanese, "てすと" or "テスト" means "test".
+    await recorder.setContentAndWait(`<input id="input" name="name" oninput="input.value === 'てすと' && console.log(input.value)"></input>`);
+    const selector = await recorder.focusElement('input');
+    expect(selector).toBe('input[name="name"]');
+
+    async function inputText(text: string) {
+      await recorder.page.dispatchEvent(selector, 'keydown', { key: 'Process' });
+      await recorder.page.keyboard.insertText(text);
+      await recorder.page.dispatchEvent(selector, 'keyup', { key: 'Process' });
+    }
+    const [message, sources] = await Promise.all([
+      page.waitForEvent('console', msg => msg.type() !== 'error'),
+      recorder.waitForOutput('JavaScript', 'fill'),
+      (async () => {
+        await inputText('て');
+        await inputText('す');
+        await inputText('と');
+      })()
+    ]);
+    expect(sources.get('JavaScript').text).toContain(`
+   // Fill input[name="name"]
+   await page.locator('input[name="name"]').fill('てすと');`);
+    expect(sources.get('Java').text).toContain(`
+       // Fill input[name="name"]
+       page.locator("input[name=\\\"name\\\"]").fill("てすと");`);
+
+    expect(sources.get('Python').text).toContain(`
+     # Fill input[name="name"]
+     page.locator(\"input[name=\\\"name\\\"]\").fill(\"てすと\")`);
+
+    expect(sources.get('Python Async').text).toContain(`
+     # Fill input[name="name"]
+     await page.locator(\"input[name=\\\"name\\\"]\").fill(\"てすと\")`);
+
+    expect(sources.get('C#').text).toContain(`
+         // Fill input[name="name"]
+         await page.Locator(\"input[name=\\\"name\\\"]\").FillAsync(\"てすと\");`);
+
+    expect(message.text()).toBe('てすと');
+  });
+
   test('should fill textarea', async ({ page, openRecorder }) => {
     const recorder = await openRecorder();