Force option for hidden elements in Cypress

Introduction

Sometimes elements are hidden but you still want to test them. The force option lets you interact with these hidden elements.

Click a button that is hidden but should still work.

Type text into a hidden input field for testing.

Check a hidden checkbox or radio button.

Submit a form with hidden elements.

Test UI behavior when elements are temporarily invisible.

Syntax

Cypress

cy.get('selector').click({ force: true })

The force: true option tells Cypress to ignore if the element is hidden.

Use it carefully because it bypasses normal user behavior checks.

Examples

This clicks a button that is hidden on the page.

Cypress

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

This checks a hidden checkbox.

Cypress

cy.get('input[type="checkbox"]').check({ force: true })

This types text into a hidden input field.

Cypress

cy.get('.hidden-input').type('Hello', { force: true })

Sample Program

This test visits a page, clicks a hidden button using force: true, and checks if the button got a class 'clicked' to confirm the click worked.

Cypress

describe('Force option test', () => {
  it('Clicks a hidden button using force', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    // The button is hidden by CSS
    cy.get('#hidden-button').click({ force: true })
    cy.get('#hidden-button').should('have.class', 'clicked')
  })
})

Important Notes

Using force: true skips checks that ensure the element is visible and interactable.

Only use force: true when you are sure the hidden element should be interacted with.

Overusing force can hide real problems in your UI.

Summary

The force option lets you interact with hidden elements.

Use it to test elements not visible but still important.

Be careful to not mask UI issues by forcing actions.