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>
This commit is contained in:
YA2KM 2022-08-10 08:02:42 +09:00 committed by GitHub
parent a3d99f1b4a
commit 925de8da2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 1 deletions

View File

@ -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)

View File

@ -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();