如何用Playwright测试按钮是否被程序化触发点击？

你的问题核心是：Playwright测试端的locator.once('click')无法捕获页面中通过event.target.click()触发的程序化点击事件，因为两者处于不同的上下文（测试进程 vs 浏览器页面进程）。以下是可行的解决方法：

方法一：在页面上下文内监听点击事件 #

通过page.evaluate()在浏览器页面中直接绑定事件监听器，用Promise跟踪点击状态：

test('space when menu is open activates current item', async ({ page }) => {
  // 打开菜单
  await page.locator('[data-menu-target="button"]').click();
  
  // 在页面上下文创建Promise，监听目标元素的click事件
  const clickedPromise = page.evaluate(() => {
    return new Promise<boolean>(resolve => {
      const menuItem = document.querySelector('[data-menu-target="menuItem"]');
      if (!menuItem) throw new Error('目标菜单元素未找到');
      
      const handleClick = () => {
        menuItem.removeEventListener('click', handleClick);
        resolve(true);
      };
      menuItem.addEventListener('click', handleClick);
    });
  });
  
  // 确保菜单项获得焦点（否则keydown事件的target可能不是它）
  await page.locator('[data-menu-target="menuItem"]').first().focus();
  
  // 触发空格按键
  await page.keyboard.press('Space');
  
  // 验证点击是否触发
  const clicked = await clickedPromise;
  expect(clicked).toBeTruthy();
});

方法二：验证点击后的可见副作用 #

如果按钮点击后有可观测的页面变化（比如新增样式、内容变更、弹窗出现等），直接验证这些副作用更直观：

test('space activates menu item', async ({ page }) => {
  await page.locator('[data-menu-target="button"]').click();
  const menuItem = page.locator('[data-menu-target="menuItem"]').first();
  
  await menuItem.focus();
  await page.keyboard.press('Space');
  
  // 示例：验证点击后添加了active类
  await expect(menuItem).toHaveClass('active');
});

为什么原代码无效？ #

Playwright的locator.once('click')监听的是用户交互触发的事件（比如鼠标点击、Playwright模拟的点击），而页面中通过element.click()程序化触发的事件属于页面内部的DOM事件流，测试端的监听器默认不会捕获这类事件。只有在页面上下文内绑定的监听器，才能完整捕获所有DOM事件。

内容的提问来源于stack exchange，提问作者Andy Stewart