Hidden elements handling in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test when clicking a hidden button?

Consider the following Cypress test code snippet:

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

The button with id hidden-btn is styled with display: none;. What will happen when this test runs?

Cypress

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

A The test skips the click and passes

B The test passes and clicks the hidden button successfully

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

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

💡 Hint

Think about how Cypress handles clicks on elements that are not visible.

Cypress does not allow clicking on elements that are hidden (e.g., with display: none;). It throws an error indicating the element is not visible.

❓ assertion

intermediate

Which assertion correctly verifies a hidden element is not visible?

You want to check that an element with class .secret-message is hidden on the page. Which Cypress assertion is correct?

A cy.get('.secret-message').should('not.be.visible')

B cy.get('.secret-message').should('be.hidden')

C cy.get('.secret-message').should('be.invisible')

D cy.get('.secret-message').should('not.exist')

💡 Hint

Check Cypress documentation for visibility assertions.

The correct assertion to check if an element is hidden is should('not.be.visible'). The others are invalid or do not exist in Cypress.

🔧 Debug

advanced

Why does this Cypress test fail when trying to type into a hidden input?

Given this test code:

cy.get('#hidden-input').type('hello')

The input with id hidden-input has visibility: hidden;. The test fails. Why?

Cypress

cy.get('#hidden-input').type('hello')

A The input is disabled, so typing is blocked

B Cypress cannot type into elements that are not visible

C The selector is incorrect and does not find the input

D The input is readonly, preventing typing

💡 Hint

Consider Cypress's rules about interacting with hidden elements.

Cypress requires elements to be visible to interact with them. An element with visibility: hidden; is considered hidden, so typing fails.

❓ framework

advanced

How to force Cypress to click a hidden element?

You want to click a button that is hidden with display: none;. Which Cypress command option allows clicking it anyway?

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

B cy.get('#btn').click({ allowHidden: true })

C cy.get('#btn').click({ hidden: true })

D cy.get('#btn').click({ visible: false })

💡 Hint

Look for the Cypress click option that overrides visibility checks.

The { force: true } option forces Cypress to click even if the element is hidden.

🧠 Conceptual

expert

What is the best practice to test hidden elements in Cypress?

Which approach is best to test the presence and state of hidden elements in Cypress?

A Use <code>should('not.exist')</code> to confirm element is hidden

B Use <code>invoke('show')</code> to make element visible before testing

C Use <code>should('be.visible')</code> and then check CSS <code>display</code> property manually

D Use <code>should('exist')</code> to check presence and <code>should('not.be.visible')</code> to confirm hidden state

💡 Hint

Think about how to verify an element is present but hidden.

The best practice is to check the element exists in the DOM with should('exist') and then verify it is hidden with should('not.be.visible'). This confirms presence and hidden state without changing the page.

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