cy.type() for text input in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to type 'hello' into the input field with id 'username'.

Cypress

cy.get('#username').[1]('hello')

Drag options to blanks, or click blank then click option'

Atype

Bclick

Cselect

Dcheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'type' to enter text

Using 'select' which is for dropdowns, not text inputs

Using 'check' which is for checkboxes

The cy.type() command types text into an input field. Here, it types 'hello' into the element with id 'username'.

2fill in blank

medium

Complete the code to type the email '[e-mail]' into the input with class 'email-input'.

Cypress

cy.get('.email-input').[1]('[e-mail]')

Drag options to blanks, or click blank then click option'

Aclear

Bfocus

Csubmit

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'clear' instead of 'type' to enter text

Using 'submit' which is for forms, not typing

Using 'focus' which only focuses the element

cy.type() types the given string into the selected input element.

3fill in blank

hard

Fix the error in the code to type 'password123' into the input with name 'password'.

Cypress

cy.get('input[name="password"]').[1]('password123')

Drag options to blanks, or click blank then click option'

Aclick

Btype

Cselect

Dcheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' which only clicks the element

Using 'check' which is for checkboxes

Using 'select' which is for dropdowns

The type command is needed to enter text. Using click, check, or select will not type the password.

4fill in blank

hard

Fill both blanks to type 'admin' into the input with id 'user' and then press Enter.

Cypress

cy.get('#user').[1]('admin[2]')

Drag options to blanks, or click blank then click option'

Atype

B{enter}

C{esc}

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'type'

Using '{esc}' instead of '{enter}'

Not including the special key inside the string

Use type to enter text. To simulate pressing Enter, include {enter} inside the string.

5fill in blank

hard

Fill all three blanks to clear the input with id 'search', type 'query', and then press Enter.

Cypress

cy.get('#search').[1]().[2]('query[3]')

Drag options to blanks, or click blank then click option'

Aclear

Btype

C{enter}

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Not clearing the input before typing

Using 'click' instead of 'clear' or 'type'

Not including '{enter}' to simulate pressing Enter

First, clear the input with clear(). Then type the text with type(). To press Enter, include {enter} inside the string.

Practice

1. What does the cy.type() command do in Cypress testing?

easy

A. Simulates typing text into an input field

B. Clicks a button on the page

C. Selects an element by CSS selector

D. Checks if an element is visible

Solution

1. Step 1: Understand the purpose of cy.type()

   The cy.type() command is used to simulate typing text into input fields during tests.

2. Step 2: Compare with other commands

   Other commands like cy.click() or cy.get() do different actions, so they are not correct here.

3. Final Answer:

   Simulates typing text into an input field -> Option A

4. Quick Check:

   cy.type() = Simulate typing [OK]

Hint: Remember: type = enter text, click = press button [OK]

Common Mistakes:

• Confusing cy.type() with cy.click()
• Thinking cy.type() selects elements
• Assuming cy.type() checks visibility

2. Which of the following is the correct syntax to type 'hello' into an input with id 'name' using Cypress?

easy

A. cy.type('#name', 'hello')

B. cy.get('#name').type('hello')

C. cy.get('input').type('#name', 'hello')

D. cy.type('hello').get('#name')

Solution

1. Step 1: Identify correct chaining of commands

   In Cypress, you first select the element with cy.get(), then chain .type() with the text to enter.

2. Step 2: Check syntax correctness

   cy.get('#name').type('hello') correctly uses cy.get('#name').type('hello'). Other options misuse the order or parameters.

3. Final Answer:

   cy.get('#name').type('hello') -> Option B

4. Quick Check:

   Get element then type text = cy.get('#name').type('hello') [OK]

Hint: Always get element first, then type text [OK]

Common Mistakes:

• Using cy.type() without cy.get() first
• Passing selector inside type()
• Incorrect chaining order

3. Given the code:

cy.get('#email').type('[e-mail]')
cy.get('#email').should('have.value', '[e-mail]')

What will the assertion check?

medium

A. That the input with id 'email' has focus

B. That the input with id 'email' is visible

C. That the input with id 'email' is empty

D. That the input with id 'email' contains the typed email address

Solution

1. Step 1: Understand the type() command effect

   The type() command enters the text '[e-mail]' into the input field with id 'email'.

2. Step 2: Understand the assertion should('have.value', ...)

   The assertion checks if the input's value matches the typed text, confirming the input contains the email.

3. Final Answer:

   That the input with id 'email' contains the typed email address -> Option D

4. Quick Check:

   should('have.value') checks input text = That the input with id 'email' contains the typed email address [OK]

Hint: Use should('have.value', text) to check typed input [OK]

Common Mistakes:

• Confusing visibility check with value check
• Assuming should checks focus state
• Expecting input to be empty after typing

4. What is wrong with this Cypress code snippet?

cy.type('#username', 'admin')

medium

A. The selector '#username' is invalid

B. The text 'admin' should be inside double quotes

C. cy.type() is called without selecting an element first

D. cy.type() cannot type text into input fields

Solution

1. Step 1: Check correct usage of cy.type()

   The cy.type() command must be chained after selecting an element with cy.get().

2. Step 2: Identify the error in the snippet

   The code calls cy.type() directly with a selector and text, which is incorrect syntax.

3. Final Answer:

   cy.type() is called without selecting an element first -> Option C

4. Quick Check:

   Always get element before type() [OK]

Hint: Always use cy.get() before cy.type() [OK]

Common Mistakes:

• Calling cy.type() without cy.get()
• Passing selector as first argument to cy.type()
• Misunderstanding command chaining

5. You want to test a form input that clears existing text before typing new text 'newuser'. Which Cypress command sequence correctly achieves this?

hard

A. cy.get('#user').clear().type('newuser')

B. cy.get('#user').type('newuser').clear()

C. cy.get('#user').type('newuser')

D. cy.get('#user').clear('newuser')

Solution

1. Step 1: Understand clearing input before typing

   To replace existing text, first clear the input with clear(), then type the new text.

2. Step 2: Analyze each option

   cy.get('#user').clear().type('newuser') correctly chains clear() before type(). cy.get('#user').type('newuser').clear() types first then clears, which erases the new text. cy.get('#user').type('newuser') does not clear old text. cy.get('#user').clear('newuser') misuses clear() with an argument.

3. Final Answer:

   cy.get('#user').clear().type('newuser') -> Option A

4. Quick Check:

   Clear then type to replace text = cy.get('#user').clear().type('newuser') [OK]

Hint: Clear input before typing new text to replace it [OK]

Common Mistakes:

• Typing before clearing input
• Passing text to clear() method
• Not clearing input before typing