使用Puppeteer测试React中Material UI AutoComplete组件失败，求解决方法

原测试代码的问题 #

你的测试代码存在几个核心问题，导致无法正常操作AutoComplete组件：

• 未处理Puppeteer的异步操作：page.$、page.within等方法都是异步的，必须加await才能获取到有效元素
• 角色名拼写错误：应该是combobox而非combox
• 变量未定义：startingAirport是未声明的变量，导致后续键盘事件触发失败
• 断言方式错误：不能直接用expect(input).toHaveValue，需要通过Puppeteer获取输入框的实际值再做断言
• 事件触发不符合真实用户行为：直接调用fireEvent不如模拟点击、输入、键盘选择的流程可靠

修正后的完整测试代码 #

import puppeteer from "puppeteer";

describe("AutcompleteComponent.js", () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch({
      headless: false,
      slowMo: 500,
      devtools: true,
    });
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it("basic functionality", async () => {
    await page.goto("http://localhost:3000");
    
    // 等待组件加载完成，定位到AutoComplete的输入框
    const input = await page.waitForSelector('#foo-bar [role="combobox"]');
    
    // 模拟用户点击聚焦输入框
    await input.click();
    
    // 输入目标选项文本
    await input.type("Kitten");
    
    // 等待下拉选项出现，通过键盘选择第一个选项
    await page.keyboard.press("ArrowDown");
    await page.keyboard.press("Enter");
    
    // 获取输入框的实际值并断言
    const inputValue = await input.evaluate(el => el.value);
    expect(inputValue).toBe("Kitten");
  });
});

关键优化说明 #

• 用waitForSelector替代直接查询：确保元素完全渲染后再操作，避免DOM未加载完成导致的元素丢失问题
• 模拟真实用户操作流程：点击聚焦→输入文本→键盘选择选项，更贴合实际用户行为，减少事件触发的兼容性问题
• 全异步处理：所有涉及元素获取、页面操作的方法都添加await，保证操作顺序正确
• 正确获取输入值：通过evaluate方法从DOM元素中读取实际值，再进行断言
• 添加afterAll关闭浏览器：避免测试结束后残留浏览器进程

内容的提问来源于stack exchange，提问作者four-eyes