How to type a very long string for testing an input box in Cypress?

Question

I want to test the validation for the character limit of a RichTextEditor, which is 2000 characters, but typing 2000+ characters with .type() takes a lot of time.

Is there a way to speed this up? I tried with Ctrl+c and Ctrl+v modifiers but it is not copy-pasting the text in the input box.

[`.type()`](https://docs.cypress.io/api/commands/type) has a configuration argument that takes an object. One of the configurable options is `delay` which controls the interval between key presses. The default is `10` so setting it to `0` or `1` is likely to speed things up. — Ouroborus, Jun 30 '21 at 08:01

score 13 · Answer 1 · 2021-06-30T11:55:41.407

The problem with reducing the delay { delay: 0 } is that it's there to throttle the char stream in case some event handler or validation can't handle the highest rate.

Also, if I test with the simplest input, no javascript attached

<input maxlength="2000">

the test takes 37 seconds with default delay of 10ms, but is still 24 seconds with delay of 0.

I would recommend setting 2000 chars via the val() method and type the last

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

This runs in 0.6 seconds

If you have some javascript event handlers, you would need to trigger them after setting the initial 2000 chars

.trigger('change')

or

.trigger('input')

RichTextEditor

A rich text editor using <div> to hold the text can be pre-loaded with the text() method instead of the val() method.

You will also need to identify the div that receives the text.

For example react-quill uses the class ql-editor on it's primary 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

Timings for react-quill

{ delay: 10 } (default) 32 seconds
{ delay: 0 } 18 seconds
preload the text 1.5 seconds

Actually, I am using a custom RichTextEditor and it doesn't render input on the DOM, it renders div, so on Div, if I try to invoke 'val' it is not working — Madhur Bansal, Jun 30 '21 at 10:28
`
`s use text nodes to hold the text, so the jQuery method to invoke is not `val` it's `text`. — , Jun 30 '21 at 11:57

score 9 · Answer 2 · answered Jun 30 '21 at 08:07

You can pass options to the type function type(text, options)

For available options, you can take a look at the docs

In your case, you could try to overwrite the delay option to remove the input duration.

inputField.type('a'.repeat(2000), { delay: 0})

Bartholomew · Answer 3 · 2022-07-05T13:08:40.000

2

if You pu this piece of code to cypress/support/index.js file it should remove the delay between the key strokes.

Cypress.Keyboard.defaults({
  keystrokeDelay: 0,
})

update: Here is a documentation of Cypress API Keyboard Cypress API

edited Jul 05 '22 at 13:08

answered Jun 30 '21 at 08:55

Bartholomew

21
5

Cypress.Keyboard.defaults is not a function- throwing this error – Prodyut Das Aug 05 '21 at 11:40

score 2 · Answer 4 · answered Dec 21 '21 at 11:24

I used the following code (from this post) to quickly copy-paste hundred email adresses in a textarea :

it('pastes text to textarea', () => {
  const textToPaste = 'this is not a valid email'
  cy.visit('index.html')
  cy.get("[type='email']").invoke('val', textToPaste).trigger('blur')
})

Based on the invoke() cypress method

How to type a very long string for testing an input box in Cypress?

4 Answers4

RichTextEditor