selenium - 使用 Selenium 或 Cypress 进行测试时如何触发 slate.js 上的更改事件

Question

我正在尝试找到一种在进行 E2E 测试(使用 selenium 或 cypress)和 slate.js 时模拟“更改”事件的方法

在我们的 UI 中，当用户点击一个词时，我们会弹出一个模态(与该词相关)。我一直无法做到这一点，因为我无法触发更改事件

Answer 1

Cypress 输入命令(例如 cy.type() 和 cy.clear())通过调度 input 工作和 change事件 - 在 cy.type() 的情况下, 每个字符一个。这模仿了用户在键盘上键入时真实浏览器的行为，足以触发大多数应用程序 JavaScript 的行为。

但是，Slate 几乎完全依赖于 beforeinput事件(请参见此处 https://docs.slatejs.org/concepts/xx-migrating#beforeinput)，这是一项新的浏览器技术，也是 Cypress 输入命令无法模拟的事件。希望 Cypress 团队更新他们的输入命令以发送 beforeinput事件，但在他们这样做之前，我已经创建了几个简单的自定义命令，它们将触发 Slate 的输入事件监听器并使其响应。

    // commands.js
    Cypress.Commands.add('getEditor', (selector) => {
      return cy.get(selector)
        .click();
    });

    Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
      return cy.wrap(subject)
        .then(subject => {
          subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: text }));
          return subject;
        })
    });

    Cypress.Commands.add('clearInSlate', { prevSubject: true }, (subject) => {
      return cy.wrap(subject)
        .then(subject => {
          subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteHardLineBackward' }))
          return subject;
        })
    });

    // slateEditor.spec.js
    cy.getEditor('[data-testid=slateEditor1] [contenteditable]')
        .typeInSlate('Some input text ');

    cy.getEditor('[data-testid=slateEditor2] [contenteditable]')
        .clearInSlate()
        .typeInSlate('http://httpbin.org/status/409');

如果需要支持其他inputTypes，Slate支持的所有inputTypes都列出来 in the source code for editable.tsx