使用 Cypress 对 Web 应用程序进行端到端测试：模拟点击

Question

我编写了一个使用 vue3 组件 vue3-chessboard 的应用程序。 您可能会在

处看到该组件

https://qwerty084.github.io/vue3-chessboard/

如果用户右键单击棋盘的一个正方形，则所选棋子周围会出现一个圆圈。我想编写一个模拟点击不同部分的测试

我编写了以下脚本的许多变体来模拟右键单击

describe('Click Test', () => {
    it('clicking', () => {
      cy.visit('https://qwerty084.github.io/vue3-chessboard/')
      cy.url().should('include', 'http');
      // wait a second just in case
      cy.wait(1000);
      // click on the piece in the 4th position
      cy.get('piece').eq(4).rightclick({ force: true });
      // click on the piece in the 20th position
      cy.get('piece').eq(20).rightclick({ force: true });
   });
})

但不幸的是该脚本不起作用。

测试执行后，如果我将鼠标悬停在最后执行的行上：“-rightclick(force=True)” 棋盘上右侧坐标上出现一个红色小球，因此找到该元素并执行右键命令，但没有出现圆圈。

欢迎任何有关此问题的帮助。

Answer 1

启用点击功能相对简单，只需触发一个

mousedown

即可。

如果您查看开发工具，您可以看到

<cg-board>

元素上有三个事件处理程序（其中的

<piece>

元素上没有）。

• contextmenu

  - 假设这会禁用标准浏览器右键单击，因为它不再弹出

• mousedown

  - 用于选择元素

• touchstart

  - 同样

Cypress

.rightClick()

也会触发

mousedown

，但不起作用，因为要么它没有从

<piece>

冒泡到

<cg-board>

，要么目标坐标有问题。

您还应该断言绿色圆圈出现了。

it('clicking', () => {
  cy.viewport(1200,1500)  // to avoid scrolling problems

  cy.visit('https://qwerty084.github.io/vue3-chessboard/')

  cy.get('circle[cgHash*="green"]').should('not.exist')  // no green circle yet

  cy.get('piece').eq(4)
    .trigger('mousedown', {button:2, position: 'center'})

  cy.get('circle[cgHash*="green"]').should('be.visible')
})