Why assertions verify expected behavior in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the page contains the text 'Welcome'.

Cypress

cy.contains([1])

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

A'Welcome'

BWelcome

C"welcome"

Dwelcome

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the text string.

Using incorrect case in the string.

The cy.contains() command expects a string argument to find text on the page. Using quotes around 'Welcome' ensures it is treated as a string.

2fill in blank

medium

Complete the assertion to verify the button is visible.

Cypress

cy.get('button').should([1], true)

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

A'visible'

B'exist'

C'be.visible'

D'show'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'exist' instead of 'be.visible' which only checks presence, not visibility.

Omitting quotes around the assertion string.

The correct assertion to check visibility in Cypress is should('be.visible'). This confirms the button is shown on the page.

3fill in blank

hard

Fix the error in the assertion to check the input has value 'test'.

Cypress

cy.get('input').should('have.value', [1])

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

A`test`

Btest

C"test"

D'test'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the string value.

Using backticks which are less common here.

The value to check must be a string, so it needs quotes. Using 'test' is correct syntax in Cypress assertions.

4fill in blank

hard

Fill both blanks to assert the checkbox is checked and enabled.

Cypress

cy.get('input[type=checkbox]').should([1]).and([2])

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

A'be.checked'

B'be.enabled'

C'checked'

D'enabled'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'checked' without 'be.' prefix.

Using 'enabled' without 'be.' prefix.

Use should('be.checked') to verify the checkbox is checked, and and('be.enabled') to confirm it is enabled for interaction.

5fill in blank

hard

Fill all three blanks to assert the list has 5 items, the first item contains 'Item 1', and the list is visible.

Cypress

cy.get('ul > li').should([1], 5).first().should([2], [3]).parent().should('be.visible')

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

A'have.length'

B'contain.text'

C'Item 1'

D'have.text'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.text' instead of 'contain.text' which requires exact match.

Not chaining assertions properly.

should('have.length', 5) checks the list has 5 items. should('contain.text', 'Item 1') verifies the first item includes the text 'Item 1'. Finally, should('be.visible') confirms the list is shown.

Practice

1. Why do we use assertions in Cypress tests?

easy

A. To change the app's data

B. To slow down the test execution

C. To skip parts of the test

D. To check if the app behaves as expected

Solution

1. Step 1: Understand the purpose of assertions

   Assertions are used to verify that the application behaves as expected during tests.

2. Step 2: Identify the correct purpose in options

   Only To check if the app behaves as expected states that assertions check expected behavior, which is correct.

3. Final Answer:

   To check if the app behaves as expected -> Option D

4. Quick Check:

   Assertions verify expected behavior = C [OK]

Hint: Assertions confirm expected results, not change behavior [OK]

Common Mistakes:

• Thinking assertions change app data
• Believing assertions slow tests down
• Confusing assertions with test flow control

2. Which of the following is the correct syntax to assert that a button with id submit is visible in Cypress?

easy

A. cy.get('submit').should('visible')

B. cy.find('#submit').assert('visible')

C. cy.get('#submit').should('be.visible')

D. cy.get('#submit').check('visible')

Solution

1. Step 1: Recall correct Cypress assertion syntax

   In Cypress, cy.get(selector).should('be.visible') checks visibility.

2. Step 2: Compare options with correct syntax

   cy.get('#submit').should('be.visible') matches the correct syntax exactly; others have wrong methods or missing quotes.

3. Final Answer:

   cy.get('#submit').should('be.visible') -> Option C

4. Quick Check:

   Correct assertion syntax = B [OK]

Hint: Use cy.get() with .should('be.visible') for visibility checks [OK]

Common Mistakes:

• Missing '#' for id selector
• Using wrong assertion method like check or assert
• Omitting quotes around assertion string

3. What will happen when this Cypress code runs?

cy.get('.message').should('contain.text', 'Success')

medium

A. Test passes if element with class 'message' contains text 'Success'

B. Test fails if element with class 'message' contains text 'Success'

C. Test passes regardless of element text

D. Test throws a syntax error

Solution

1. Step 1: Analyze the assertion syntax

   The code uses .should('contain.text', 'Success'), which is a valid Cypress assertion chainer.

2. Step 2: Determine test outcome

   The test passes if the element with class 'message' contains the text 'Success'; otherwise, it fails.

3. Final Answer:

   Test passes if element with class 'message' contains text 'Success' -> Option A

4. Quick Check:

   Valid 'contain.text' assertion = A [OK]

Hint: 'contain.text' is valid in Cypress for text content check [OK]

Common Mistakes:

• Thinking 'contain.text' is invalid
• Predicting pass/fail based on text presence
• Confusing with other assertion methods

4. Identify the error in this Cypress assertion:

cy.get('.title').should('have.text', Success)

medium

A. Missing quotes around 'Success' string

B. Wrong selector syntax

C. Incorrect assertion method 'have.text'

D. No error, code is correct

Solution

1. Step 1: Check the assertion syntax

   The text 'Success' must be a string, so it needs quotes around it.

2. Step 2: Identify the error in the code

   The code misses quotes around Success, causing a syntax error or undefined variable.

3. Final Answer:

   Missing quotes around 'Success' string -> Option A

4. Quick Check:

   String literals need quotes = A [OK]

Hint: Always put quotes around text in assertions [OK]

Common Mistakes:

• Forgetting quotes around string values
• Thinking selector syntax is wrong
• Misunderstanding assertion method names

5. You want to verify a checkbox with id agree is checked after clicking it. Which assertion correctly verifies this expected behavior?

hard

A. cy.get('#agree').click().should('have.value', 'checked')

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

C. cy.get('#agree').click().should('contain.text', 'checked')

D. cy.get('#agree').click().should('be.visible')

Solution

1. Step 1: Understand the goal of the assertion

   We want to confirm the checkbox is checked after clicking it.

2. Step 2: Identify the correct assertion method

   The correct assertion is should('be.checked') which verifies checkbox state.

3. Step 3: Evaluate options

   cy.get('#agree').click().should('be.checked') uses be.checked, which is correct. The other options incorrectly check value, visibility, or text content.

4. Final Answer:

   cy.get('#agree').click().should('be.checked') -> Option B

5. Quick Check:

   should('be.checked') = D [OK]

Hint: Use .should('be.checked') to confirm checkbox is selected [OK]

Common Mistakes:

• Checking visibility instead of checked state
• Looking for text 'checked' inside checkbox
• Using value instead of checked property