Force option for hidden elements in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the force: true option do in Cypress commands?

It tells Cypress to perform the action even if the element is hidden or covered, bypassing the usual visibility checks.

beginner

Why might you need to use force: true in a test?

Sometimes elements are hidden or overlapped but still need to be interacted with, like hidden buttons or inputs. force: true allows the test to click or type on them anyway.

beginner

Show a simple Cypress command that clicks a hidden button using the force option.

cy.get('#hidden-button').click({ force: true });

intermediate

What is a risk of using force: true in tests?

It can hide real problems in the UI, like elements that should be visible but are not. Overusing it might make tests pass even if the app has bugs.

intermediate

Can force: true be used with commands other than click()? Give an example.

Yes, it can be used with commands like type(). Example: cy.get('input').type('hello', { force: true });

What does { force: true } do in Cypress?

A Waits for the element to become visible

B Skips the test step

C Clicks or types on elements even if they are hidden or disabled

D Only works on visible elements

The force: true option forces Cypress to interact with elements regardless of visibility or state.

Which Cypress command can use force: true?

A type()

B All of the above

C check()

D click()

Many Cypress commands like click(), type(), and check() support the force: true option.

What is a potential downside of using force: true too often?

A Tests might pass even if UI has bugs

B Tests run slower

C It disables assertions

D It causes syntax errors

Using force: true can hide UI problems because it ignores visibility issues.

If a button is hidden but you want to click it in Cypress, what should you do?

A Skip the test

B Use <code>click()</code> normally

C Use <code>wait()</code> until visible

D Use <code>click({ force: true })</code>

Using click({ force: true }) allows clicking hidden elements.

Does force: true make Cypress ignore if an element is disabled?

A Yes, it ignores disabled state

B No, it only ignores visibility

C No, it disables the test

D Yes, but only for inputs

force: true forces interaction even if the element is disabled or hidden.

Explain when and why you would use the force: true option in Cypress tests.

Think about elements that are not visible but still need testing.

Describe the risks of overusing force: true in your test suite.

Consider what happens if tests ignore real UI issues.