The pressKey function no longer seems to be working properly.

[Julian-B90]

What is your Scenario?

I want to send keyboard interactions to an input element.

What is the Current behavior?

Keyboard events are no longer arriving in the application

What is the Expected behavior?

The keyboard events are routed to the element

What is the public URL of the test page? (attach your complete example)

https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/autocomplete/basic_usage?theme=default-ocean-blue-a11y

https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete

What is your TestCafe test code?

import { Selector } from 'testcafe';

fixture`Autocomplete`
    .page('https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/autocomplete/basic_usage?theme=default-ocean-blue-a11y')

test(`AutoComplete test`, async (t: TestController) => {
await t
    .click(Selector('.food-demo kendo-autocomplete input'))
    .wait(5000)
    .typeText(Selector('.food-demo kendo-autocomplete input'), 'Barce')
    .pressKey('enter')
    .expect(Selector('.food-demo kendo-autocomplete input').value)
    .eql('Barcelona');
});

Your complete configuration file

{
    "browsers": "chrome --no-sandbox --disable-dev-shm-usage --disable-search-engine-choice-screen",
    "src": "./test-cases/kendo-test.spec.ts",
    "skipJsErrors": true,
    "hostname": "localhost",
    "speed": 1,
    "assertionTimeout": 10000,
    "pageLoadTimeout": 20000,
    "selectorTimeout": 10000,
    "browserInitTimeout": 25000,
    "debugOnFail": true
}

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

npx testcafe --config-file .testcaferc_local.json

TestCafe version

3.7.2

Node.js version

24.12.0

Command-line arguments

--config-file .testcaferc_local.json

Browser name(s) and version(s)

chrome

Platform(s) and version(s)

Windows

Other

No response

[Julian-B90]

I think the issue is that the pressKey function sends the keys without the code property.

I have manually sent key events like so:

const targetElement = document.activeElement;
const enterEvent = new KeyboardEvent('keydown', {
            key: 'Enter',
            code: 'Enter',
            keyCode: 13,
            bubbles: true,
        });
targetElement?.dispatchEvent(enterEvent);

and this works!

[Bayheck]

Hello Julian-B90,

Thank you for reaching out to us.
You are right - TestCafe t.pressKey does not support the KeyboardEvent code property.
Therefore, using the t.dispatchEvent method as a workaround is the recommended approach to achieve your user scenario.

I will be closing this ticket.

[sst-pavel-gusilic]

@Bayheck what do you mean doesnt support? All this time await t.pressKey(enter) used to work? why it was changed/deleted?

[Bayheck]

Hello, this behavior is by design and has not been removed or changed recently.
This limitation has been discussed previously in similar cases:

#8026
#8328

[htho]

We have this neat function in our before-each hook:

/** Makes sure KeyboardEvents dispatched by TestCafe also include the
 * {@link KeyboardEvent.code} property.
 *
 * @param {TestController} t
 * @returns {Promise<void>}
 */
async function patchKeyboardEvent(t) {
	await t.eval(function() {
		/** @type {Record<string, string>} */
		const keyCodeToCodeMap = {
			8: "Backspace",
			9: "Tab",
			13: "Enter",
			16: "ShiftLeft",
			17: "ControlLeft",
			18: "AltLeft",
			19: "Pause",
			20: "CapsLock",
			27: "Escape",
			32: "Space",
			33: "PageUp",
			34: "PageDown",
			35: "End",
			36: "Home",
			37: "ArrowLeft",
			38: "ArrowUp",
			39: "ArrowRight",
			40: "ArrowDown",
			44: "PrintScreen",
			45: "Insert",
			46: "Delete",
			48: "Digit0",
			49: "Digit1",
			50: "Digit2",
			51: "Digit3",
			52: "Digit4",
			53: "Digit5",
			54: "Digit6",
			55: "Digit7",
			56: "Digit8",
			57: "Digit9",
			59: "Semicolon", // Firefox
			61: "Equal", // Firefox
			63: "BracketLeft", // Firefox
			65: "KeyA",
			66: "KeyB",
			67: "KeyC",
			68: "KeyD",
			69: "KeyE",
			70: "KeyF",
			71: "KeyG",
			72: "KeyH",
			73: "KeyI",
			74: "KeyJ",
			75: "KeyK",
			76: "KeyL",
			77: "KeyM",
			78: "KeyN",
			79: "KeyO",
			80: "KeyP",
			81: "KeyQ",
			82: "KeyR",
			83: "KeyS",
			84: "KeyT",
			85: "KeyU",
			86: "KeyV",
			87: "KeyW",
			88: "KeyX",
			89: "KeyY",
			90: "KeyZ",
			91: "MetaLeft",
			92: "MetaRight",
			93: "ContextMenu",
			96: "Numpad0",
			97: "Numpad1",
			98: "Numpad2",
			99: "Numpad3",
			100: "Numpad4",
			101: "Numpad5",
			102: "Numpad6",
			103: "Numpad7",
			104: "Numpad8",
			105: "Numpad9",
			106: "NumpadMultiply",
			107: "NumpadAdd",
			109: "NumpadSubtract",
			110: "NumpadDecimal",
			111: "NumpadDivide",
			112: "F1",
			113: "F2",
			114: "F3",
			115: "F4",
			116: "F5",
			117: "F6",
			118: "F7",
			119: "F8",
			120: "F9",
			121: "F10",
			122: "F11",
			123: "F12",
			144: "NumLock",
			145: "ScrollLock",
			160: "Backslash", // Firefox
			163: "Slash", // Firefox
			171: "Equal", // Firefox
			173: "Minus", // Firefox
			186: "Semicolon",
			187: "Equal",
			188: "Comma",
			189: "Minus",
			190: "Period",
			191: "Slash",
			192: "Backquote",
			219: "BracketLeft",
			220: "Backslash",
			221: "BracketRight",
			222: "Quote",
			224: "MetaLeft",
		};
		/**
		 * @param {KeyboardEvent} ev
		 */
		function patchKeyboardEvent(ev) {
			if (ev.code) return;
			const keyCodeString = /** @type {string} */ (/** @type {unknown} */ (ev.keyCode));
			const code = keyCodeToCodeMap[keyCodeString];
			// console.log(`[${ev.type}]`, ev, `[${code}]`);
			Object.defineProperty(ev, "code", {value: code});
		}
		window.addEventListener("keydown", patchKeyboardEvent, {capture: true});
		window.addEventListener("keyup", patchKeyboardEvent, {capture: true});
	});
}