6

如何使用 Cypress 在 Slate 编辑器中插入文本？使用oronChange键入时似乎没有调用Slate处理程序。cy.type()cy.clear()

4

2 回答 2

7

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

但是，Slate 几乎完全依赖于beforeinput事件（请参阅此处https://docs.slatejs.org/concepts/xx-migrating#beforeinput），这是一种新的浏览器技术和赛普拉斯输入命令不模拟的事件。希望赛普拉斯团队将更新他们的输入命令以调度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 都在 editable.tsx 的源代码中列出

于 2020-04-22T08:06:14.110 回答
0

从 Cypress v5.5 开始，现在可以按预期工作！无需任何技巧即可使其与 Slate 一起使用。

请参阅https://github.com/cypress-io/cypress/issues/7088。

于 2020-11-25T15:02:35.063 回答