Force option for hidden elements in Cypress - Test Execution Trace

Test Overview

This test checks clicking a hidden button using Cypress's force: true option. It verifies that the click works even if the button is not visible.

Test Code - Cypress

Cypress

describe('Force click on hidden element', () => {
  it('Clicks hidden button using force option', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    // The button is hidden by default
    cy.get('#hidden-button').click({ force: true })
    // Verify the click triggered a visible change
    cy.get('#hidden-button-clicked').should('be.visible')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, browser ready	-	PASS
2	Browser opens and navigates to https://example.cypress.io/commands/actions	Page loaded with elements including a hidden button with id 'hidden-button'	-	PASS
3	Find element with id 'hidden-button'	Hidden button element located in DOM but not visible	Element exists in DOM	PASS
4	Click the hidden button using { force: true } option	Button is clicked despite being hidden	Click event triggered on hidden button	PASS
5	Check that element with id 'hidden-button-clicked' is visible	Element '#hidden-button-clicked' is visible on page indicating click success	Element '#hidden-button-clicked' is visible	PASS

Failure Scenario

Failing Condition: Click fails because force option is not used on hidden element

Execution Trace Quiz - 3 Questions

Why is the { force: true } option used in cy.click()?

A To scroll the element into view before clicking

B To click an element even if it is hidden or covered

C To wait for the element to become visible before clicking

D To disable clicking on the element

Key Result

Use the { force: true } option in Cypress to interact with elements that are hidden or covered, ensuring tests can simulate user actions even when elements are not visible.