App Actions pattern in Cypress - Test Execution Trace

Test Overview

This test uses the App Actions pattern to perform a login on a sample web app. It verifies that after login, the user is redirected to the dashboard page and a welcome message is visible.

Test Code - Cypress

Cypress

class AppActions {
  visitLogin() {
    cy.visit('/login')
  }

  fillUsername(username) {
    cy.get('input[name="username"]').clear().type(username)
  }

  fillPassword(password) {
    cy.get('input[name="password"]').clear().type(password)
  }

  submitLogin() {
    cy.get('button[type="submit"]').click()
  }

  login(username, password) {
    this.visitLogin()
    this.fillUsername(username)
    this.fillPassword(password)
    this.submitLogin()
  }

  verifyDashboard() {
    cy.url().should('include', '/dashboard')
    cy.get('h1').should('contain.text', 'Welcome')
  }
}

describe('Login Test using App Actions pattern', () => {
  const app = new AppActions()

  it('should login successfully and show dashboard', () => {
    app.login('testuser', 'Password123')
    app.verifyDashboard()
  })
})

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	AppActions.visitLogin() calls cy.visit('/login')	Browser navigates to /login page showing login form	-	PASS
3	AppActions.fillUsername('testuser') calls cy.get('input[name="username"]').clear().type('testuser')	Username input field is focused and filled with 'testuser'	-	PASS
4	AppActions.fillPassword('Password123') calls cy.get('input[name="password"]').clear().type('Password123')	Password input field is focused and filled with 'Password123'	-	PASS
5	AppActions.submitLogin() calls cy.get('button[type="submit"]').click()	Login form submitted, browser navigates to /dashboard page	-	PASS
6	AppActions.verifyDashboard() calls cy.url().should('include', '/dashboard')	Browser URL contains '/dashboard'	URL includes '/dashboard'	PASS
7	AppActions.verifyDashboard() calls cy.get('h1').should('contain.text', 'Welcome')	Dashboard page shows <h1> with text containing 'Welcome'	Page header contains 'Welcome'	PASS
8	Test ends	Test completed successfully	-	PASS

Failure Scenario

Failing Condition: Login button is not found or login fails causing no redirect to /dashboard

Execution Trace Quiz - 3 Questions

What does the test verify after submitting the login form?

A That the URL includes '/dashboard' and a welcome message is shown

B That the login form fields are cleared

C That the login button is disabled

D That the username input is focused

Key Result

Using the App Actions pattern helps organize test steps into reusable methods that represent user actions, making tests easier to read and maintain.