Value and attribute assertions in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ assertion

intermediate

Check input value with correct assertion

You want to verify that an input field with id #username contains the value admin. Which Cypress assertion correctly checks this?

Cypress

cy.get('#username').should(/* fill in assertion here */);

A "have.value", "admin"

B "contain.text", "admin"

C "have.attr", "value", "admin"

D "have.text", "admin"

💡 Hint

Input fields store their typed content in the value property, not as text content.

The have.value assertion checks the value property of input elements. Using contain.text or have.text checks visible text, which input fields do not have. have.attr checks attributes, but the value attribute may not reflect the current input value after user typing.

❓ assertion

intermediate

Verify element has specific attribute with value

How do you assert that a button with class .submit-btn has the attribute disabled set to true?

Cypress

cy.get('.submit-btn').should(/* fill in assertion here */);

A "have.attr", "disabled", "true"

B "have.attr", "disabled"

C "be.disabled"

D "have.prop", "disabled", true

💡 Hint

Attributes are strings, but some properties are booleans. The question asks about the attribute value.

The have.attr assertion with three arguments checks the attribute and its exact value. have.attr with two arguments only checks presence, not value. be.disabled checks the disabled property, not the attribute value. have.prop checks the property, which is boolean, not the attribute string.

❓ Predict Output

advanced

Output of attribute assertion on checkbox

Given this HTML:

<input type="checkbox" id="agree" checked>

What will be the result of this Cypress assertion?

cy.get('#agree').should('have.attr', 'checked', 'checked')

A Pass - the checkbox is checked, so assertion passes

B Pass - the checkbox has attribute 'checked' with value 'checked'

C Fail - attribute 'checked' has no value, so assertion fails

D Error - 'have.attr' does not accept three arguments

💡 Hint

Boolean attributes like checked may appear without a value in HTML.

The checked attribute in HTML can be present without a value. Cypress expects the exact attribute value when using three arguments. Since the attribute has no value, the assertion fails. To check if the checkbox is checked, use be.checked instead.

🔧 Debug

advanced

Debug failing value assertion on input

This test fails unexpectedly:

cy.get('#email').should('have.value', '[e-mail]');

The input field shows the correct email on the page. What is the most likely reason for failure?

A The input field is disabled, so value cannot be read

B The selector '#email' is incorrect and selects no element

C The assertion syntax is wrong; 'have.value' should be 'contain.value'

D The input's value attribute is set, but the property is empty because user typed after page load

💡 Hint

Remember the difference between HTML attributes and DOM properties.

The value attribute is the initial value in HTML. After user input, the DOM property value changes. Cypress's have.value checks the property, so if the attribute is set but the property is empty, the assertion fails. The selector is correct, and syntax is valid. Disabled inputs still have values.

🧠 Conceptual

expert

Best assertion to check if a link opens in a new tab

You want to test that a link with selector a.external-link opens in a new tab by having the attribute target="_blank". Which assertion is best to verify this?

A cy.get('a.external-link').should('contain.text', '_blank')

B cy.get('a.external-link').should('have.attr', 'target', '_blank')

C cy.get('a.external-link').should('have.text', 'target="_blank"')

D cy.get('a.external-link').should('have.prop', 'target', '_blank')

💡 Hint

Attributes are strings set in HTML tags. Properties are DOM object values.

The target attribute controls where the link opens. Using have.attr with the exact value _blank checks this correctly. have.prop may not reflect the attribute as expected. Checking text content does not verify attributes.