Skip to main content

​
Overview

LoginPage handles all interactions with the login page including entering credentials, submitting the login form, and validating error messages. Location: cypress/support/pages/LoginPage.ts Extends: BasePage

​
Class Definition

import BasePage from "./BasePage";

export default class LoginPage extends BasePage {
    private usernameField: string
    private passwordField: string
    private loginBtnField: string
    private errorMsgAlert: string
    private closeErrorBtn: string
    private loginMainPage: string

    constructor() {
        super()
        this.usernameField = '#user-name'
        this.passwordField = '#password'
        this.loginBtnField = '#login-button'
        this.errorMsgAlert = '[data-test="error"]'
        this.closeErrorBtn = '[data-test="error-button"]'
        this.loginMainPage = '.login_container'
    }
}

​
Constructor

Initializes the LoginPage with all required selectors. 
const loginPage = new LoginPage()

​
Properties

PropertyTypeSelectorDescription
usernameFieldstring#user-nameUsername input field
passwordFieldstring#passwordPassword input field
loginBtnFieldstring#login-buttonLogin submit button
errorMsgAlertstring[data-test="error"]Error message container
closeErrorBtnstring[data-test="error-button"]Close error button
loginMainPagestring.login_containerMain login container

​
Methods

​
typeUsername

Enters a username into the username field. 
public typeUsername(username: string): void
​
username
string
required
The username to enter
Usage Example: 
loginPage.typeUsername('standard_user')

​
typePassword

Enters a password into the password field. 
public typePassword(password: string): void
​
password
string
required
The password to enter
Usage Example: 
loginPage.typePassword('secret_sauce')

​
clearUsernameField

Clears the username input field. 
public clearUsernameField(): void
Usage Example: 
loginPage.clearUsernameField()

​
clearPasswordField

Clears the password input field. 
public clearPasswordField(): void
Usage Example: 
loginPage.clearPasswordField()

​
verifyUsernameFieldCleared

Verifies that the username field is empty. 
public verifyUsernameFieldCleared(): void
Usage Example: 
loginPage.clearUsernameField()
loginPage.verifyUsernameFieldCleared()

​
verifyPasswordFieldCleared

Verifies that the password field is empty. 
public verifyPasswordFieldCleared(): void
Usage Example: 
loginPage.clearPasswordField()
loginPage.verifyPasswordFieldCleared()

​
verifyErrorMessageIsHidden

Verifies that the error message is not displayed. 
public verifyErrorMessageIsHidden(): void
Usage Example: 
loginPage.closeErrorMessage()
loginPage.verifyErrorMessageIsHidden()

​
verifyErrorMessageIsShown

Verifies that the error message is visible. 
public verifyErrorMessageIsShown(): void
Usage Example: 
loginPage.clickOnLoginButton()
loginPage.verifyErrorMessageIsShown()

​
verifyLoginMainPage

Verifies that the login page main container is visible. 
public verifyLoginMainPage(): void
Usage Example: 
cy.visit('/')
loginPage.verifyLoginMainPage()

​
verifyErrorMessage

Verifies that the error message displays the expected text. 
public verifyErrorMessage(message: string): void
​
message
string
required
The expected error message text
Usage Example: 
loginPage.verifyErrorMessage('Epic sadface: Sorry, this user has been locked out.')

​
clickOnLoginButton

Clicks the login button to submit credentials. 
public clickOnLoginButton(): void
Usage Example: 
loginPage.typeUsername('standard_user')
loginPage.typePassword('secret_sauce')
loginPage.clickOnLoginButton()

​
closeErrorMessage

Closes the error message alert. 
public closeErrorMessage(): void
Usage Example: 
loginPage.verifyErrorMessageIsShown()
loginPage.closeErrorMessage()
loginPage.verifyErrorMessageIsHidden()

​
userLogin

Complete login flow - enters username, password, and clicks login button. 
public userLogin(username: string, password: string): void
​
username
string
required
The username to log in with
​
password
string
required
The password to log in with
Supported Users:
  • standard - Valid username
  • locked - Locked out username
  • problem - User with problems on home page
  • performance - User with performance glitches
  • error - User with errors on home page
  • visual - User with visual errors on home page
  • password - Valid password
Usage Example: 
// Used in beforeEach hooks for test setup
cy.fixture('users').then((user: any) => {
    loginPage.userLogin(user.standard, user.password)
})
Real Test Example: 
it('Should log in successfully with valid credentials', () => {
    cy.get('@userData').then((user: any) => {
        loginPage.verifyLoginMainPage()
        loginPage.typeUsername(user.standard)
        loginPage.typePassword(user.password)
        loginPage.clickOnLoginButton()

        homePage.verifyHomePageIsVisible()

        navbar.userLogout()

        loginPage.verifyLoginMainPage()
    })
})

​
Complete Test Flow Example

import LoginPage from "../../support/pages/LoginPage"
import HomePage from "../../support/pages/HomePage"

let loginPage: LoginPage
let homePage: HomePage

describe('Login Tests', () => {
    beforeEach(() => {
        loginPage = new LoginPage()
        homePage = new HomePage()
        cy.visit('/')
    })

    it('Should handle locked user error', () => {
        cy.fixture('users').then((user: any) => {
            loginPage.verifyLoginMainPage()
            loginPage.typeUsername(user.locked)
            loginPage.typePassword(user.password)
            loginPage.clickOnLoginButton()
            loginPage.verifyErrorMessageIsShown()
            loginPage.verifyErrorMessage('Epic sadface: Sorry, this user has been locked out.')
            loginPage.closeErrorMessage()
            loginPage.verifyErrorMessageIsHidden()
        })
    })
})

BasePage

Parent class providing common functionality

HomePage

Navigate here after successful login

Navbar

Use for logout functionality

Build docs developers (and LLMs) love

Get started for freeTalk to us