Best practices for selectors in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element by its data attribute.

Cypress

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

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

Adata-cy

Bclass

Cid

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using id or class selectors which can break tests if UI changes.

Using generic attributes like name that are not stable.

Using data-cy attributes is a best practice for selectors in Cypress because it avoids brittle selectors tied to styling or layout.

2fill in blank

medium

Complete the code to select a button with an accessible role.

Cypress

cy.get('[1][name="login"]')

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

Abutton

Binput

Cspan

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting non-button elements that do not have button behavior.

Using generic selectors that are not specific to the element's role.

Using semantic HTML elements like button helps with accessibility and makes selectors clearer.

3fill in blank

hard

Fix the error in the selector to avoid using brittle class names.

Cypress

cy.get('.[1]-container')

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

Afooter

Bbtn-primary

Cheader

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using styling classes that change frequently.

Selecting elements that are not unique or meaningful.

Using semantic container names like main is more stable than styling classes like btn-primary.

4fill in blank

hard

Fill both blanks to create a selector that finds a list item with a specific test id and text content.

Cypress

cy.get('[[1]="item-3"]').contains('[2]')

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

Adata-test

BSubmit

CCancel

Ddata-cy

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic attributes like data-test if the project standard is data-cy.

Selecting wrong text that does not match the element.

Using data-cy as a test attribute and contains with the visible text Submit ensures a robust selector.

5fill in blank

hard

Fill all three blanks to create a selector that finds an input by its test id and checks that it has a type attribute.

Cypress

cy.get('[[1]="email-input"]').should('[2]', '[3]')

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

Adata-cy

Bhave.attr

Cvisible

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect attribute names or assertion methods.

Mixing up the order of assertion arguments.

This selector uses data-cy to find the input, then asserts it has the attribute type, ensuring the input is correct.