Force option for hidden elements in Cypress - Framework Patterns

Framework Mode - Force option for hidden elements

Folder Structure

    cypress/
    ├── e2e/
    │   ├── login.cy.js          # Test files using force option
    │   └── hiddenElements.cy.js # Tests interacting with hidden elements
    ├── fixtures/                # Test data files (JSON)
    ├── support/
    │   ├── commands.js          # Custom commands (e.g., force click wrappers)
    │   └── e2e.js               # Global support and configuration
    └── cypress.config.js        # Cypress configuration file
    

Test Framework Layers

• Test Layer (e2e/): Contains test scripts that use { force: true } option to interact with hidden or covered elements.
• Support Layer (support/commands.js): Defines reusable custom commands that wrap Cypress commands with { force: true } for hidden elements.
• Fixtures Layer (fixtures/): Holds test data to simulate different UI states where elements might be hidden.
• Configuration Layer (cypress.config.js): Manages environment settings and global timeouts to support tests involving hidden elements.

Configuration Patterns

Use cypress.config.js to set base URL, default command timeout, and environment variables.

    export default defineConfig({
      e2e: {
        baseUrl: 'https://example.com',
        defaultCommandTimeout: 8000,
        env: {
          username: 'testuser',
          password: 'password123'
        }
      }
    })
    

Pass { force: true } option directly in test commands when interacting with hidden elements, e.g., cy.get('#hidden-btn').click({ force: true }).

Test Reporting and CI/CD Integration

Integrate Cypress with CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests automatically.

• Use cypress-mochawesome-reporter for detailed HTML reports showing which tests used { force: true }.
• Configure screenshots and video recording on test failures to help debug hidden element interactions.
• Example GitHub Actions snippet to run Cypress tests and upload reports:

    name: Cypress Tests
    on: [push, pull_request]
    jobs:
      test:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - uses: cypress-io/github-action@v5
            with:
              start: npm start
              wait-on: 'http://localhost:3000'
              wait-on-timeout: 60
          - name: Upload Test Report
            uses: actions/upload-artifact@v3
            with:
              name: cypress-report
              path: cypress/reports
    

Best Practices

1. Use { force: true } sparingly: Only when necessary to interact with hidden or covered elements to avoid masking real UI issues.
2. Prefer explicit waits and visibility checks: Try to wait for elements to become visible before forcing actions.
3. Wrap force clicks in custom commands: Create reusable commands in support/commands.js to keep tests clean and consistent.
4. Document why force is used: Add comments in tests explaining why { force: true } is needed for maintainability.
5. Use screenshots and videos: Capture UI state when forcing actions to help debug hidden element interactions.

Self Check

Where in this Cypress framework structure would you add a new custom command to click hidden elements using the force option?

Key Result

Use the force option in Cypress tests to interact with hidden elements, organized with custom commands and clear folder structure.

Practice

1. What does the force: true option do in Cypress when interacting with elements?

easy

A. Allows Cypress to interact with elements even if they are hidden or not visible.

B. Prevents Cypress from clicking on disabled buttons.

C. Automatically waits for elements to become visible before interacting.

D. Skips the test if the element is not visible.

Solution

1. Step 1: Understand the purpose of force: true

   This option tells Cypress to ignore visibility checks and interact with elements even if they are hidden.

2. Step 2: Compare with default behavior

   By default, Cypress only interacts with visible elements. Using force: true overrides this.

3. Final Answer:

   Allows Cypress to interact with elements even if they are hidden or not visible. -> Option A

4. Quick Check:

   force: true = interact hidden elements [OK]

Hint: Force option lets you click hidden elements safely [OK]

Common Mistakes:

• Thinking force waits for visibility
• Assuming force disables tests on hidden elements
• Confusing force with automatic retries

2. Which of the following is the correct syntax to click a hidden button with id submitBtn using Cypress?

easy

A. cy.get('#submitBtn').click(force=true);

B. cy.get('#submitBtn').click(force:true);

C. cy.get('#submitBtn').click({ force = true });

