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