test(e2e): composition events

This commit is contained in:
Junyi Du
2022-03-31 01:34:18 +08:00
committed by Tienson Qin
parent 1bd33fdb5d
commit f4ce0ea62f
3 changed files with 176 additions and 172 deletions

View File

@@ -1,7 +1,7 @@
import { expect } from '@playwright/test'
import { test } from './fixtures'
import { createRandomPage, IsMac } from './utils'
import { dispatch_kb_events, press_with_events, macos_pinyin_left_full_bracket } from './util/keyboard-events'
import { createRandomPage } from './utils'
import { dispatch_kb_events } from './util/keyboard-events'
import * as kb_events from './util/keyboard-events'
test(

View File

@@ -9,28 +9,30 @@
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
// without deprecated / non-standard
"altKey", "code", "ctrlKey", "isComposing", "key", "locale", "location", "metaKey",
"repeat", "shiftKey",
// empiricial
"composed"
"repeat", "shiftKey"
]
let output_list = [];
let last_timestamp = Date.now();
function select_keys(obj, keys) {
let new_obj = {}
for (let k in event)
if (keys.indexOf(k) != -1)
new_obj[k] = event[k]
new_obj[k] = event[k];
return new_obj
}
let key_handler_builder = (event_type) => (event) => {
if (event["target"].id != "input")
return;
let cur_timestamp = Date.now();
let output = {
"event_type": event_type,
"event": select_keys(event, keys)
"event": select_keys(event, keys),
"latency": cur_timestamp - last_timestamp // Time to wait before firing event
}
last_timestamp = cur_timestamp;
output_list.push(output);
let to_print = JSON.stringify(
output_list,
@@ -41,6 +43,10 @@
document.addEventListener('keydown', key_handler_builder('keydown'), false);
document.addEventListener('keyup', key_handler_builder('keyup'), false);
document.addEventListener('keypress', key_handler_builder('keypress'), false);
document.addEventListener('compositionstart', key_handler_builder('compositionstart'), false);
document.addEventListener('compositionend', key_handler_builder('compositionend'), false);
document.addEventListener('compositionupdate', key_handler_builder('compositionupdate'), false);
window.onload = (e) => {
document.getElementById("input").focus();

View File

@@ -1,11 +1,14 @@
/***
* Author: Junyi Du <junyi@logseq.com>
* References:
* https://stackoverflow.com/questions/8892238/detect-keyboard-layout-with-javascript
* ***/
// typing 【
export let dispatch_kb_events = async function (page, selector, keyboard_events ){
for (let idx in keyboard_events){
let { event_type, event } = keyboard_events[idx]
let { event_type, event, latency } = keyboard_events[idx]
await page.waitForTimeout(latency)
await page.dispatchEvent(selector, event_type, event)
await page.waitForTimeout(100)
}
}
@@ -21,9 +24,24 @@ export let macos_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 0
},
{
"event_type": "keypress",
"event": {
"key": "【",
"code": "BracketLeft",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false
},
"latency": 1
},
{
"event_type": "keyup",
@@ -36,9 +54,9 @@ export let macos_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 17
}
]
@@ -54,9 +72,29 @@ export let win10_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 0
},
{
"event_type": "compositionstart",
"event": {},
"latency": 4
},
{
"event_type": "compositionupdate",
"event": {},
"latency": 0
},
{
"event_type": "compositionupdate",
"event": {},
"latency": 12
},
{
"event_type": "compositionend",
"event": {},
"latency": 1
},
{
"event_type": "keyup",
@@ -69,9 +107,9 @@ export let win10_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 61
},
{
"event_type": "keyup",
@@ -84,9 +122,9 @@ export let win10_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 1
}
]
@@ -102,9 +140,29 @@ export let win10_legacy_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 0
},
{
"event_type": "compositionstart",
"event": {},
"latency": 1
},
{
"event_type": "compositionupdate",
"event": {},
"latency": 0
},
{
"event_type": "compositionupdate",
"event": {},
"latency": 0
},
{
"event_type": "compositionend",
"event": {},
"latency": 1
},
{
"event_type": "keyup",
@@ -117,9 +175,9 @@ export let win10_legacy_pinyin_left_full_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 93
}
]
@@ -135,9 +193,19 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
"isComposing": false
},
"latency": 0
},
{
"event_type": "compositionstart",
"event": {},
"latency": 1
},
{
"event_type": "compositionupdate",
"event": {},
"latency": 0
},
{
"event_type": "keyup",
@@ -150,9 +218,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 48
},
{
"event_type": "keydown",
@@ -165,9 +233,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 627
},
{
"event_type": "keyup",
@@ -180,9 +248,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 59
},
{
"event_type": "keydown",
@@ -195,9 +263,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 289
},
{
"event_type": "keyup",
@@ -210,9 +278,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 73
},
{
"event_type": "keydown",
@@ -225,9 +293,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 443
},
{
"event_type": "keyup",
@@ -240,9 +308,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 79
},
{
"event_type": "keydown",
@@ -255,9 +323,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 155
},
{
"event_type": "keyup",
@@ -270,58 +338,18 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 44
},
{
"event_type": "compositionend",
"event": {},
"latency": 968
}
]
export let win10_RIME_selecting_candidate_double_left_bracket = [
{
"event_type": "keydown",
"event": {
"key": "Process",
"code": "KeyA",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": false,
"composed": true
}
},
{
"event_type": "keyup",
"event": {
"key": "Process",
"code": "KeyA",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
},
{
"event_type": "keyup",
"event": {
"key": "a",
"code": "KeyA",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
},
{
"event_type": "keydown",
"event": {
@@ -333,9 +361,19 @@ export let win10_RIME_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": false
},
"latency": 0
},
{
"event_type": "compositionstart",
"event": {},
"latency": 0
},
{
"event_type": "compositionupdate",
"event": {},
"latency": 0
},
{
"event_type": "keyup",
@@ -348,9 +386,9 @@ export let win10_RIME_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 79
},
{
"event_type": "keyup",
@@ -363,98 +401,58 @@ export let win10_RIME_selecting_candidate_double_left_bracket = [
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 3
},
{
"event_type": "keydown",
"event": {
"key": "Process",
"code": "BracketLeft",
"code": "BracketRight",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 237
},
{
"event_type": "keyup",
"event": {
"key": "Process",
"code": "BracketLeft",
"code": "BracketRight",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 96
},
{
"event_type": "keyup",
"event": {
"key": "[",
"code": "BracketLeft",
"key": "]",
"code": "BracketRight",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"isComposing": true
},
"latency": 3
},
{
"event_type": "keydown",
"event": {
"key": "Process",
"code": "BracketLeft",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
},
{
"event_type": "keyup",
"event": {
"key": "Process",
"code": "BracketLeft",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
},
{
"event_type": "keyup",
"event": {
"key": "[",
"code": "BracketLeft",
"location": 0,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"repeat": false,
"isComposing": true,
"composed": true
}
"event_type": "compositionend",
"event": {},
"latency": 1479
}
]