Hidden elements handling in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean when an element is 'hidden' in web testing?

A hidden element is present in the page's HTML but not visible to the user, often due to CSS styles like display: none or visibility: hidden.

intermediate

How can Cypress interact with hidden elements?

By default, Cypress commands like click() only work on visible elements. To interact with hidden elements, you can use options like { force: true } to force the action.

intermediate

Why should you be careful when forcing actions on hidden elements?

Forcing actions on hidden elements can cause tests to pass even if the user cannot interact with those elements, which may hide real usability problems.

beginner

Which Cypress command checks if an element is visible or hidden?

You can use .should('be.visible') to check visibility or .should('not.be.visible') to check if an element is hidden.

beginner

What is a common real-life example of a hidden element in web apps?

A dropdown menu that only appears when you hover or click a button is hidden by default and becomes visible on user interaction.

In Cypress, how do you click a hidden button?

A Use <code>cy.get('button').click()</code> without options

B Use <code>cy.get('button').should('be.visible').click()</code>

C Use <code>cy.get('button').click({ force: true })</code>

D Hidden buttons cannot be clicked in Cypress

By default, Cypress only clicks visible elements. Using { force: true } forces the click even if the element is hidden.

Which CSS property commonly hides elements from view but keeps them in the DOM?

A visibility: hidden

B display: none

C opacity: 0

D position: absolute

visibility: hidden hides the element but it still takes up space in the layout.

What does cy.get('selector').should('not.be.visible') check?

A Element is hidden or not visible

B Element is visible

C Element is disabled

D Element is not in the DOM

This assertion checks that the element exists but is not visible to the user.

Why might forcing clicks on hidden elements be risky in tests?

A It slows down the test execution

B It causes Cypress to crash

C It is not supported by Cypress

D It can hide real user interface problems

Forcing clicks on hidden elements can make tests pass even if users cannot interact with those elements, hiding usability issues.

Which Cypress command helps you check if an element is visible before interacting?

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

B cy.get('selector').should('be.visible')

C cy.get('selector').invoke('hide')

D cy.get('selector').wait()

Using should('be.visible') asserts that the element is visible before performing actions.

Explain how Cypress handles hidden elements and how you can interact with them safely.

Think about visibility checks and forced actions.

Describe a real-life example of a hidden element on a website and how you would test it with Cypress.

Consider common UI patterns that hide elements.

Practice

1. Which Cypress command is used to check if an element is hidden on the page?

easy

A. .should('not.be.visible')

B. .click()

C. .type()

D. .should('be.enabled')

Solution

1. Step 1: Understand visibility assertion

   The command .should('not.be.visible') checks if an element is hidden or not visible on the page.

2. Step 2: Compare with other commands

   Commands like .click() and .type() perform actions, not visibility checks. .should('be.enabled') checks if an element is enabled, not visibility.

3. Final Answer:

   .should('not.be.visible') -> Option A

4. Quick Check:

   Check hidden = .should('not.be.visible') [OK]

Hint: Use .should('not.be.visible') to check hidden elements [OK]

Common Mistakes:

• Using .click() to check visibility
• Confusing enabled state with visibility
• Using .type() for visibility check

2. Which syntax correctly clicks a hidden button using Cypress?

easy

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

B. cy.get('button.hidden').click()

C. cy.get('button.hidden').click({ visible: true })

D. cy.get('button.hidden').click({ hidden: false })

Solution

1. Step 1: Identify force option usage

   To click a hidden element, Cypress requires the option { force: true } to override visibility checks.

2. Step 2: Evaluate other options

   Options like { visible: true } or { hidden: false } are invalid in Cypress click command. Clicking without force on hidden element fails.

3. Final Answer:

   cy.get('button.hidden').click({ force: true }) -> Option A

4. Quick Check:

   Click hidden = click with { force: true } [OK]

Hint: Use { force: true } to click hidden elements [OK]

Common Mistakes:

• Omitting { force: true } when clicking hidden elements
• Using invalid options like { visible: true }
• Trying to click without force on hidden elements

3. What will be the result of this Cypress code snippet?

cy.get('#secret').should('not.be.visible')
cy.get('#secret').click()

Assuming #secret is hidden.

medium

A. Test fails at visibility check

B. Test passes, element clicked successfully

C. Test passes but click is ignored silently

D. Test fails at click because element is hidden

Solution

1. Step 1: Check visibility assertion

   The first line asserts the element is hidden, so it passes as expected.

2. Step 2: Analyze click on hidden element

   Clicking a hidden element without { force: true } causes Cypress to fail the test because the element is not interactable.

3. Final Answer:

   Test fails at click because element is hidden -> Option D

4. Quick Check:

   Click hidden without force = fail [OK]

Hint: Clicking hidden without force causes failure [OK]

Common Mistakes:

• Assuming click on hidden element passes
• Ignoring need for { force: true }
• Thinking click is silently ignored

4. You wrote this Cypress test:

cy.get('.hidden-link').click()

But the test fails with an error about element not being visible. What is the best fix?

medium

A. Add .should('be.visible') before click

B. Change selector to a visible element

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

D. Remove the click command

Solution

1. Step 1: Understand error cause

   The error occurs because Cypress cannot click a hidden element without forcing the action.

2. Step 2: Apply correct fix

   Adding { force: true } to .click() forces the click on the hidden element, fixing the error.

3. Final Answer:

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

4. Quick Check:

   Force click fixes hidden element error [OK]

Hint: Use { force: true } to fix hidden element click errors [OK]

Common Mistakes:

• Trying to click without force on hidden elements
• Adding visibility assertion before click on hidden element
• Removing click instead of fixing it

5. You want to test a hidden checkbox with id #agree. Which Cypress code correctly checks it and verifies it is checked?

hard

A. cy.get('#agree').check().should('be.checked')

B. cy.get('#agree').check({ force: true }).should('be.checked')

C. cy.get('#agree').click().should('be.checked')

D. cy.get('#agree').click({ force: true }).should('not.be.checked')

Solution

1. Step 1: Identify hidden element interaction

   Since the checkbox is hidden, .check() requires { force: true } to interact with it.

2. Step 2: Verify checked state

   After forcing the check, .should('be.checked') confirms the checkbox is checked.

3. Final Answer:

   cy.get('#agree').check({ force: true }).should('be.checked') -> Option B

4. Quick Check:

   Check hidden checkbox with force and assert checked [OK]

Hint: Use .check({ force: true }) for hidden checkboxes [OK]

Common Mistakes:

• Using .check() without force on hidden checkbox
• Using .click() instead of .check() for checkbox
• Asserting not checked after clicking