cy.clear() for input fields in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to clear the input field with id 'username'.

Cypress

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

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

Aclear

Btype

Cclick

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' instead of 'clear' will add text instead of removing it.

Using 'click' does not clear the input field.

Using 'submit' is for forms, not clearing inputs.

The cy.clear() command clears the value of an input field. Here, it clears the input with id 'username'.

2fill in blank

medium

Complete the code to clear the input field with class 'email-input'.

Cypress

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

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

Atype

Bclear

Cfocus

Dcheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' adds text instead of clearing.

Using 'check' is for checkboxes, not inputs.

cy.clear() empties the input field. Here, it clears the input with class 'email-input'.

3fill in blank

hard

Fix the error in the code to clear the input field with name 'password'.

Cypress

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

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

Aclick

Btype

Csubmit

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' instead of 'clear' does not remove existing text.

Using 'submit' is for forms, not clearing inputs.

The correct command to clear an input field is clear(). Using 'type' or others will not clear the field.

4fill in blank

hard

Fill both blanks to clear the input field with id 'search' and then type 'Cypress'.

Cypress

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

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

Aclear

Btype

Cclick

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Typing before clearing causes text to append instead of replace.

Using 'click' or 'submit' does not enter text.

First, clear() empties the input. Then, type('Cypress') enters the text.

5fill in blank

hard

Fill all three blanks to clear the input with class 'input-field', type 'Hello', and then assert it has the correct value.

Cypress

cy.get('.input-field').[1]().[2]('Hello').should('[3]', 'Hello')

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

Aclear

Btype

Chave.value

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'clear' or 'type' breaks the flow.

Using wrong assertion like 'contain' instead of 'have.value'.

We clear the input, type 'Hello', then check it has the value 'Hello' using have.value.

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