Negative assertions (not) in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check that the element does NOT contain the text 'Error'.

Cypress

cy.get('.message').should('not.[1]', 'Error')

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

Aexist

Bhave.text

Ccontain

Dbe.visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.text' instead of 'contain' which checks exact text, not partial.

Forgetting to add 'not.' before the assertion.

The contain assertion checks if the element contains the given text. Using not.contain asserts the element does NOT contain that text.

2fill in blank

medium

Complete the code to assert that the button is NOT disabled.

Cypress

cy.get('button.submit').should('not.[1]')

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

Abe.enabled

Bvisible

Cexist

Dbe.disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.enabled' inside 'not.' which would check the opposite of what is intended.

Omitting 'not.' and checking only 'be.disabled'.

The assertion be.disabled checks if the button is disabled. Using not.be.disabled asserts it is not disabled.

3fill in blank

hard

Fix the error in the code to assert the input field does NOT have the value 'admin'.

Cypress

cy.get('#username').should('not.[1]', 'admin')

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

Ahave.value

Bbe

Chave

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.have.value' which is invalid syntax.

Omitting 'not.' and checking only 'have.value'.

To negate an assertion in Cypress, use 'not.' before the assertion name. So not.have.value checks the input does NOT have the given value.

4fill in blank

hard

Fill both blanks to assert the element with class 'alert' is NOT visible and does NOT exist in the DOM.

Cypress

cy.get('.alert').should('[1].be.visible').and('[2].exist')

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

Anot

Bbe

Dhave

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be' instead of 'not' to negate assertions.

Mixing 'have' with 'exist' which is incorrect.

Both assertions are negated using 'not.' to check the element is not visible and does not exist.

5fill in blank

hard

Fill all three blanks to assert that the checkbox with id 'agree' is NOT checked, NOT disabled, and NOT visible.

Cypress

cy.get('#agree').should('[1].be.checked').and('[2].be.disabled').and('[3].be.visible')

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

Anot

Dbe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be' instead of 'not' to negate assertions.

Mixing 'not' and 'be' incorrectly in the chain.

Each assertion is negated with 'not.' to check the checkbox is not checked, not disabled, and not visible.

Practice

1. What does the Cypress command cy.get('button').should('not.exist') check for?

easy

A. It checks that the button is disabled.

B. It checks that the button is visible on the page.

C. It checks that the button is not present in the page DOM.

D. It checks that the button is clickable.

Solution

1. Step 1: Understand the command should('not.exist')

   This assertion checks that the selected element does not exist in the DOM at all.

2. Step 2: Apply to the element button

   The command cy.get('button').should('not.exist') verifies that no button element is present in the page.

3. Final Answer:

   It checks that the button is not present in the page DOM. -> Option C

4. Quick Check:

   should('not.exist') = element absent [OK]

Hint: Use 'not.exist' to check element absence in DOM [OK]

Common Mistakes:

• Confusing 'not.exist' with 'not.be.visible'
• Thinking it checks if element is disabled
• Assuming it checks element visibility

2. Which of the following is the correct Cypress syntax to assert that an element with id #modal is hidden?

easy

A. cy.get('#modal').should('not.be.visible')

B. cy.get('#modal').should('not.visible')

C. cy.get('#modal').should('be.hidden')

D. cy.get('#modal').should('not.exist')

Solution

1. Step 1: Identify correct negative visibility assertion

   In Cypress, to check if an element is hidden but still in the DOM, use should('not.be.visible').

2. Step 2: Check each option's syntax

   cy.get('#modal').should('not.exist') checks for absence, not hidden. cy.get('#modal').should('be.hidden') uses invalid assertion be.hidden. cy.get('#modal').should('not.visible') has incorrect syntax not.visible.

3. Final Answer:

   cy.get('#modal').should('not.be.visible') -> Option A

4. Quick Check:

   Hidden element = should('not.be.visible') [OK]

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

Common Mistakes:

• Using 'not.exist' to check hidden instead of absent
• Writing incorrect assertion names like 'be.hidden'
• Missing 'be' in visibility assertion

3. Consider this Cypress code snippet:

cy.get('.alert').should('not.exist')
cy.get('.alert').should('not.be.visible')

What will happen if the element .alert is present but hidden?

medium

A. The first assertion fails, the second passes.

B. The first assertion passes, the second fails.

C. Both assertions pass.

D. Both assertions fail.

Solution

1. Step 1: Analyze should('not.exist') when element is present but hidden

   This assertion fails because the element exists in the DOM, even if hidden.

2. Step 2: Analyze should('not.be.visible') when element is hidden

   This assertion passes because the element is present but not visible.

3. Final Answer:

   The first assertion fails, the second passes. -> Option A

4. Quick Check:

   Existence vs visibility differ: exist fails, visibility passes [OK]

Hint: Existence and visibility are different checks [OK]

Common Mistakes:

• Assuming 'not.exist' passes if element is hidden
• Confusing visibility with existence
• Thinking both assertions behave the same

4. You wrote this Cypress test:

cy.get('.popup').should('not.exist')

But the test fails even though the popup is hidden. What is the likely problem?

medium

A. The selector '.popup' is incorrect.

B. The popup element exists but is hidden, so 'not.exist' fails.

C. The test should use 'should('not.be.visible')' instead.

D. Cypress cannot check hidden elements.

Solution

1. Step 1: Understand difference between 'not.exist' and hidden elements

   'not.exist' fails if element is present in DOM, even if hidden.

2. Step 2: Apply to the popup element

   The popup is hidden but still in DOM, so assertion fails because element exists.

3. Final Answer:

   The popup element exists but is hidden, so 'not.exist' fails. -> Option B

4. Quick Check:

   'not.exist' means element absent, hidden still exists [OK]

Hint: Hidden elements still exist; use 'not.be.visible' for hidden check [OK]

Common Mistakes:

• Using 'not.exist' to check hidden elements
• Assuming hidden means not in DOM
• Ignoring difference between visibility and existence

5. You want to verify that a div with class .notification is neither present nor visible on the page. Which Cypress code correctly checks both conditions?

hard

A. cy.get('.notification').should('not.exist').and('not.be.visible')

B. cy.get('.notification').should('not.exist'); cy.get('.notification').should('not.be.visible')

C. cy.get('.notification').should('not.be.visible')

D. cy.get('.notification').should('not.exist')

Solution

1. Step 1: Understand that if element does not exist, it cannot be visible

   If the element does not exist in the DOM, it is automatically not visible.

2. Step 2: Check which assertion covers both absence and visibility

   Using should('not.exist') alone is enough to confirm element is absent and thus not visible.

3. Final Answer:

   cy.get('.notification').should('not.exist') -> Option D

4. Quick Check:

   Not existing means not visible too [OK]

Hint: Check 'not.exist' alone to confirm absence and invisibility [OK]

Common Mistakes:

• Chaining 'not.exist' with 'not.be.visible' unnecessarily
• Running two separate assertions causing flaky tests
• Using only 'not.be.visible' when element might exist