registerpage.js

export const registerPageCss = {
    title: 'h2',
    registerButton: '.btn-primary',
    fieldSelector: '.form-group',
    errorMessage: '.invalid-feedback',
    usernameField: '[name=username]',
    firstNameField: '[name=firstName]',
    lastNameField: '[name=lastName]',
    passwordField: '[name=password]'
}

export const registerPage = {
    register: (firstName, lastName, username, password) => {
        cy.get(registerPageCss.firstNameField).type(firstName)
        cy.get(registerPageCss.lastNameField).type(lastName)
        cy.get(registerPageCss.usernameField).type(username)
        cy.get(registerPageCss.passwordField).type(password)
        cy.get(registerPageCss.registerButton).click()
    },
    
    verifyTitleContains: (text) => {
        cy.get(registerPageCss.title).contains(text)
    },

    clickRegister: () => {
        cy.get(registerPageCss.registerButton).click()
    },

    verifyEmptyFieldErrors: () => {
        cy.get(registerPageCss.fieldSelector).first().find(registerPageCss.errorMessage).contains('First Name is required')
        cy.get(registerPageCss.fieldSelector).eq(1).find(registerPageCss.errorMessage).contains('Last Name is required')
        cy.get(registerPageCss.fieldSelector).eq(2).find(registerPageCss.errorMessage).contains('Username is required')
        cy.get(registerPageCss.fieldSelector).eq(3).find(registerPageCss.errorMessage).contains('Password is required')
        cy.get(registerPageCss.errorMessage).should('have.length', 4)

        const isInvalid = 'is-invalid'
        cy.get(registerPageCss.firstNameField).should('have.class', isInvalid)
        cy.get(registerPageCss.lastNameField).should('have.class', isInvalid)
        cy.get(registerPageCss.usernameField).should('have.class', isInvalid)
        cy.get(registerPageCss.passwordField).should('have.class', isInvalid)
    }
}