App Actions pattern in Cypress - Build an Automation Script

Verify user can log in and see welcome message using App Actions pattern

Preconditions (2)

Step 1: Enter 'testuser' in the username input field with id 'username'

Step 2: Enter 'Password123!' in the password input field with id 'password'

Step 3: Click the login button with id 'loginBtn'

Step 4: Wait for the dashboard page to load

Step 5: Verify the URL contains '/dashboard'

Step 6: Verify the welcome message with id 'welcomeMsg' contains text 'Welcome, testuser!'

✅ Expected Result: User is successfully logged in, redirected to dashboard, and sees the correct welcome message

Automation Requirements - Cypress

Assertions Needed:

URL contains '/dashboard'

Welcome message text is 'Welcome, testuser!'

Best Practices:

Use App Actions pattern to separate UI actions from test assertions

Use Cypress commands and chaining for readability

Use explicit assertions with should()

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

class LoginActions {
  enterUsername(username) {
    cy.get('#username').clear().type(username);
  }

  enterPassword(password) {
    cy.get('#password').clear().type(password);
  }

  clickLogin() {
    cy.get('#loginBtn').click();
  }
}

class DashboardActions {
  verifyUrl() {
    cy.url().should('include', '/dashboard');
  }

  verifyWelcomeMessage(username) {
    cy.get('#welcomeMsg').should('contain.text', `Welcome, ${username}!`);
  }
}

describe('Login and Dashboard Test using App Actions pattern', () => {
  const login = new LoginActions();
  const dashboard = new DashboardActions();

  it('should log in and display welcome message', () => {
    cy.visit('/login');
    login.enterUsername('testuser');
    login.enterPassword('Password123!');
    login.clickLogin();

    dashboard.verifyUrl();
    dashboard.verifyWelcomeMessage('testuser');
  });
});

The code defines two classes: LoginActions and DashboardActions. Each class groups related UI actions and assertions, following the App Actions pattern to keep tests clean and maintainable.

LoginActions has methods to enter username, enter password, and click the login button. These methods use Cypress commands to interact with the page elements by their IDs.

DashboardActions has methods to verify the URL contains '/dashboard' and to check the welcome message text includes the username.

The test case visits the login page, uses the login object to perform login steps, then uses the dashboard object to verify the expected results.

This structure makes the test easy to read and maintain, separating UI interactions from assertions.

Common Mistakes - 3 Pitfalls

Mixing UI actions and assertions directly in the test without using App Actions pattern

Using hardcoded waits like cy.wait(5000) instead of relying on Cypress automatic waits

Using brittle selectors like absolute XPath or overly generic selectors

Bonus Challenge

Now add data-driven testing with 3 different user credentials to verify login and welcome message for each user

Show Hint

Practice

1. What is the main benefit of using the App Actions pattern in Cypress tests?

easy

A. It automatically generates test data for each test run.

B. It speeds up test execution by running tests in parallel.

C. It replaces the need for assertions in tests.

D. It groups test steps into reusable methods to keep tests clean and maintainable.

Solution

1. Step 1: Understand the purpose of App Actions pattern

   The pattern groups common test steps into reusable methods to avoid repetition.

2. Step 2: Identify the benefit in test code

   This grouping makes tests cleaner and easier to maintain by reusing code.

3. Final Answer:

   It groups test steps into reusable methods to keep tests clean and maintainable. -> Option D

4. Quick Check:

   Reusable methods = cleaner tests [OK]

Hint: Remember: App Actions = reusable test steps [OK]

Common Mistakes:

• Thinking App Actions generate test data automatically
• Confusing App Actions with test assertions
• Assuming App Actions speed up test execution

2. Which of the following is the correct way to define an App Action method for logging in a user in Cypress?

easy

A. const login = () => { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); }

B. cy.login = () => { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); }

C. function login() { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); }

D. login() { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); }

Solution

