cy.within() for scoped queries in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to scope the query inside the element with class 'form'.

Cypress

cy.get('.form').[1](() => {
  cy.get('input[name="email"]').type('[e-mail]')
})

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

Awithin

Bfind

Ccontains

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'find' instead of 'within' which does not scope the callback.

Using 'contains' which searches for text, not scoping queries.

The within command scopes all subsequent queries inside the matched element, here the element with class 'form'.

2fill in blank

medium

Complete the code to check that the button inside the '.modal' is visible using scoped queries.

Cypress

cy.get('.modal').[1](() => {
  cy.get('button.submit').should('be.visible')
})

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

Aclick

Btrigger

Cwait

Dwithin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' or 'trigger' which perform actions, not scoping queries.

Using 'wait' which pauses test but does not scope queries.

within scopes the query to the '.modal' element, so the button is searched only inside it.

3fill in blank

hard

Fix the error in the code by choosing the correct command to scope queries inside '#container'.

Cypress

cy.get('#container').[1](() => {
  cy.get('input').type('Hello')
})

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

Aget

Bwithin

Cclick

Dshould

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' inside the callback which searches globally, not scoped.

Using 'click' or 'should' which are not for scoping.

The within command scopes the queries inside '#container'. Using 'get' again would search the whole document.

4fill in blank

hard

Fill both blanks to scope queries inside '.card' and check the text of the header.

Cypress

cy.get('.card').[1](() => {
  cy.get('h2').[2]('contain', 'Welcome')
})

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

Awithin

Bshould

Ccontains

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'within' for scoping.

Using 'contains' instead of 'should' for assertion.

within scopes queries inside '.card'. Then should('contain', 'Welcome') checks the header text.

5fill in blank

hard

Fill all three blanks to scope queries inside '#list', find list items, and assert the count is 3.

Cypress

cy.get('#list').[1](() => {
  cy.get('li').[2]('have.length', [3])
})

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

Awithin

Bshould

Chave.length

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong assertion like 'click' or 'contains'.

Using wrong length number or missing quotes.

within scopes queries inside '#list'. Then should('have.length', 3) asserts the number of li elements.