移动端 E2E 测试点击按钮没反应是怎么回事？

设计师新玲提问于 2026-03-23 12:59:19 阅读 5

移动

我用 Cypress 做移动端 E2E 测试，模拟点击一个按钮，但在手机上实际能点，测试里却没触发事件，试了 click() 和 trigger(‘tap’) 都不行，是不是和 Vue 的事件绑定方式有关系？

这是我的组件代码：

<template>
  <div class="mobile-btn" @click="handleClick">
    点我
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked!');
    }
  }
}
</script>

移动端测试

我来解答赞 1 收藏

反馈

1 条解答

FSD-海霞 Lv1

移动端 E2E 测试点击按钮没反应，这事儿确实头疼。用 Cypress 做测试，click() 和 trigger('tap') 都不行，首先得检查下元素是否真的被渲染出来了，有时候页面加载慢或者元素被遮挡也会导致点击不生效。

其次，Vue 的事件绑定方式通常没问题，但可以确保一下 Vue 实例是否正确挂载，有时候异步操作或者状态管理的问题会导致事件绑定失效。

最后，可以试试加个等待时间，确保 DOM 完全加载再进行点击操作。Cypress 提供了 wait 命令，可以这样写：

cy.get('.mobile-btn').should('be.visible').wait(1000).click()

或者用更精确的选择器，确保选中的是正确的元素：

cy.get('[data-cy=mobile-btn]').should('be.visible').click()

记得给元素加上 data-cy 属性，方便定位。性能上，尽量减少等待时间，多用 Cypress 的 should 命令来确保元素状态正确。希望这些方法能解决问题，抓狂的时候别忘了喝杯咖啡放松一下。

2026-03-23 13:04