cy.clear() for input fields in Cypress

Introduction

We use cy.clear() to remove any text inside input boxes. This helps us start fresh before typing new text.

When you want to erase old text before entering new data in a form.

When testing if an input field can be cleared by the user.

When resetting a form field during automated tests.

When verifying that clearing an input updates the page correctly.

Syntax

Cypress

cy.get('inputSelector').clear()

cy.get() finds the input field using a selector.

clear() empties the input field's text.

Examples

Clears the input field with id username.

Cypress

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

Clears the input field with the name attribute email.

Cypress

cy.get('input[name="email"]').clear()

Clears the input field with class search-box.

Cypress

cy.get('.search-box').clear()

Sample Program

This test visits a page, clears the input box, types an email into it, checks the text is there, then clears it and checks the box is empty.

Cypress

describe('Clear input field test', () => {
  it('clears the input box before typing', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email')
      .clear()
      .type('[e-mail]')
      .should('have.value', '[e-mail]')
      .clear()
      .should('have.value', '')
  })
})

Important Notes

If the input is disabled or readonly, clear() will not work.

Always use a reliable selector to find the input field.

Summary

cy.clear() empties text from input fields.

Use it before typing new text to avoid leftover data.

Works only on editable input fields.

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()