Cypress Type Command

Profile picture for user arilio666

The type command in Cypress is used to type into the DOM elements. .type() yields the same subject it was given from the previous command. It can not be chained directly with Cy.

Type is an action command which follows all the rules of actionability.

Syntax

.type(text)
.type(text, options)

Arguments Used In Type

1. Options

Can pass in objects to change the default behavior of .type()

Here is the list of some of the options that Cypress can use with the type command:

  • animationDistanceThreshold: Used to consider the distance between the pixels and the element and that mist exceeds over time. Default is animationDistanceThreshold.
  • delay: Used to delay after each keypress. Default is 10.
  • force: Forces the action. Default is false.
  • log: Displays the record in command log in output. Default is true.
  • parseSpecialCharSequences: Parse special characters for strings surrounded by {}. Default is true.
  • release: Keep a modifier active between commands. Default is true.
  • scrollBehavior: This is used to viewport position where an element should be scrolled before the command execution. Default is ScrollBehaviour.
  • timeout: Used to input time to wait for the action to resolve before timing out. Default is defaultCommandTimeout.
  • waitForAnimations: Waits for the animations to finish before executing the command. Default is waitForAnimations.

2. Text(String)

Here comes the text to be typed into the DOM element. These characters will pass along the correct keyCode, key, and which codes to any events issued during .type(). Text passed into the type() can also includes special character  sequences that performs actions such as {moveToEnd}, {moveToStart}, or {selectAll}.

Here are some of the special character sequences that Cypress can use with the type command:

  • {{}: Types in the literal { key.
  • {backspace}: Deletes the typed in input from the left side.
  • {del}: Deletes the typed in input from the right of the cursor.
  • {downArrow}: Moves down.
  • {end}: This sequence moves to the end of a line.
  • {enter}: Activates the Enter key
  • {esc}: Activates the Escape key
  • {home}: Moves cursor to the start of the typed in input.
  • {insert}: Inserts character to the right.
  • {leftArrow}: Moves  left.
  • {moveToEnd}: Moves  to end of typeable element.
  • {moveToStart}: Moves  to the start of typeable element.
  • {pageDown}: Scroll down.
  • {pageUp}: Scroll up.
  • {rightArrow}: Moves  right.
  • {selectAll}: Selects all text.
  • {upArrow}: Moves up.
  • {alt}: Activates the altKey modifier. Aliases: {option}
  • {ctrl}: Activates the ctrlKey modifier. Aliases: {control}
  • {meta}: Activates the metaKey modifier. Aliases: {command}, {cmd}
  • {shift}: Activates the shiftKey modifier.

Usage

Correct Usage:

cy.get('#edit-pass').type('bat')

Types 'bat' into the edit-pass id.

Wrong Usage:

cy.type('Hello') 

It cannot be chained off 'cy.'

cy.url().type('www.programsbuzz.com') 

'URL' does not yield a DOM element.

    Example

    Let us see a real-time example of the type command:

    Here is what we are going to do:

    1. Navigate to https://www.programsbuzz.com/user/login
    2. Type in username followed by a special character sequence.
    3. Type in a password followed by a special character sequence.
    it('Type Username And Password',()=>{
        cy.visit('https://www.programsbuzz.com/user/login')
        
        cy.get('form').within(()=>{
            cy.xpath("//input[@id='edit-name']").type('Rataalada{enter}')
            cy.get('#edit-pass').type('bat{enter}')
        })
    })

    Cypress Type Command

    We used a unique character sequence/ Key event 'enter' to press enter key after typing in the following input using the type command.