cy.get() with CSS selectors in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element with the class button using cy.get().

Cypress

cy.get('[1]')

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

A.button

B#button

Cbutton

D*button

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' which selects by id, not class.

Using the tag name without dot for class selection.

The cy.get() command uses CSS selectors. To select by class, prefix the class name with a dot .. So .button selects elements with class button.

2fill in blank

medium

Complete the code to select an element with the id submit using cy.get().

Cypress

cy.get('[1]')

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

A*submit

B.submit

Csubmit

D#submit

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.' which selects by class, not id.

Using the tag name without prefix.

To select an element by its id in CSS selectors, prefix the id with a hash #. So #submit selects the element with id submit.

3fill in blank

hard

Fix the error in the code to select all input elements inside a form with class login.

Cypress

cy.get('form[1] input')

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

A#login

B.login

C login

D>login

Attempts:

3 left

💡 Hint

Common Mistakes

Using space without dot, which looks for a descendant named 'login'.

Using '#' which selects by id, not class.

To select elements inside a form with class login, use form.login input. The dot . indicates the class selector.

4fill in blank

hard

Fill both blanks to select all li elements that are direct children of a ul with class menu.

Cypress

cy.get('ul[1] [2]li')

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

A.menu

B>

D#menu

Attempts:

3 left

💡 Hint

Common Mistakes

Using space instead of > selects all descendants, not just direct children.

Using '#' instead of '.' for class.

To select direct children, use the child combinator >. To select ul with class menu, use ul.menu. So the full selector is ul.menu > li.

5fill in blank

hard

Fill both blanks to select all button elements with class primary inside a div with id container.

Cypress

cy.get('div[1] button[2]')

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

A#container

B.primary

D>primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' instead of space selects only direct children.

Using '.' instead of '#' for id selector.

The selector div#container button.primary selects button elements with class primary inside a div with id container. Spaces separate elements in the hierarchy.