Value and attribute assertions in Cypress - Test Execution Trace

Test Overview

This test checks if an input field has the correct value and if a button has the expected attribute. It verifies that the input contains the text 'Hello' and the button has a 'type' attribute set to 'submit'.

Test Code - Cypress

Cypress

describe('Value and attribute assertions test', () => {
  it('checks input value and button attribute', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email')
      .type('Hello')
      .should('have.value', 'Hello')
    cy.get('.action-btn')
      .should('have.attr', 'type', 'submit')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io/commands/actions'	Browser displays the Cypress example actions page	-	PASS
3	Finds input element with class '.action-email'	Input field is visible and ready for typing	-	PASS
4	Types 'Hello' into the input field	Input field value is now 'Hello'	Check input field has value 'Hello'	PASS
5	Finds button element with class '.action-btn'	Button is visible on the page	-	PASS
6	Checks button has attribute 'type' with value 'submit'	Button attribute 'type' equals 'submit'	Verify button's 'type' attribute is 'submit'	PASS

Failure Scenario

Failing Condition: Input field does not contain the value 'Hello' or button does not have attribute 'type'='submit'

Execution Trace Quiz - 3 Questions

What does the test verify about the input field?

A It has the value 'Hello'

B It is visible on the page

C It is disabled

D It has a placeholder text

Key Result

Always assert both the value and attributes of elements to ensure the UI behaves as expected and the elements have correct properties.