cy.within() for scoped queries in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider this Cypress test code that uses cy.within() to scope queries inside a form. What will be the result of the assertion?

Cypress

cy.get('form#login').within(() => {
  cy.get('input[type="text"]').type('user123')
  cy.get('input[type="password"]').type('pass123')
  cy.get('button').should('contain.text', 'Submit')
})

A The test passes because all elements are found inside the form and the button contains 'Submit'.

B The test fails because <code>cy.get('button')</code> searches globally, not scoped inside the form.

C The test passes but the input fields are not typed because <code>cy.get</code> inside <code>within</code> is ignored.

D The test fails because <code>cy.within()</code> does not scope queries inside the form.

💡 Hint

Remember that cy.within() scopes all queries inside the selected element.

The cy.within() command scopes all subsequent cy.get() calls inside the selected form#login element. So the inputs and button are found inside the form, and the assertion on the button text passes.

❓ assertion

intermediate

Which assertion correctly verifies a button inside a scoped cy.within() block?

You want to check that a button inside a div#container has the text 'Click Me'. Which assertion inside cy.within() is correct?

Cypress

cy.get('div#container').within(() => {
  // Which assertion is correct here?
})

A cy.get('button').should('have.attr', 'text', 'Click Me')

B cy.get('button').should('have.text', 'Click Me')

C cy.get('button').should('have.value', 'Click Me')

D cy.get('button').should('contain.text', 'Click Me')

💡 Hint

contain.text checks if the element contains the given text anywhere inside.

contain.text is the best choice to check if the button contains the text 'Click Me'. have.text requires exact match, which might fail if extra whitespace or child elements exist. have.value and have.attr are incorrect for button text content.

🔧 Debug

advanced

Why does this Cypress test fail to find the input inside cy.within()?

Look at this code snippet. The test fails with 'Timed out retrying: Expected to find element: input, but never found it.' Why?

Cypress

cy.get('section#profile').within(() => {
  cy.get('input#email').type('[e-mail]')
})

A The selector <code>input#email</code> is invalid and causes the failure.

B The <code>within()</code> command does not scope queries, so the input is not found.

C The input#email is not inside the section#profile element in the HTML DOM.

D The <code>type()</code> command cannot be used inside <code>within()</code>.

💡 Hint

Check the HTML structure to confirm if the input is inside the scoped element.

cy.within() scopes queries inside the selected element. If the input#email is outside section#profile, the query fails because it cannot find the input inside that section.

🧠 Conceptual

advanced

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

Choose the best explanation for why cy.within() is useful in test scripts.

A It scopes all subsequent commands to a specific element, reducing selector complexity and improving test reliability.

B It globally changes the base URL for all commands inside the block.

C It disables automatic retries for commands inside the block to speed up tests.

D It allows running commands in parallel inside the block for faster execution.

💡 Hint

Think about how scoping queries helps when multiple similar elements exist on the page.

cy.within() scopes all commands inside its callback to a specific element. This helps target elements inside complex DOM structures without repeating long selectors and reduces flakiness by limiting search scope.

❓ framework

expert

In a Cypress test, how does cy.within() affect command chaining and asynchronous execution?

Consider this code snippet. What is true about the execution order and scope of commands inside cy.within() compared to outside it?

Cypress

cy.get('div#main').within(() => {
  cy.get('button').click()
  cy.get('input').type('hello')
})
cy.get('footer button').click()

A Commands inside <code>within()</code> run in parallel with the footer button click, causing race conditions.

B Commands inside <code>within()</code> are chained and executed sequentially scoped to <code>div#main</code>, then the footer button click runs after.

C Commands inside <code>within()</code> lose their scope and run globally, ignoring <code>div#main</code>.

D Commands inside <code>within()</code> block are executed only after all commands outside it finish.

💡 Hint

Remember Cypress commands are asynchronous but run in order, and within() scopes commands inside its callback.

Cypress commands inside within() are scoped to the selected element and run sequentially. After they finish, commands outside within() continue. Commands do not run in parallel or lose scope.

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