Skip to main content

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.
Tags
Submitted by arilio666 on April 6, 2022

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.