Cypresstesting~10 mins

cy.clear() for input fields in Cypress - Test Execution Trace

Choose your learning style9 modes available

Learn Why Deep Trace Try Challenge Automate Recall Frame

Test Overview

This test opens a web page with a text input field, types some text into it, then clears the input using cy.clear(). It verifies that the input field is empty after clearing.

Test Code - Cypress

Cypress

describe('Input field clear test', () => {
  it('should clear the input field after typing', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email')
      .type('hello@example.com')
      .should('have.value', 'hello@example.com')
      .clear()
      .should('have.value', '')
  })
})

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens	Browser window opens, ready to load page	-	PASS
3	Navigates to 'https://example.cypress.io/commands/actions'	Page loads with various input fields visible	Page URL is correct	PASS
4	Finds input element with class '.action-email'	Input field for email is visible and enabled	Element found and visible	PASS
5	Types 'hello@example.com' into the input field	Input field value is now 'hello@example.com'	Input value equals 'hello@example.com'	PASS
6	Clears the input field using cy.clear()	Input field is empty	Input value equals '' (empty string)	PASS
7	Test ends	Browser remains open or closes depending on config	-	PASS

Failure Scenario

Failing Condition: Input field is not found or not visible, or clear() does not empty the field

Execution Trace Quiz - 3 Questions

Test your understanding

What does cy.clear() do in this test?

AIt types new text into the input

BIt empties the text inside the input field

CIt submits the form

DIt clicks the input field

Key Result

Always verify the input field is visible and enabled before typing or clearing. Use clear() to remove existing text before entering new input to avoid test flakiness.