D. cy.get('#submitBtn').click({ force: true });

Solution

1. Step 1: Recall correct object syntax for options

   Cypress expects options as an object inside curly braces with key-value pairs, e.g., { force: true }.

2. Step 2: Identify correct syntax among options

   cy.get('#submitBtn').click({ force: true }); uses the correct object syntax with curly braces and colon separator.

3. Final Answer:

   cy.get('#submitBtn').click({ force: true }); -> Option D

4. Quick Check:

   Options object uses curly braces and colon [OK]

Hint: Use curly braces and colon for options: { force: true } [OK]

Common Mistakes:

• Using parentheses instead of braces for options
• Using equal sign instead of colon
• Missing braces around options

3. Consider this Cypress code snippet:

cy.get('.hidden-checkbox').check({ force: true });
cy.get('.hidden-checkbox').should('be.checked');

What will be the result of this test?

medium

A. The test will fail because the checkbox is hidden.

B. The test will pass because force allows checking hidden checkboxes.

C. The test will throw a syntax error.

D. The test will skip the check assertion.

Solution

1. Step 1: Understand the effect of force: true on hidden checkboxes

   Using force: true allows Cypress to check the checkbox even if it is hidden.

2. Step 2: Verify the assertion outcome

   The next line asserts the checkbox is checked, which will be true because the previous command succeeded.

3. Final Answer:

   The test will pass because force allows checking hidden checkboxes. -> Option B

4. Quick Check:

   force: true lets hidden checkbox be checked [OK]

Hint: Force lets you check hidden checkboxes successfully [OK]

Common Mistakes:

• Assuming hidden elements cannot be checked
• Confusing force with visibility wait
• Expecting syntax errors from correct code

4. You wrote this Cypress test:

cy.get('#hiddenBtn').click();

It fails because the button is hidden. How can you fix it without changing the HTML?

medium

A. Use cy.get('#hiddenBtn').click({ wait: true });

B. Add .should('be.visible') before clicking.

C. Add { force: true } to the click command.

D. Change the selector to a visible element.

Solution

1. Step 1: Identify why the test fails

   The button is hidden, so Cypress refuses to click it by default.

2. Step 2: Apply the force option to override visibility check

   Adding { force: true } to the click command forces Cypress to click the hidden button.

3. Final Answer:

   Add { force: true } to the click command. -> Option C

4. Quick Check:

   Force option overrides hidden element click failure [OK]

Hint: Use force: true to click hidden elements without HTML changes [OK]

Common Mistakes:

• Adding visibility assertion before click (won't fix hidden)
• Using invalid option like wait: true
• Changing selectors instead of fixing interaction

5. You want to test a hidden dropdown menu that appears only on hover. The dropdown is hidden by default. Which Cypress command correctly selects an option inside it?

hard

A. cy.get('#dropdown').select('Option 1', { force: true });

B. cy.get('#dropdown').select('Option 1');

C. cy.get('#dropdown').invoke('show').select('Option 1');

D. cy.get('#dropdown').click().select('Option 1');

Solution

1. Step 1: Understand dropdown visibility and interaction

   The dropdown is hidden by default, so normal select won't work without visibility.

2. Step 2: Use force option to select hidden option

   Using { force: true } allows Cypress to select the option even if the dropdown is hidden.

3. Step 3: Evaluate other options

   cy.get('#dropdown').select('Option 1'); fails due to hidden dropdown. cy.get('#dropdown').invoke('show').select('Option 1'); tries to show dropdown via invoke but may not trigger UI properly. cy.get('#dropdown').click().select('Option 1'); clicks dropdown but does not guarantee visibility or selection.

4. Final Answer:

   cy.get('#dropdown').select('Option 1', { force: true }); -> Option A

5. Quick Check:

   Select hidden dropdown option using force: true [OK]

Hint: Use select with force: true for hidden dropdowns [OK]

Common Mistakes:

• Trying to select without force on hidden dropdown
• Using invoke('show') without proper UI event
• Clicking dropdown without ensuring visibility