javascript - How to type a very long string for testing an input box in Cypress? - Stack Overflow

admin管理员组

文章数量:1180433

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.

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.

• javascript
• reactjs
• automated-tests
• cypress
• rich-text-editor

Share Improve this question Follow edited Jun 30, 2021 at 12:13 user9161752 asked Jun 30, 2021 at 7:55 Madhur BansalMadhur Bansal 93422 gold badges1010 silver badges1515 bronze badges 1

• 3 .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 Commented Jun 30, 2021 at 8:01

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 15

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

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})

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

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

本文标签： javascriptHow to type a very long string for testing an input box in CypressStack Overflow