Why element selection drives interaction in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select a button with the class 'submit-btn' using Cypress.

Cypress

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

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

Abutton.submit-btn

B#submit-btn

Csubmit-btn

D.submit-btn

Attempts:

3 left

💡 Hint

Common Mistakes

Using an ID selector (#submit-btn) instead of a class selector

Omitting the dot before the class name

Using the tag name without the class

The cy.get() command selects elements by CSS selector. Using .submit-btn selects elements with the class submit-btn.

2fill in blank

medium

Complete the code to select an input element with the attribute name='email' using Cypress.

Cypress

cy.get('[1]').type('[e-mail]')

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

A[email='input']

Binput#email

Cinput[name='email']

Dinput.email

Attempts:

3 left

💡 Hint

Common Mistakes

Using ID selector instead of attribute selector

Incorrect attribute syntax like [email='input']

Using class selector when attribute selector is needed

The selector input[name='email'] selects an input element with the attribute name equal to email.

3fill in blank

hard

Fix the error in the code to select a button with text 'Submit' using Cypress.

Cypress

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

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

A'Submit'

Bbutton:contains('Submit')

Cbutton[text='Submit']

Dbutton.submit

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS pseudo selectors inside cy.contains()

Passing a selector string instead of text

Using attribute selectors instead of text

The cy.contains() command takes the text content directly as a string, so just use 'Submit'.

4fill in blank

hard

Fill both blanks to select all list items inside a <ul> with class 'menu' and check their count.

Cypress

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

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

Aul.menu li

Bhave.length

Chave.lengthOf

Dul.menu > li

Attempts:

3 left

💡 Hint

Common Mistakes

Using direct child selector (>) which may miss nested items

Using incorrect assertion like 'have.lengthOf'

Selecting only the

instead of its
• children

ul.menu li selects all li elements inside a ul with class menu. The assertion have.length checks the number of matched elements.

5fill in blank

hard

Fill all three blanks to select an input with id 'search', type 'cypress', and verify its value.

Cypress

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

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

A#search

Btype

Chave.value

D.search-input

Attempts:

3 left

💡 Hint

Common Mistakes

Using class selector instead of ID

Using fill() instead of type()

Using wrong assertion like 'have.text' instead of 'have.value'

cy.get('#search') selects the input by ID. type('cypress') enters text. should('have.value', 'cypress') asserts the input's value.