Type Key Combinations in Cypress

Modifier keys are special keys on a computer keyboard that modifies the regular action of another key when the two are pressed in combination.

Modifier keys usually do nothing by themselves; pressing any of the Ctrl, Shift, and Alt keys alone does not trigger any action from the computer.

A keydown event is fired when a modifier is activated, and a keyup event is fired when the modifier key is released. Let us check those sequences in more and various ways as possible.

1. Using Combinations of Keys

Type In A Text And Select All Delete It And Type In Alternate Text:

describe('The Key combinations',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/').as('site')
       cy.get('.gv-icon-52').click()
       cy.get('#edit-keys').type('Cypress{selectAll}{backspace}selenium')
    })
})

Using Combinations of Keys

We have used the 'selectAll' sequence after typing in 'Cypress.'
This is a key-down event, and this sequence selects all the text typed in. in this case, it's 'Cypress.'
Then to delete the text within the field, we used the sequence {backspace} followed by alternate text after the sequence to be typed.
Keypress events are selectAll and backspace.

2. Using {} Characters

Now sometimes, there might be a use for us to input some text which also contains {} characters.
This can be difficult as those characters are used in the case of special sequence in cypress.

But there is a way, and it's simple.

describe('The Key combinations',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/').as('site')
       cy.get('.gv-icon-52').click()
       cy.get('#edit-keys').type('{HogRider}', {
        parseSpecialCharSequences: false,
      })
    })
})

Using {} Characters

Using the parseSpecialCharSequences set to false with the {} character when we are going to use it will lift off the restrictions for those characters and can be used anywhere.
And it is not only for the special character syntax now but for everyday use too.

Let us check out what happens when we usually use without parseSpecialCharSequences.

describe('The Key combinations',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/').as('site')
       cy.get('.gv-icon-52').click()
       cy.get('#edit-keys').type('{HogRider}')
    })
})

Using {} Characters

We can see it only suggests a special character sequence within that {} and not other custom input.
We can also see that it has suggested parseSpecialCharSequences to be used and set to false if we want to use custom inputs using {}.

3. Hold And Release Behaviour

We can also perform hold key combinations like what we will do now. Let's check it out.

describe('The Key combinations',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/').as('site')
       cy.get('.gv-icon-52').click()
       cy.get('#edit-keys').type('{shift}cypress')
    })
})

All characters after the {shift} will have a shift key.

describe('The Key combinations',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/').as('site')
       cy.get('.gv-icon-52').click()
       cy.get('#edit-keys').type('{shift}cypress', {release: false})
    })
})

Here shift key will be valid while typing cypress and then false after anything that comes after that.