expect() for BDD assertions in Cypress - Test Execution Trace

Test Overview

This test checks if a button with the ID submit-btn is visible and enabled on the page using Cypress expect() BDD assertions.

Test Code - Cypress

Cypress

describe('Button visibility and state test', () => {
  it('should verify the submit button is visible and enabled', () => {
    cy.visit('https://example.com')
    cy.get('#submit-btn').then(($btn) => {
      expect($btn).to.be.visible
      expect($btn).to.be.enabled
    })
  })
})

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.com'	Browser shows the homepage of example.com	-	PASS
3	Find element with selector '#submit-btn' using cy.get	Button with ID 'submit-btn' is present in the DOM	Element found successfully	PASS
4	Use expect() to check if the button is visible	Button is visible on the page	expect($btn).to.be.visible	PASS
5	Use expect() to check if the button is enabled	Button is enabled and clickable	expect($btn).to.be.enabled	PASS
6	Test ends successfully	All assertions passed, test complete	-	PASS

Failure Scenario

Failing Condition: The button with ID 'submit-btn' is either not visible or disabled

Execution Trace Quiz - 3 Questions

What does the step 'cy.get('#submit-btn')' do in the test?

A Clicks the button with ID 'submit-btn'

B Finds the button element with ID 'submit-btn' on the page

C Checks if the button is visible

D Navigates to the submit page

Key Result

Using <code>expect()</code> with Cypress allows clear, readable checks of element states like visibility and enabled status, making tests easy to understand and maintain.