javascript - 如何在 Cypress 中输入一个很长的字符串来测试输入框？

Question

我想测试 RichTextEditor 的字符限制的验证，即 2000 个字符，但使用 .type() 输入 2000+ 个字符需要很多时间。
有没有办法加快这个速度？我尝试使用 Ctrl+c 和 Ctrl+v 修饰符，但它没有在输入框中复制粘贴文本。

Answer 1

减少延迟的问题{ delay: 0 }是它可以在某些事件处理程序或验证无法处理最高速率的情况下限制字符流。
另外，如果我使用最简单的输入进行测试，则没有附加 javascript

<input maxlength="2000">

测试需要 37 秒，默认延迟为 10 毫秒，但仍为 24 秒 延迟为 0。
我建议通过 val() 设置 2000 个字符方法并键入最后一个

cy.get('input')
  .invoke('val', stringGen(2000))  // set 2000 chars
  .type('!')                       // add another
  .invoke('val')                   // read the value
  .should('have.length', 2000)     // confirm the last did not go in

这在 中运行0.6 秒
如果您有一些 javascript 事件处理程序，则需要在设置初始 2000 个字符后触发它们

.trigger('change')

或者

.trigger('input')

富文本编辑器
使用 <div> 的富文本编辑器保存文本可以预加载 text()方法而不是 val()方法。
您还需要识别接收文本的 div。
例如 react-quill使用类 ql-editor在它的主要 div 上。

cy.get('div.ql-editor')
  .invoke('text', stringGen(2000))  // set 2000 chars
  .type('!')                        // add another
  .invoke('text')                   // read the value
  .should('have.length', 2000)      // confirm the last did not go in

react-quill 的时间安排 { delay: 10 } (默认)32 秒 { delay: 0 } 18 秒
预加载文本 1.5 秒