Hidden elements handling in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if an element is hidden using Cypress.

Cypress

cy.get('.menu').should('[1]')

Drag options to blanks, or click blank then click option'

Anot.be.visible

Bcontain.text

Cexist

Dbe.visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.visible' instead of 'not.be.visible' to check hidden elements.

The not.be.visible assertion checks that the element is hidden.

2fill in blank

medium

Complete the code to force click a hidden button in Cypress.

Cypress

cy.get('#submit-btn').click({ [1]: true })

Drag options to blanks, or click blank then click option'

Aforce

Bhidden

Cvisible

Dwait

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden: true' which is not a valid option for click.

The force: true option allows clicking even if the element is hidden.

3fill in blank

hard

Fix the error in the code to check that a hidden element does not exist.

Cypress

cy.get('.popup').should('[1]')

Drag options to blanks, or click blank then click option'

Aexist

Bnot.be.visible

Cnot.exist

Dbe.visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'not.be.visible' which only checks visibility but not presence.

The not.exist assertion checks that the element is not present in the DOM at all.

4fill in blank

hard

Fill both blanks to wait for a hidden element to appear and then verify it is visible.

Cypress

cy.get('.loading', { [1]: 10000 }).should('[2]')

Drag options to blanks, or click blank then click option'

Atimeout

Bbe.visible

Cnot.exist

Dforce

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force' as an option in get instead of timeout.

Checking 'not.exist' when expecting the element to appear.

Set a longer timeout to wait for the element, then assert it is be.visible.

5fill in blank

hard

Fill all three blanks to check a hidden element's text after forcing a click to reveal it.

Cypress

cy.get('#toggle-btn').click({ [1]: true });
cy.get('#secret-message').should('[2]').and('contain', [3])

Drag options to blanks, or click blank then click option'

Aforce

Bbe.visible

C'Hello World!'

Dtimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Not using force option to click hidden toggle button.

Checking visibility before clicking to reveal.

Using text without quotes causing syntax errors.

Force the click with force: true, then check the element is visible and contains the expected text.