Nuxt项目E2E测试中使用Playwright点击按钮未生效如何解决

问题对应按钮状态截图：

你当前点击的.v-btn是Vuetify按钮的外层包裹容器，真正绑定点击事件、响应交互的是容器内部的原生<button>元素。直接触发外层容器的点击事件只会触发组件的hover/active视觉样式，不会执行实际绑定的业务逻辑，和你截图里按钮卡在半点击状态的表现完全吻合。
另外你的代码缺少必要的等待逻辑：Nuxt应用客户端水合需要时间，表单输入完成后组件的状态更新、按钮从禁用切到可用也有过渡周期，在元素还没进入可交互状态时直接触发点击，也会出现点击无响应的问题。

按以下顺序调整即可解决：

• 替换错误的点击定位逻辑，不要直接点击外层.v-btn容器，优先通过角色定位匹配真实可交互按钮，稳定性远高于纯CSS类选择器：

// 匹配页面上的按钮元素，可根据按钮实际文案补充name参数做精准匹配
await page.getByRole('button').click()
// 如果暂时不想改定位逻辑，也可以指定选中.v-btn内部的原生button节点
// await page.locator('.v-btn button').click()

• 点击前增加状态校验，等按钮真正进入可交互状态再触发操作，避开Nuxt水合、组件状态更新的空窗期：

const submitBtn = page.getByRole('button')
// 等待按钮可用
await expect(submitBtn).toBeEnabled()
await submitBtn.click()

• 表单填写完成后增加页面状态等待，避免输入事件的双向绑定还没同步完成就触发提交：

await page.fill('text=User name', 'jeff');
await page.fill('text= Password', 'jeff');
// 等待页面网络请求、DOM更新完成
await page.waitForLoadState('networkidle')

import { resolve, join } from 'path'
import { test, expect } from '@playwright/test'

const ROOT_PATH = resolve(__dirname, '..', 'screenshots')

test('job board test', async ({ page, baseURL }) => {
  await page.goto(baseURL + '/')
  // 等待Nuxt应用水合完成
  await page.waitForLoadState('domcontentloaded')
  // 修正h2文本匹配逻辑
  await expect(page.locator('h2', { hasText: 'meow' })).toBeVisible()
  
  await page.getByLabel('User name').fill('jeff')
  await page.getByLabel('Password').fill('jeff')

  const submitBtn = page.getByRole('button')
  await expect(submitBtn).toBeEnabled()
  await submitBtn.click()

  await page.screenshot({ path: join(ROOT_PATH, 'detail.png') })
})

注意：非必要不要加click({ force: true })强制点击，该参数会绕过Playwright的可交互性校验，哪怕按钮被遮罩、处于禁用状态也会触发点击，最终测试结果没有实际参考价值。

内容的提问来源于stack exchange，提问作者Gavin Teo Juen