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

Practice

1. Why does Cypress simulate user behavior when testing web applications?

easy

A. To avoid using selectors and locators in tests

B. To speed up the test execution by skipping UI actions

C. To test the app as a real user would interact with it

D. To only test backend APIs without UI involvement

Solution

1. Step 1: Understand the purpose of simulating user behavior

   Cypress simulates user actions like clicking and typing to mimic how a real user uses the app.

2. Step 2: Identify the benefit of this simulation

   This helps catch UI and interaction bugs that real users might face, improving app quality.

3. Final Answer:

   To test the app as a real user would interact with it -> Option C

4. Quick Check:

   Simulate user actions = Real user testing [OK]

Hint: Think: Why test like a real user? To catch real issues [OK]

Common Mistakes:

• Thinking tests run faster by skipping UI
• Believing selectors are not needed
• Confusing UI tests with backend API tests

2. Which Cypress command correctly simulates a user typing 'hello' into an input field with id 'name'?

easy

A. cy.get('#name').type('hello')

B. cy.type('#name', 'hello')

C. cy.click('#name').type('hello')

D. cy.get('input').click('hello')

Solution

1. Step 1: Identify the correct Cypress syntax for typing

   The correct command is to first get the element with cy.get() then use .type() to simulate typing.

2. Step 2: Check each option for syntax correctness

   cy.get('#name').type('hello') uses cy.get('#name').type('hello'), which is correct. Others misuse commands or chaining.

3. Final Answer:

   cy.get('#name').type('hello') -> Option A

4. Quick Check:

   Correct command = cy.get + .type [OK]

Hint: Remember: get element first, then type [OK]

Common Mistakes:

• Using cy.type() directly without cy.get()
• Trying to click with text instead of typing
• Wrong chaining order of commands

3. What will happen when this Cypress code runs?

cy.get('button.submit').click();
cy.get('input#email').type('[e-mail]');
cy.get('form').submit();

medium

A. Clicks the submit button, types email, then submits the form

B. Types email first, then clicks submit button, then submits form

C. Clicks submit button, submits form, then types email

D. Throws an error because submit() is not a Cypress command

Solution

1. Step 1: Read the commands in order

   The code clicks the button with class 'submit', then types an email into input with id 'email', then submits the form.

2. Step 2: Understand Cypress command chaining and execution

   Cypress runs commands in order, so the actions happen sequentially as written.

3. Final Answer:

   Clicks the submit button, types email, then submits the form -> Option A

4. Quick Check:

   Commands run in order = C [OK]

Hint: Read commands top to bottom for execution order [OK]

Common Mistakes:

• Assuming commands run out of order
• Thinking submit() is invalid in Cypress
• Confusing click and type sequence

4. You wrote this Cypress test but it fails:

cy.get('input#search').type('Cypress');
cy.get('button#search-btn').click();
cy.get('.results').should('contain', 'Cypress');

What is the most likely reason for failure?

medium

A. The selector for input#search is incorrect

B. The button click does not trigger the search results to update

C. The type() command does not simulate typing

D. The should() assertion syntax is wrong

Solution

1. Step 1: Check if selectors and commands are correct

   Selectors and commands like type(), click(), and should() are used correctly.

2. Step 2: Consider app behavior after clicking search button

   If clicking the button does not update results, the test will fail because '.results' won't contain 'Cypress'.

3. Final Answer:

   The button click does not trigger the search results to update -> Option B

4. Quick Check:

   Failure reason = UI not updating after click [OK]

Hint: Check if UI updates after simulated clicks [OK]

Common Mistakes:

• Blaming selectors without checking app behavior
• Assuming type() does nothing
• Misreading assertion syntax

5. You want to test a login form using Cypress to simulate a real user. Which sequence best simulates user behavior?

hard

A. cy.get('form').submit(); cy.get('#username').type('user1'); cy.get('#password').type('pass1');

B. cy.get('#username').click(); cy.get('#password').click(); cy.get('button').click();

C. cy.get('#username').clear(); cy.get('#password').clear(); cy.get('form').submit();

D. cy.get('#username').type('user1'); cy.get('#password').type('pass1'); cy.get('button[type=submit]').click();

Solution

1. Step 1: Identify the correct order of user actions

   A real user types username, then password, then clicks submit button.

2. Step 2: Evaluate each option for realistic user simulation

   cy.get('#username').type('user1'); cy.get('#password').type('pass1'); cy.get('button[type=submit]').click(); matches this sequence. Others miss typing or submit too early.

3. Final Answer:

   cy.get('#username').type('user1'); cy.get('#password').type('pass1'); cy.get('button[type=submit]').click(); -> Option D

4. Quick Check:

   Type username/password then click submit [OK]

Hint: Type inputs before clicking submit to mimic user [OK]

Common Mistakes:

• Clicking inputs without typing
• Submitting form before typing
• Clearing inputs without typing