Vitest browser mode userEvent type not recognizing special chars

[Seboran]

Describe the bug

When using vitest browser mode, the following test fails:

import { expect, test } from 'vitest'
import { render } from 'vitest-browser-vue'
import HelloWorld from './HelloWorld.vue'
import { userEvent } from '@vitest/browser/context'


test('renders name', async () => {
  const { getByText, getByRole } = render(HelloWorld, {
    props: { name: 'Vitest' },
  })
  await userEvent.type(getByRole('textbox'), "éèù")
})

Fails with Error: keyboard.down: Unknown key: "é"

é is a valid key in AZERTY french keyboards. I cannot use userEvent.fill because I want to test the specific press of special char keys.

With playwright I can type the é key with their equivalent method.

Reproduction

clone https://github.com/Seboran/special-chars-vitest

pnpm i
pnpm test:browser

get error message Error: keyboard.down: Unknown key: "é"

System Info

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 796.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.5.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.5.0/bin/npm
    pnpm: 9.12.1 - ~/Library/pnpm/pnpm
    bun: 1.1.29 - ~/.bun/bin/bun
  Browsers:
    Safari: 18.1
  npmPackages:
    @vitejs/plugin-vue: ^5.1.4 => 5.1.4 
    @vitest/browser: ^2.1.4 => 2.1.4 
    @vitest/eslint-plugin: 1.1.7 => 1.1.7 
    vite: ^5.4.10 => 5.4.10 
    vitest: ^2.1.4 => 2.1.4

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Seboran]

it looks like it's a duplicate of microsoft/playwright#7396

but it puzzles me a bit why it does work with page.keyboard.type from playwright experimental ct, and not userEvent.type from playwright...

This works for example:

import { test, expect } from '@playwright/experimental-ct-react'

test('test', async ({ mount, page }) => {
/** ... **/
const text = 'éè'
  for (const c of text) {
    await page.keyboard.type(c)
  }
/** ... **/

it makes me wonder how could I achieve the same "keypress by keypress" test using userEvent from vitest?

[hi-ogawa]

Vitest's userEvent.type is implemented based on Playwright's page.keyboard.down, but probably they have a different implementation for page.keyboard.type, which works somehow. It looks like they have test cases like this https://github.com/microsoft/playwright/blob/50775698ae13642742f2a1e8983d1d686d7f192d/tests/page/page-keyboard.spec.ts#L291-L306

Okay, maybe this is a magic we need to copy. It looks like they fallback to insertText when not in usKeyboardLayout
https://github.com/microsoft/playwright/blob/50775698ae13642742f2a1e8983d1d686d7f192d/packages/playwright-core/src/server/input.ts#L87-L98

[hi-ogawa]

@Seboran Can you try this pre-release #6873 (comment)? I'm not exactly sure what Playwright's insertText does in terms of keydown/keyup events. It would be useful to know if this works for your use case.

[Seboran]

@hi-ogawa i confirm this fixes the bug! 🎉 the Textbox do get the typed keys and I can test my "key by key" behaviour.