should() with chainers in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the element is visible using should().

Cypress

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

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

A'have.class'

B'exist'

C'contain.text'

D'be.visible'

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'contain.text' requires additional arguments.

The 'should' command with 'be.visible' checks if the element is visible on the page.

2fill in blank

medium

Complete the code to assert the button has the class 'active' using should() with a chainer.

Cypress

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

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

A'have.class'

B'be.enabled'

C'have.text'

D'contain.value'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.text' checks text content, not classes.

Using 'be.enabled' checks if element is enabled, not class.

The 'have.class' chainer checks if the element has the specified CSS class.

3fill in blank

hard

Fix the error in the code to check if the input contains the value 'test' using should() with chainers.

Cypress

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

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

A'be.checked'

B'have.value'

C'have.attr'

D'contain.text'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contain.text' does not check input value.

Using 'have.attr' requires specifying attribute name.

The correct chainer to check input value is 'have.value'.

4fill in blank

hard

Fill both blanks to check if a checkbox is checked and has the attribute 'type' equal to 'checkbox'.

Cypress

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

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

A'be.checked'

B'have.attr'

C'have.value'

D'be.visible'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.value' instead of 'have.attr' for attribute check.

Using 'be.visible' does not check checked state.

First, 'be.checked' asserts the checkbox is checked. Then, 'have.attr' checks the attribute 'type' equals 'checkbox'.

5fill in blank

hard

Fill all three blanks to assert that a link contains the text 'Home' and has the attribute 'href' equal to '/'.

Cypress

cy.get('a').should([1], 'Home').and([2], 'href', [3])

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

A'contain.text'

B'have.attr'

C'/'

D'be.visible'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.visible' as first chainer instead of 'contain.text'.

Using incorrect attribute value for href.

The first assertion checks the link text with 'contain.text'. The second checks the 'href' attribute with 'have.attr' and the expected value '/'.