赛普拉斯无法触发 document.addEventListener 在按键上添加的功能

Question

我有一个 React 应用程序，我在其中动态地在文档上添加了一个事件侦听器，该事件侦听器在按下 right/left 箭头键时执行。

当我尝试通过按下箭头键在 cypress open-ct 中手动触发它时它起作用但是当我在测试中编写它以像 cy.get('body').trigger('keydown', { keyCode: 39 }); 那样触发它时，该功能不会触发，是吗任何其他方式来触发 document.addEventListener 添加的功能？

componentDidUpdate(prevProps) {

      if (something something) {
        document.addEventListener('keydown', this.handleLeftRightKeys);
      } else {
        document.removeEventListener('keydown', this.handleLeftRightKeys);
      }
}

handleLeftRightKeys(event) {
    if (event.key === 'ArrowLeft') {
      this.prev();
    } else if (event.key === 'ArrowRight') {
      this.next();
    }
}

我希望从 cypress 测试文件中触发这些 prev() 和 next() 函数。怎么做？

Answer 1

您在 body 元素上触发，但事件侦听器在 document 上。也许它会起泡，但如果不是，那值得一试

cy.document()
  .trigger('keydown', { keyCode: 39 })

Answer 2

找到答案了。必须将 keyCode 添加到 eventListener。

已更改

handleLeftRightKeys(event) {
    if (event.key === 'ArrowLeft') {
      this.prev();
    } else if (event.key === 'ArrowRight') {
      this.next();
    }
}

至

handleLeftRightKeys(event) {
    if (event.key === 'ArrowLeft' || event.keyCode === 37) {
      this.prev();
    } else if (event.key === 'ArrowRight' || event.keyCode === 39) {
      this.next();
    }
}

赛普拉斯无法触发 document.addEventListener 在按键上添加的功能

cypress not able to trigger functions added by document.addEventListener on keypress

reactjs

jestjs

cypress