cypress-testing-library - Test Execution Trace

Test Overview

This test uses Cypress Testing Library to check if a button with the label 'Submit' is visible and clickable on the page. It verifies that the button exists and that clicking it triggers the expected behavior.

Test Code - Cypress

Cypress

describe('Submit Button Test', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should find and click the Submit button', () => {
    cy.findByRole('button', { name: /submit/i }).should('be.visible').click();
    cy.findByText(/form submitted/i).should('exist');
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to '/'	Page loads with form containing a Submit button	Page loaded successfully	PASS
3	Find button with role 'button' and name matching 'Submit' using Cypress Testing Library	Submit button is present and visible on the page	Button is visible	PASS
4	Click the Submit button	Button is clicked, triggering form submission	-	PASS
5	Check for text 'Form Submitted' to confirm submission	Confirmation message displayed on page	Text 'Form Submitted' exists	PASS

Failure Scenario

Failing Condition: Submit button is missing or not visible on the page

Execution Trace Quiz - 3 Questions

What does the test check before clicking the Submit button?

A That the button is visible

B That the button is disabled

C That the button is hidden

D That the button has a red color

Key Result

Use Cypress Testing Library to find elements by their accessible roles and names. This makes tests more reliable and closer to how users interact with the page.