cy.type() for text input in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress test code?

Consider the following Cypress test snippet that types text into an input field. What will be the value of the input after running this code?

Cypress

cy.get('#username').type('hello').type('{backspace}').type('p');
cy.get('#username').invoke('val').then(value => cy.wrap(value));

A "hellp"

B "hello"

C "help"

D "hell"

💡 Hint

Remember that {backspace} removes the last character typed before it.

The code types 'hello' into the input, then sends a backspace key which deletes the last character 'o', and finally types 'p'. So the final input value is 'hellp'.

❓ assertion

intermediate

Which assertion correctly verifies the input value after typing?

You want to check that the input with id 'email' contains the text '[e-mail]' after typing. Which assertion is correct?

Cypress

cy.get('#email').type('[e-mail]');

A cy.get('#email').should('contain.text', '[e-mail]');

B cy.get('#email').should('include.value', '[e-mail]');

C cy.get('#email').should('have.text', '[e-mail]');

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

💡 Hint

Input fields store typed text in the 'value' attribute, not as inner text.

The correct way to check the typed text in an input is to assert the 'value' property. 'have.value' checks this correctly.

❓ locator

advanced

Which locator is best for typing into a password field with accessibility in mind?

You want to type into a password input field that has a label 'Password'. Which locator is the best practice for accessibility and reliability?

A cy.get('input[type="password"]')

B cy.get('#password')

C cy.contains('label', 'Password').invoke('attr', 'for').then(id => cy.get(`#${id}`))

D cy.get('input').eq(1)

💡 Hint

Using the label's 'for' attribute links the label to the input, improving accessibility.

Option C uses the label text to find the input by its 'for' attribute, which is the most accessible and reliable method.

🔧 Debug

advanced

Why does this Cypress test fail to type text into the input?

Look at this code snippet: cy.get('#search').type('query'); But the test fails with error: "cy.type() failed because this element is disabled". What is the most likely cause?

A The input element has the 'disabled' attribute set, preventing typing.

B The selector '#search' is incorrect and selects no element.

C The input is hidden with CSS 'display:none', so typing is blocked.

D The test is missing a .click() before .type(), so the input is not focused.

💡 Hint

Cypress cannot type into inputs that are disabled by HTML attributes.

The error message indicates the input is disabled, so Cypress cannot type into it. The 'disabled' attribute blocks user input.

❓ framework

expert

How to simulate typing with delay between keystrokes in Cypress?

You want to simulate a user typing slowly into an input with id 'comment'. Which code snippet correctly types 'hello' with a 100ms delay between each character?

A cy.get('#comment').type('hello').wait(100);

B cy.get('#comment').type('hello', { delay: 100 });

C cy.get('#comment').type('hello', { delayBetween: 100 });

D cy.get('#comment').type('h').wait(100).type('e').wait(100).type('l').wait(100).type('l').wait(100).type('o');

💡 Hint

Check the official Cypress docs for the correct option name for delay.

The 'delay' option in cy.type() adds a delay between each keystroke. Option B uses it correctly.