IME 自动化测试开源方案

import { test, expect } from '@playwright/test';

// 教学用例：页面事件处理测试，不是真实操作系统 IME 测试。
// 按被测页面调整这三个配置；此处不是本站实测记录。
const PAGE_URL = 'http://localhost:3000/blog';
const SEARCH_PARAM = 'search';
const DEBOUNCE_MS = 300; // 必须与应用实际搜索防抖时间一致

test('组合期间不搜索，结束后提交最终中文', async ({ page }) => {
  await page.goto(PAGE_URL);
  const input = page.locator('input[placeholder*="搜索"]');
  const initialURL = page.url();
  await input.evaluate(el => {
    el.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true }));
  });

  // fill 本身不保证生成 isComposing=true 的 InputEvent。
  // 本例检查应用是否依据 compositionstart/end 维护组合状态。
  await input.fill('a');
  // 故意覆盖一个完整防抖窗口，不能只在 fill 后立即断言。
  await page.waitForTimeout(DEBOUNCE_MS + 100);
  await expect(page).toHaveURL(initialURL);

  // compositionend.data 不会替我们修改 input.value。
  await input.fill('啊');
  await expect(input).toHaveValue('啊');
  await input.evaluate(el => {
    el.dispatchEvent(new CompositionEvent('compositionend', {
      bubbles: true,
      data: '啊',
    }));
  });
  // 检查最终值，不只检查是否出现参数；poll 等待应用防抖提交。
  await expect.poll(
    () => new URL(page.url()).searchParams.get(SEARCH_PARAM),
    { timeout: Math.max(5000, DEBOUNCE_MS + 1000) },
  ).toBe('啊');
});