javascript - How to hold shift and use arrow keys in Cypress - Stack Overflow

admin管理员组

文章数量:1313801

I have an issue when using the Cypress type() mand in the way I want.

My objective

I want to be able to select and delete text in a textfield. I want this done via holding the shift key, pressing the right arrow key multiple times and then pressing the delete key.

My attempt

//hold shift and use right arrow
cy.type('{shift}{rightarrow}'.repeat(10));
//press delete
cy.type('{del}');

I have an issue when using the Cypress type() mand in the way I want.

My objective

I want to be able to select and delete text in a textfield. I want this done via holding the shift key, pressing the right arrow key multiple times and then pressing the delete key.

My attempt

//hold shift and use right arrow
cy.type('{shift}{rightarrow}'.repeat(10));
//press delete
cy.type('{del}');

• javascript
• typescript
• cypress

Share Improve this question Follow edited Jan 27, 2022 at 19:02 Taran asked Jan 27, 2022 at 18:54 TaranTaran 53122 gold badges88 silver badges2222 bronze badges 10

• Have you tried cy.type('{shift}{rightarrow}'.repeat(10))? – Ruan Mendes Commented Jan 27, 2022 at 18:57
• @JuanMendes yes even with that it seems to still not be selecting the text like i expect. I will change my original attempt as cypress docs explain modifiers are released after each type mand – Taran Commented Jan 27, 2022 at 19:01
• .repeat(10) where is this ing from. I could see nothing in the docs? – Alapan Das Commented Jan 27, 2022 at 19:04
• @AlapanDas String.repeat is a native javascript mand I believe, to repeat the string. This example i tested works fine with right arrow alone – Taran Commented Jan 27, 2022 at 19:17
• If you just use {shift}{rightarrow} without the repeat, then does this work once ? – Alapan Das Commented Jan 27, 2022 at 19:36

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

As per the available information instead of repeat, you can use the Cypress._.times loadash method. This will run the entire type mand 10 times.

Cypress._.times(10, () => {
  cy.type('{shift}{rightarrow}')
})

The element needs focus before applying arrow keys,

cy.get('#myinput')
  .focus()
  .type(Cypress._.repeat('{shift}{rightarrow}', 5))
  .type('{del}')

This gets the cursor moving within the the element's text, but unfortunately does not extend the selection, so {del} only removes one element.

You can use an internal input method instead of {shift}{rightarrow}, if this suits your test

cy.get('#myinput')
  .focus()
  .then($el => $el[0].setSelectionRange(0, 5))
  .type('{del}')

To clear pletely,

cy.get('#myinput')
  .clear()          // types {selectall}{del}

For anyone else that es looking, I had success with this method of using {release:false} with the modifier. Here's some example code for selecting and deleting the two lines above:

    cy.get("body").type("{shift}", {release: false});
    cy.get("body").type("{upArrow}{upArrow}");
    cy.get("body").type("{shift}");
    cy.get("body").type("{backspace}");

本文标签： javascriptHow to hold shift and use arrow keys in CypressStack Overflow