Why interactions simulate user behavior in Cypress - Automation Benefits in Action

Verify that clicking the Submit button triggers form submission

Preconditions (2)

Step 1: Enter 'John Doe' in the input field with id 'name'

Step 2: Click the Submit button with id 'submit-btn'

Step 3: Observe that the form submission triggers a success message with id 'success-msg'

✅ Expected Result: After clicking Submit, the success message with text 'Form submitted successfully!' is visible

Automation Requirements - Cypress

Assertions Needed:

Verify input field receives the typed text

Verify clicking the Submit button triggers the success message

Verify the success message text is exactly 'Form submitted successfully!'

Best Practices:

Use cy.get() with clear selectors

Use .type() to simulate user typing

Use .click() to simulate user clicking

Use assertions like .should('be.visible') and .should('have.text')

Avoid directly manipulating DOM elements without user-like interactions

Automated Solution

Cypress

describe('Form submission simulates user behavior', () => {
  beforeEach(() => {
    cy.visit('/form');
  });

  it('should submit the form and show success message', () => {
    // Simulate user typing in the name input
    cy.get('#name').type('John Doe').should('have.value', 'John Doe');

    // Simulate user clicking the submit button
    cy.get('#submit-btn').click();

    // Verify the success message appears with correct text
    cy.get('#success-msg')
      .should('be.visible')
      .and('have.text', 'Form submitted successfully!');
  });
});

This test uses Cypress to simulate real user actions on a form page.

First, cy.visit('/form') loads the page before each test.

Then, cy.get('#name').type('John Doe') simulates typing into the input field, just like a user would. The assertion .should('have.value', 'John Doe') confirms the input received the text.

Next, cy.get('#submit-btn').click() simulates a user clicking the submit button.

Finally, the test checks that the success message appears and contains the exact expected text, ensuring the form submission worked as a user would experience it.

Using these user-like interactions helps catch issues that might not appear if we manipulate the DOM directly, making tests more reliable and realistic.

Common Mistakes - 3 Pitfalls

{'mistake': "Using cy.get().invoke('val', 'John Doe') instead of cy.get().type('John Doe')", 'why_bad': 'This sets the input value directly without simulating user typing, missing potential input event triggers.', 'correct_approach': "Use cy.get('#name').type('John Doe') to simulate real user typing."}

{'mistake': 'Clicking the button by triggering a click event with jQuery instead of cy.get().click()', 'why_bad': 'Direct event triggering bypasses browser behaviors and event handlers that run on real clicks.', 'correct_approach': "Use cy.get('#submit-btn').click() to simulate a real user click."}

{'mistake': 'Not waiting for the success message to appear before asserting', 'why_bad': 'Assertions may run before the UI updates, causing flaky test failures.', 'correct_approach': "Use Cypress's built-in retry with .should('be.visible') to wait for the element."}

Bonus Challenge

Now add data-driven testing with 3 different names to verify the form submission works for each

Show Hint