cy.within() for scoped queries in Cypress - Build an Automation Script

Verify form fields inside a specific section using cy.within()

Preconditions (2)

Step 1: Locate the section with id 'user-form'

Step 2: Within this section, find the input field with name 'firstName' and type 'John'

Step 3: Within this section, find the input field with name 'lastName' and type 'Doe'

Step 4: Within this section, click the submit button with type 'submit'

Step 5: Verify that a success message with id 'success-msg' is visible

✅ Expected Result: The form fields inside the 'user-form' section accept input and the form submits successfully showing the success message

Automation Requirements - Cypress

Assertions Needed:

Verify input fields accept the typed values

Verify the submit button is clicked

Verify the success message is visible after submission

Best Practices:

Use cy.within() to scope queries inside the form section

Use data-* attributes or semantic selectors for locating elements

Avoid global selectors to prevent flaky tests

Use Cypress commands chaining properly

Automated Solution

Cypress

describe('Form section scoped queries with cy.within()', () => {
  beforeEach(() => {
    cy.visit('/path-to-form-page');
  });

  it('fills and submits the form inside #user-form section', () => {
    cy.get('#user-form').within(() => {
      cy.get('input[name="firstName"]').type('John').should('have.value', 'John');
      cy.get('input[name="lastName"]').type('Doe').should('have.value', 'Doe');
      cy.get('button[type="submit"]').click();
    });

    cy.get('#success-msg').should('be.visible');
  });
});

The test starts by visiting the page containing the form.

Using cy.get('#user-form').within(), we scope all queries inside the form section. This means all cy.get() calls inside the within block only look inside the #user-form element.

We type 'John' and 'Doe' into the respective input fields and assert the values were entered correctly.

Then we click the submit button inside the same section.

Finally, outside the within block, we verify that the success message is visible, confirming the form submission worked.

This approach keeps selectors scoped and tests reliable.

Common Mistakes - 4 Pitfalls

Not using cy.within() and querying inputs globally

{'mistake': "Using overly generic selectors like 'input' without attributes", 'why_bad': 'Generic selectors may match multiple elements, leading to unpredictable test behavior.', 'correct_approach': 'Use specific selectors like \'input[name="firstName"]\' or data attributes for precise targeting.'}

{'mistake': 'Not asserting input values after typing', 'why_bad': 'Without assertions, test may pass even if typing failed silently.', 'correct_approach': "Add assertions like .should('have.value', 'expectedValue') after typing to confirm input."}

Clicking submit button outside the within block

Bonus Challenge

Now add data-driven testing with 3 different sets of first and last names

Show Hint