Force option for hidden elements in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result when clicking a hidden button without force option?

Consider this Cypress test code snippet:

cy.get('#hidden-btn').click()

The button with id hidden-btn is hidden via CSS (display: none;).

What will be the outcome of this test step?

Cypress

cy.get('#hidden-btn').click()

A The test fails with an error: element is not visible

B The test skips the click and continues without error

C The test times out waiting for the button to become visible

D The test passes and clicks the hidden button

💡 Hint

Think about Cypress default behavior when interacting with hidden elements.

By default, Cypress does not allow clicking on elements that are not visible. Since the button is hidden, the click command fails with a visibility error.

❓ assertion

intermediate

Which assertion correctly verifies a hidden element is clicked using force option?

You want to click a hidden button and then check if a message appears.

Which assertion correctly verifies the message after clicking the hidden button with force: true?

Cypress

cy.get('#hidden-btn').click({ force: true })
// Which assertion below is correct?

A cy.get('#message').should('have.text', '')

B cy.get('#message').should('be.visible').and('contain', 'Clicked!')

C cy.get('#message').should('be.hidden').and('contain', 'Clicked!')

D cy.get('#message').should('not.exist')

💡 Hint

After clicking, the message should appear and be visible.

Using force: true clicks the hidden button. The message should then be visible and contain the expected text.

🔧 Debug

advanced

Why does this Cypress test fail despite using force option?

Review the test code:

cy.get('#hidden-btn').click({ force: true })
cy.get('#result').should('contain', 'Success')

The button is hidden but the test fails at the assertion step.

What is the most likely reason?

Cypress

cy.get('#hidden-btn').click({ force: true })
cy.get('#result').should('contain', 'Success')

A The button is disabled, so force click does not trigger the event

B The force option disables the click event entirely

C The selector '#result' is incorrect and does not match any element

D The click event is not wired correctly, so no result update happens

💡 Hint

Force click bypasses visibility but does not fix event wiring.

Force clicking a hidden button triggers the click event, but if the event handler is missing or broken, the expected result won't appear, causing the assertion to fail.

❓ framework

advanced

How does Cypress handle the force option internally when clicking hidden elements?

Which statement best describes what Cypress does when { force: true } is passed to the click() command on a hidden element?

A Cypress throws an error but ignores it and continues the test

B Cypress makes the element visible temporarily, clicks it, then hides it again

C Cypress bypasses visibility checks and triggers the native click event directly on the element

D Cypress scrolls the element into view and waits for it to become visible before clicking

💡 Hint

Think about how force click differs from normal click behavior.

When force: true is used, Cypress skips the visibility check and triggers the native click event on the element regardless of its visibility or position.

🧠 Conceptual

expert

What is a potential risk of using force option on hidden elements in tests?

Using { force: true } to click hidden elements can cause which of the following issues in your test suite?

A Tests may pass even though the user cannot interact with the element in real usage

B Tests will always fail because force option disables event handlers

C Tests become slower because force option waits for animations

D Tests will skip all assertions after a forced click

💡 Hint

Consider the difference between test simulation and real user experience.

Using force click can hide UI problems by clicking elements users cannot see or interact with, leading to false positives in tests.