1. Step 1: Identify valid JavaScript function syntax

   const login = () => { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); } uses a valid arrow function assigned to a constant, which is common in Cypress helper files.

2. Step 2: Check other options for syntax errors

   function login() { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); } is a function declaration but not exported or assigned; cy.login = () => { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); } incorrectly assigns to cy object; login() { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); } is invalid syntax.

3. Final Answer:

   const login = () => { cy.get('#user').type('admin'); cy.get('#pass').type('1234'); cy.get('#submit').click(); } -> Option A

4. Quick Check:

   Arrow function assigned to const = correct syntax [OK]

Hint: Use arrow functions assigned to const for App Actions [OK]

Common Mistakes:

• Using invalid function syntax without const or arrow
• Attaching methods directly to cy object incorrectly
• Omitting function keyword or arrow in definitions

3. Given this App Action method:

const addItem = (name) => { cy.get('#item-input').type(name); cy.get('#add-button').click(); }

What will be the result of this test code?

addItem('Book'); cy.get('#item-list').should('contain', 'Book');

medium

A. The test will fail because addItem does not return a value.

B. The test will pass if 'Book' appears in the item list after adding.

C. The test will throw a syntax error due to missing return statement.

D. The test will pass only if the input field has a placeholder 'Book'.

Solution

1. Step 1: Understand what addItem does

   It types the given name into the input and clicks the add button, triggering UI update.

2. Step 2: Analyze the assertion

   The test checks if '#item-list' contains the text 'Book', which should be true after adding.

3. Final Answer:

   The test will pass if 'Book' appears in the item list after adding. -> Option B

4. Quick Check:

   UI updates with added item = test passes [OK]

Hint: Add item then check list contains it [OK]

Common Mistakes:

• Assuming missing return causes failure
• Confusing input placeholder with typed value
• Expecting addItem to return a value

4. This App Action method is intended to log in a user:

const login = (user, pass) => { cy.get('#username').type(user); cy.get('#password').type(pass); cy.get('#login-btn').click }

What is the error and how to fix it?

medium

A. Missing parentheses after click; fix by changing to cy.get('#login-btn').click().

B. Wrong selector for username; fix by using #user instead of #username.

C. Missing return statement; fix by adding return before cy commands.

D. Using arrow function incorrectly; fix by using function keyword.

Solution

1. Step 1: Check method chaining syntax

   The click command is missing parentheses, so it is not called.

2. Step 2: Fix the click command

   Add parentheses to call the function: click() to perform the click action.

3. Final Answer:

   Missing parentheses after click; fix by changing to cy.get('#login-btn').click() -> Option A

4. Quick Check:

   Method calls need parentheses [OK]

Hint: Always add () to call Cypress commands like click [OK]

Common Mistakes:

• Forgetting parentheses on Cypress commands
• Changing selectors without verifying correctness
• Thinking return is needed for Cypress commands

5. You want to create an App Action to add multiple items from an array and verify all appear in the list. Which is the best approach?

hard

A. Use a single cy.get() call to type all items at once separated by commas.

B. Write separate tests for each item instead of looping in one method.

C. Create an addItems method that loops over the array, calls addItem for each, then asserts all items appear.

D. Add all items by typing them in one input, then click add once.

Solution

1. Step 1: Understand the need for reusability and verification

   Looping over the array and calling addItem reuses existing code and ensures each item is added properly.

2. Step 2: Verify all items appear after adding

   After adding, asserting all items appear confirms the UI updated correctly for each item.

3. Final Answer:

   Create an addItems method that loops over the array, calls addItem for each, then asserts all items appear. -> Option C

4. Quick Check:

   Loop + reuse + verify = best practice [OK]

Hint: Loop array, reuse addItem, then assert all present [OK]

Common Mistakes:

• Typing all items at once without separate adds
• Writing many separate tests instead of one reusable method
• Assuming one click adds multiple items automatically