Page Object Model in Cypress - Test Execution Trace

Test Overview

This test uses the Page Object Model to separate page structure from test logic. It verifies that a user can log in successfully and see a welcome message.

Test Code - Cypress

Cypress

class LoginPage {
  visit() {
    cy.visit('https://example.com/login')
  }

  fillUsername(name) {
    cy.get('#username').clear().type(name)
  }

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

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

describe('Login Test with POM', () => {
  const loginPage = new LoginPage()

  it('should log in successfully and show welcome message', () => {
    loginPage.visit()
    loginPage.fillUsername('testuser')
    loginPage.fillPassword('Password123')
    loginPage.submit()
    cy.get('#welcome-message').should('contain.text', 'Welcome, testuser!')
  })
})

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to 'https://example.com/login'	Login page is displayed with username and password fields	URL is 'https://example.com/login'	PASS
3	Finds username input field with selector '#username' and types 'testuser'	Username field contains 'testuser'	Username input value is 'testuser'	PASS
4	Finds password input field with selector '#password' and types 'Password123'	Password field contains 'Password123'	Password input value is 'Password123'	PASS
5	Finds submit button with selector 'button[type="submit"]' and clicks it	Form submitted, page processes login	-	PASS
6	Finds element with selector '#welcome-message' and checks it contains text 'Welcome, testuser!'	Welcome message is visible on the page	Text content includes 'Welcome, testuser!'	PASS
7	Test ends	Test completed successfully	-	PASS

Failure Scenario

Failing Condition: Welcome message element '#welcome-message' is not found or text does not match

Execution Trace Quiz - 3 Questions

What does the test verify after submitting the login form?

A That the welcome message contains the username

B That the login page reloads

C That the password field is cleared

D That the submit button is disabled

Key Result

Using the Page Object Model helps keep tests clean and easy to maintain by separating page details from test steps.