cherry-pick(#16400): fix(codegen): make sure input recording with jap…

…anese IME Work (#16414) SHA: 699a52e
microsoft · Aug 10, 2022 · ecb8266 · ecb8266
1 parent 0227708
commit ecb8266
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/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)

diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/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();