trip-planner/tests/support/pages/RegistrationPage.js

const BasePage = require('./BasePage');

class RegistrationPage extends BasePage {
  constructor(driver) {
    super(driver);

    // Selectors based on the RegistrationForm component
    this.selectors = {
      form: '.registration-form',
      heading: '.registration-form h2',
      nameInput: '#name',
      emailInput: '#email',
      passwordInput: '#password',
      passwordConfirmationInput: '#password_confirmation',
      submitButton: 'button[type="submit"]',
      successMessage: '.alert-success',
      generalError: '.alert-error',
      fieldError: '.error-message'
    };
  }

  async navigateToRegistration() {
    await this.navigateTo('/');
    // Click the Register tab
    const registerButton = await this.driver.findElement({ css: '.auth-toggle button:last-child' });
    await registerButton.click();
    await this.waitForRegistrationForm();
  }

  async waitForRegistrationForm() {
    await this.utils.waitForElementVisible(this.selectors.form);
  }

  async isRegistrationFormDisplayed() {
    return await this.isElementVisible(this.selectors.form);
  }

  async getRegistrationHeading() {
    return await this.getElementText(this.selectors.heading);
  }

  async enterName(name) {
    await this.typeIntoElement(this.selectors.nameInput, name);
  }

  async enterEmail(email) {
    await this.typeIntoElement(this.selectors.emailInput, email);
  }

  async enterPassword(password) {
    await this.typeIntoElement(this.selectors.passwordInput, password);
  }

  async enterPasswordConfirmation(password) {
    await this.typeIntoElement(this.selectors.passwordConfirmationInput, password);
  }

  async clickSubmit() {
    await this.clickElement(this.selectors.submitButton);
  }

  async getSubmitButtonText() {
    return await this.getElementText(this.selectors.submitButton);
  }

  async isSubmitButtonDisabled() {
    const button = await this.utils.waitForElement(this.selectors.submitButton);
    return await button.getAttribute('disabled') !== null;
  }

  async register(name, email, password, passwordConfirmation = null) {
    await this.enterName(name);
    await this.enterEmail(email);
    await this.enterPassword(password);
    await this.enterPasswordConfirmation(passwordConfirmation || password);
    await this.clickSubmit();
  }

  async getSuccessMessage() {
    try {
      const elements = await this.driver.findElements({ css: this.selectors.successMessage });
      if (elements.length === 0) return null;
      return await elements[0].getText();
    } catch (error) {
      return null;
    }
  }

  async getGeneralErrorMessage() {
    try {
      return await this.getElementText(this.selectors.generalError);
    } catch (error) {
      return null;
    }
  }

  async getFieldErrorMessage(fieldSelector) {
    try {
      const field = await this.utils.waitForElement(fieldSelector);
      const parent = await field.findElement({ xpath: '..' });
      const errorElement = await parent.findElement({ css: this.selectors.fieldError });
      return await errorElement.getText();
    } catch (error) {
      return null;
    }
  }

  async getNameErrorMessage() {
    return await this.getFieldErrorMessage(this.selectors.nameInput);
  }

  async getEmailErrorMessage() {
    return await this.getFieldErrorMessage(this.selectors.emailInput);
  }

  async getPasswordErrorMessage() {
    return await this.getFieldErrorMessage(this.selectors.passwordInput);
  }

  async getPasswordConfirmationErrorMessage() {
    return await this.getFieldErrorMessage(this.selectors.passwordConfirmationInput);
  }

  async hasFieldError(fieldSelector) {
    const field = await this.utils.waitForElement(fieldSelector);
    const className = await field.getAttribute('class');
    return className.includes('error');
  }

  async hasNameFieldError() {
    return await this.hasFieldError(this.selectors.nameInput);
  }

  async hasEmailFieldError() {
    return await this.hasFieldError(this.selectors.emailInput);
  }

  async hasPasswordFieldError() {
    return await this.hasFieldError(this.selectors.passwordInput);
  }

  async hasPasswordConfirmationFieldError() {
    return await this.hasFieldError(this.selectors.passwordConfirmationInput);
  }

  async waitForSuccessfulRegistration() {
    await this.utils.waitForElementVisible(this.selectors.successMessage);
  }

  async waitForRegistrationError() {
    // Wait for either general error or field errors to appear
    await this.driver.wait(
      async () => {
        const hasGeneralError = await this.isElementVisible(this.selectors.generalError);
        const hasNameError = await this.hasNameFieldError();
        const hasEmailError = await this.hasEmailFieldError();
        const hasPasswordError = await this.hasPasswordFieldError();
        const hasPasswordConfirmationError = await this.hasPasswordConfirmationFieldError();

        return hasGeneralError || hasNameError || hasEmailError || hasPasswordError || hasPasswordConfirmationError;
      },
      10000,
      'No error message appeared within expected time'
    );
  }

  async isFormCleared() {
    const nameValue = await (await this.utils.waitForElement(this.selectors.nameInput)).getAttribute('value');
    const emailValue = await (await this.utils.waitForElement(this.selectors.emailInput)).getAttribute('value');
    const passwordValue = await (await this.utils.waitForElement(this.selectors.passwordInput)).getAttribute('value');
    const passwordConfirmationValue = await (await this.utils.waitForElement(this.selectors.passwordConfirmationInput)).getAttribute('value');

    return nameValue === '' && emailValue === '' && passwordValue === '' && passwordConfirmationValue === '';
  }
}

module.exports = RegistrationPage;