data-cy attributes for test stability in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element using the stable data-cy attribute.

Cypress

cy.get('[[1]="submit-button"]').click()

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

Adata-cy

Bclass

Cid

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using class or id selectors which may change frequently.

Using name attribute which is not reliable for testing.

Using data-cy attributes helps keep tests stable by avoiding selectors that change often.

2fill in blank

medium

Complete the code to assert that the element with data-cy='login-input' is visible.

Cypress

cy.get('[data-cy=[1]]').should('be.visible')

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

AloginInput

B"login-input"

C'login-input'

Dlogin-input

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the attribute value.

Using camelCase instead of the exact attribute value.

The attribute value must be a string inside quotes in the selector.

3fill in blank

hard

Fix the error in the code to correctly select the button with data-cy='submit'.

Cypress

cy.get('[data-cy=[1]]').click()

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

A"submit"

Bsubmit-button

C'submit'

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the attribute value causing syntax errors.

Using incorrect attribute values.

The attribute value must be wrapped in quotes inside the selector brackets.

4fill in blank

hard

Fill both blanks to create a stable selector and assert the button is enabled.

Cypress

cy.get('[[1]=[2]]').should('be.enabled')

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

Adata-cy

B"confirm-btn"

C'confirm-btn'

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of data-cy.

Not quoting the attribute value.

Use data-cy as the attribute and quote the value properly for a stable selector.

5fill in blank

hard

Fill all three blanks to select an input by data-cy, type text, and verify the value.

Cypress

cy.get('[[1]=[2]]').type([3]).should('have.value', 'hello')

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

Adata-cy

B"username-input"

C'hello'

D"hello"

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the attribute value in the selector.

Typing a string without quotes causing syntax errors.

Using single quotes inconsistently.

Use data-cy with quoted value to select, then type a string with quotes, and verify the input value.