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.

Practice

1. What is the main purpose of using cy.within() in Cypress tests?

easy

A. To run tests faster by skipping some steps

B. To select all elements on the page at once

C. To limit commands to a specific section of the page

D. To reset the browser state between tests

Solution

1. Step 1: Understand the role of cy.within()

   cy.within() scopes all commands inside it to a specific part of the page, so only elements inside that section are targeted.

2. Step 2: Compare with other options

   Options A, C, and D describe unrelated Cypress features. Only To limit commands to a specific section of the page correctly describes cy.within().

3. Final Answer:

   To limit commands to a specific section of the page -> Option C

4. Quick Check:

   Scope commands = Limit to section [OK]

Hint: Think of within as focusing on one page part [OK]

Common Mistakes:

• Confusing cy.within() with global selectors
• Thinking it speeds up tests by skipping steps
• Assuming it resets browser state

2. Which of the following is the correct syntax to use cy.within() to scope commands inside a <form> element with id loginForm?

easy

A. cy.get('#loginForm').within(() => { /* commands */ })

B. cy.within('#loginForm', () => { /* commands */ })

C. cy.within(() => cy.get('#loginForm'))

D. cy.get('#loginForm').scope(() => { /* commands */ })

Solution

1. Step 1: Recall correct cy.within() usage

   The correct pattern is to first get the element, then call within() with a callback containing scoped commands.

2. Step 2: Analyze each option

   cy.get('#loginForm').within(() => { /* commands */ }) matches the correct syntax. cy.within('#loginForm', () => { /* commands */ }) is invalid because cy.within() does not take a selector as first argument. cy.within(() => cy.get('#loginForm')) misuses within by nesting get inside callback. cy.get('#loginForm').scope(() => { /* commands */ }) uses a non-existent scope method.

3. Final Answer:

   cy.get('#loginForm').within(() => { /* commands */ }) -> Option A

4. Quick Check:

   Get element then within callback = C [OK]

Hint: Always call within() on a selected element [OK]

Common Mistakes:

• Passing selector directly to within()
• Using non-existent methods like scope()
• Nesting get inside within callback

3. Given the HTML below:

<div id="section1">
  <button class="btn">Click Me</button>
</div>
<div id="section2">
  <button class="btn">Don't Click Me</button>
</div>

What will the following Cypress code click?

cy.get('#section1').within(() => {
  cy.get('.btn').click()
})

medium

A. Throws an error because of multiple buttons

B. Clicks the button inside #section1 with text 'Click Me'

C. Clicks the button inside #section2 with text 'Don't Click Me'

D. Clicks both buttons with class 'btn'

Solution

1. Step 1: Understand within() scope

   The within() limits commands to elements inside #section1. So cy.get('.btn') finds only the button inside #section1.

2. Step 2: Identify clicked button

   The button inside #section1 has text 'Click Me', so that is clicked. Buttons outside #section1 are ignored.

3. Final Answer:

   Clicks the button inside #section1 with text 'Click Me' -> Option B

4. Quick Check:

   Scoped get clicks inside section1 only [OK]

Hint: Within limits get to one section only [OK]

Common Mistakes:

• Thinking all buttons on page are clicked
• Assuming error due to multiple buttons
• Confusing which section is scoped

4. You wrote this Cypress test:

cy.within(() => {
  cy.get('.item').click()
})

But it fails with error: Cannot read property 'within' of undefined. What is the likely cause?

medium

A. The callback function is missing parentheses

B. The selector .item is incorrect

C. You cannot use within() with cy.get()

D. You forgot to select an element before calling within()

Solution

1. Step 1: Analyze error message

   The error says within is called on undefined, meaning cy.within() is not a valid method.

2. Step 2: Check usage of within()

   within() is a method on a selected element, like cy.get(...).within(). Calling cy.within() directly is invalid.

3. Final Answer:

   You forgot to select an element before calling within() -> Option D

4. Quick Check:

   Call within() on element, not on cy [OK]

Hint: Always select element before within() [OK]

Common Mistakes:

• Calling within() directly on cy
• Blaming selector instead of method usage
• Ignoring error message details

5. You have two sections on a page, each with a button labeled 'Submit'. You want to click the 'Submit' button only inside the section with id form2. Which Cypress code correctly does this?

hard

A. cy.get('#form2').within(() => { cy.contains('Submit').click() })

B. cy.contains('Submit').click()

C. cy.get('button').contains('Submit').click()

D. cy.within('#form2', () => { cy.get('button').click() })

Solution

1. Step 1: Identify the need for scoping

   Since there are multiple 'Submit' buttons, we must limit the search to the section with id form2 to avoid clicking the wrong button.

2. Step 2: Check each option's correctness

   cy.get('#form2').within(() => { cy.contains('Submit').click() }) correctly uses cy.get('#form2').within() to scope commands, then finds and clicks the 'Submit' button inside. cy.contains('Submit').click() clicks the first 'Submit' button anywhere, which is unsafe. cy.get('button').contains('Submit').click() tries to chain contains incorrectly and is ambiguous. cy.within('#form2', () => { cy.get('button').click() }) uses invalid syntax for within().

3. Final Answer:

   cy.get('#form2').within(() => { cy.contains('Submit').click() }) -> Option A

4. Quick Check:

   Scope then find button inside = A [OK]

Hint: Use get then within to scope clicks [OK]

Common Mistakes:

• Clicking buttons without scoping causes wrong clicks
• Using within with selector argument
• Misusing contains chaining