0
0
Cypresstesting~5 mins

cy.type() for text input in Cypress

Choose your learning style9 modes available
LearnWhyDeepTraceTryChallengeAutomateRecallFrame
Introduction

We use cy.type() to enter text into input boxes during automated tests. It helps check if typing works correctly on a webpage.

When you want to fill out a login form with username and password.
When testing a search box to see if it accepts text input.
When verifying that a comment or message box accepts typed text.
When simulating user input in any text field on a webpage.
Syntax
Cypress
cy.get('selector').type('text to type')

cy.get('selector') finds the input element by CSS selector.

.type('text') simulates typing the given text into the element.

Examples
Types 'myUser123' into the input with id 'username'.
Cypress
cy.get('#username').type('myUser123')
Types 'cypress testing' into the input with name attribute 'search'.
Cypress
cy.get('input[name="search"]').type('cypress testing')
Types 'Hello!' into the element with class 'comment-box'.
Cypress
cy.get('.comment-box').type('Hello!')
Sample Program

This test visits a sample page, types an email into the input box with class 'action-email', and checks if the input value matches what was typed.

Cypress
describe('Test typing in input', () => {
  it('should type text into input box', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email').type('test@example.com')
    cy.get('.action-email').should('have.value', 'test@example.com')
  })
})
OutputSuccess
Important Notes

Use clear and unique selectors to avoid typing into the wrong element.

You can simulate special keys like {enter} inside the text, e.g., .type('hello{enter}').

Make sure the input is visible and enabled before typing, or Cypress will throw an error.

Summary

cy.type() lets you simulate typing text into input fields.

Always select the input element first with cy.get().

Use assertions to check if the text was entered correctly.