cy.clear() for input fields in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress test snippet?

Consider the following Cypress test code that clears an input field and then types a new value. What will be the value of the input field after the test runs?

Cypress

cy.get('#username').type('oldValue').clear().type('newValue').invoke('val').then(value => {
  cy.wrap(value).as('finalValue')
})

A 'oldValue'

B '' (empty string)

C 'newValue'

D undefined

💡 Hint

Remember that cy.clear() removes existing text before typing new text.

The cy.clear() command empties the input field. Then type('newValue') adds the new text. So the final value is 'newValue'.

❓ assertion

intermediate

Which assertion correctly verifies an input field is empty after clearing?

You want to check that an input field with id 'email' is empty after using cy.clear(). Which assertion is correct?

Cypress

cy.get('#email').clear()

A cy.get('#email').should('contain.text', '')

B cy.get('#email').should('have.value', '')

C cy.get('#email').should('be.empty')

D cy.get('#email').should('not.exist')

💡 Hint

Input fields have a 'value' attribute for their content.

To check an input field's content, use should('have.value', ''). The other options check text content or element existence, which are incorrect here.

❓ locator

advanced

Which locator is best for clearing a specific input field with Cypress?

You want to clear the password input field inside a form with id 'loginForm'. Which locator is the best practice to select this input for clearing?

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

B cy.get('.password-input')

C cy.get('form input')

D cy.get('#loginForm input[name="password"]')

💡 Hint

Use specific and stable selectors to avoid selecting wrong elements.

Option D uses an id and attribute selector, making it specific and stable. Option D may select multiple password inputs, C is too broad, and B depends on a class that may not exist or change.

🔧 Debug

advanced

Why does cy.clear() fail on this input field?

Given this HTML: and this Cypress code: cy.get('#search').clear(), why does the clear command fail?

A The input is disabled, so cy.clear() cannot modify it.

B The input has a value attribute, so clear is ignored.

C cy.clear() requires the input to be visible, but it is hidden.

D cy.clear() only works on textarea elements, not input.

💡 Hint

Disabled inputs cannot be changed by user actions.

Disabled inputs cannot be changed by user interaction or Cypress commands like clear(). The command fails because the input is disabled.

❓ framework

expert

How to ensure cy.clear() waits for input readiness before clearing?

In a flaky test, cy.clear() sometimes fails because the input is not ready. Which Cypress command sequence best ensures the input is visible and enabled before clearing?

A cy.get('#input').should('be.visible').should('not.be.disabled').clear()

B cy.get('#input').clear().should('be.visible').should('not.be.disabled')

C cy.get('#input').clear({force: true})

D cy.get('#input').wait(1000).clear()

💡 Hint

Use assertions to wait for conditions before actions.

Option A uses should assertions to wait until the input is visible and enabled before clearing. Option A clears before checking, C forces clear ignoring state, and D uses fixed wait which is unreliable.

Practice

1. What does the cy.clear() command do in Cypress when used on an input field?

easy

A. It empties the text inside the input field.

B. It submits the form containing the input field.

C. It disables the input field.

D. It highlights the input field.

Solution

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

   The cy.clear() command is designed to remove any existing text from an input field.

2. Step 2: Compare with other options

   It does not submit forms, disable, or highlight fields; it only empties the text.

3. Final Answer:

   It empties the text inside the input field. -> Option A

4. Quick Check:

   cy.clear() empties input text [OK]

Hint: Remember: cy.clear() empties input text before typing [OK]

Common Mistakes:

• Thinking cy.clear() submits the form
• Assuming cy.clear() disables the input
• Confusing cy.clear() with highlighting

2. Which of the following is the correct syntax to clear an input field with id username using Cypress?

easy

A. cy.get('username').clear();

B. cy.clear('#username');

C. cy.clearInput('#username');

D. cy.get('#username').clear();

Solution

1. Step 1: Identify correct Cypress chaining syntax

   To clear an input, first select it with cy.get(), then call .clear() on the element.

2. Step 2: Check selector correctness

   The id selector requires a '#' prefix, so cy.get('#username').clear(); is correct.

3. Final Answer:

   cy.get('#username').clear(); -> Option D

4. Quick Check:

   Use cy.get('#id').clear() syntax [OK]

Hint: Always use cy.get() before .clear() with correct selector [OK]

Common Mistakes:

• Using cy.clear() directly with selector
• Missing '#' for id selector
• Using non-existent commands like clearInput()

3. Given the following Cypress code, what will be the value of the input field after execution?

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

medium

A. '[e-mail]'

B. '[e-mail]@domain.com'

C. '' (empty string)

D. The test will fail with an error

Solution

1. Step 1: Analyze the commands in order

   First, the input gets '[e-mail]' typed in. Then clear() empties the input. Finally, '[e-mail]' is typed.

2. Step 2: Determine final input value

   Because clear() removes previous text, the final input contains only '[e-mail]'.

3. Final Answer:

   '[e-mail]' -> Option A

4. Quick Check:

   clear() empties before typing new text [OK]

Hint: clear() removes old text before new typing [OK]

Common Mistakes:

• Assuming text appends instead of replacing
• Thinking clear() does not work
• Expecting an error from clear()

4. You wrote this Cypress test:

cy.get('#search').clear;

Why does this test fail to clear the input field?

medium

A. Because clear() cannot be used on input fields.

B. Because the selector #search is incorrect.

C. Because clear is missing parentheses to call the function.

D. Because Cypress requires cy.clear() instead.

Solution

1. Step 1: Check the method call syntax

   The code uses clear without parentheses, so the function is not executed.

2. Step 2: Understand Cypress command chaining

   To clear the input, you must call clear() with parentheses to invoke the method.

3. Final Answer:

   Because clear is missing parentheses to call the function. -> Option C

4. Quick Check:

   Always use parentheses to call .clear() [OK]

Hint: Use parentheses: .clear() not .clear [OK]

Common Mistakes:

• Forgetting parentheses on .clear()
• Assuming selector is wrong without checking
• Thinking clear() is invalid on inputs

5. You want to test a form where the input field with class .user-input might already contain text. Which Cypress code snippet correctly clears the input and types 'new text' ensuring no leftover text remains?

hard

A. cy.get('.user-input').type('new text');

B. cy.get('.user-input').clear().type('new text');

C. cy.get('.user-input').invoke('attr', 'value', '').type('new text');

D. cy.get('.user-input').clearText().type('new text');

Solution

1. Step 1: Identify the correct method to clear input

   cy.clear() is the Cypress command designed to empty input fields before typing.

2. Step 2: Verify chaining with type()

   Using .clear().type('new text') ensures the field is emptied before new text is entered.

3. Step 3: Check other options

   Typing without clearing may append to existing text; clearText() does not exist; invoke('attr', 'value', '') sets the HTML attribute but does not clear the current input value.

4. Final Answer:

   cy.get('.user-input').clear().type('new text'); -> Option B

5. Quick Check:

   Use .clear() before .type() to avoid leftover text [OK]

Hint: Always clear input before typing new text [OK]

Common Mistakes:

• Typing without clearing first
• Using invalid commands like clearText()
• Using invoke('attr', 'value', '') instead of clear()