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.