基于Cypress的Vue3-chessboard组件端到端测试：模拟点击问题

我在基于vue3-chessboard组件开发应用时，需要用Cypress模拟左键点击移动棋子，但之前依赖固定坐标的触发方式测试失败。此前右键点击的问题通过手动触发mousedown+mouseup事件解决了，现在针对左键移动的问题，可按以下方式优化测试脚本：

问题分析 #

之前的脚本依赖硬编码的坐标计算，这种方式极易受页面缩放、布局变化影响，而且没有贴合组件的实际交互逻辑——组件更可能监听棋子或格子元素的鼠标事件，而非棋盘容器的绝对坐标点击。

解决方案 #

直接操作棋子/格子元素，模拟完整的鼠标事件链，同时等待组件状态变化（比如选中棋子后出现可移动标记），再执行目标位置的点击：

describe('Move Piece Test', () => {
  it('successfully moves a chess piece', () => {
    cy.viewport(1200, 1500)
    cy.visit('https://qwerty084.github.io/vue3-chessboard/')

    // 选中起始位置的棋子（示例为初始布局的第20个棋子）
    cy.get('piece').eq(20)
      .trigger('mousedown', { button: 1, position: 'center' })
      .trigger('mouseup', { button: 1, position: 'center' })

    // 等待选中后出现的可移动标记，确保组件已响应选中事件
    cy.get('circle[cgHash*="green"]').should('be.visible')

    // 点击目标格子（示例为上方一格的棋子位置，若目标为空可改用square元素）
    cy.get('piece').eq(28)
      .trigger('mousedown', { button: 1, position: 'center' })
      .trigger('mouseup', { button: 1, position: 'center' })

    // 验证棋子移动结果：原位置棋子消失，目标位置出现该棋子
    cy.get('piece').eq(20).should('not.exist')
    cy.get('piece').eq(28).should('be.visible')
  })
})

补充说明 #

• 若目标格子无棋子，可直接定位对应的square元素触发点击，比如cy.get('square').eq(xxx).trigger(...)
• 使用position: 'center'确保点击在元素中心，适配不同棋盘缩放比例，避免坐标偏移问题
• 增加状态断言（如等待绿色圆圈出现），保证组件在执行下一步前已完成响应

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