Why DOM interaction handles complex UIs in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element by its class using Cypress.

Cypress

cy.get('[1]')

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

A".button"

B"#button"

C"button"

D"[button]"

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' which selects by id instead of class.

Not using quotes around the selector.

In Cypress, to select an element by class, you use a dot before the class name inside quotes, like ".button".

2fill in blank

medium

Complete the code to click a button with id 'submit' using Cypress.

Cypress

cy.get('[1]').click()

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

A"#submit"

B".submit"

C"submit"

D"[submit]"

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.' which selects by class instead of id.

Forgetting to add .click() after get.

To select an element by id in Cypress, use #idName. Here, #submit selects the element with id 'submit'.

3fill in blank

hard

Fix the error in the code to wait for an element with data-cy attribute 'login' before clicking.

Cypress

cy.get('[1]').click()

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

A"data-cy=login"

B"[data-cy=login]"

C"#data-cy=login"

D".data-cy=login"

Attempts:

3 left

💡 Hint

Common Mistakes

Missing square brackets around attribute selector.

Using '.' or '#' which are for class or id selectors.

To select elements by attribute in Cypress, use square brackets with the attribute and value inside quotes, like [data-cy=login].

4fill in blank

hard

Fill both blanks to assert that a button with class 'submit' is visible.

Cypress

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

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

A".submit"

B"be.visible"

C"be.enabled"

D"#submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using id selector instead of class.

Using 'be.enabled' instead of 'be.visible'.

Use cy.get('.submit') to select by class. The assertion should('be.visible') checks if the element is visible.

5fill in blank

hard

Fill all three blanks to create a test that types 'hello' into an input with id 'name', then asserts it has the correct value.

Cypress

cy.get('[1]').[2]('hello').should('[3]', 'hello')

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

A"#name"

Btype

Chave.value

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'type' to enter text.

Using wrong assertion like 'be.visible' instead of 'have.value'.

Select the input by id with #name. Use type('hello') to enter text. Then assert with should('have.value', 'hello').