Cypresstesting~10 mins

First Cypress test - Test Execution Trace

Choose your learning style9 modes available

Learn Why Deep Trace Try Challenge Automate Recall Frame

Test Overview

This test opens a simple webpage, finds a button by its text, clicks it, and checks the URL change. It verifies that the button click works and then types into an input field verifying its value.

Test Code - Cypress

Cypress

describe('First Cypress test', () => {
  it('clicks the "type" button, checks the URL, and verifies the input', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
    cy.get('.action-email').type('test@example.com').should('have.value', 'test@example.com')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner is ready	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io'	Example Cypress page is loaded	Page loaded successfully	PASS
3	Finds element containing text 'type' and clicks it	Navigated to '/commands/actions' page	URL includes '/commands/actions'	PASS
4	Finds input with class '.action-email', types 'test@example.com'	Input field contains typed email	Input value is 'test@example.com'	PASS
5	Test ends	Test completed with all assertions passed	-	PASS

Failure Scenario

Failing Condition: The element containing text 'type' is not found or not clickable

Execution Trace Quiz - 3 Questions

Test your understanding

What does the test check after clicking the 'type' button?

AThat the URL includes '/commands/actions'

BThat the page title changes

CThat a popup appears

DThat the button disappears

Key Result

Always verify that elements exist and are interactable before performing actions, and assert expected outcomes to catch issues early.