Asserting form fields are required in Protractor test using page object model

Question

Based on an example of how to assert a form field is required How can I check if an element is require using Protractor in angular2? , I tried the two ways of coding it below which work.

it('should add a THING name required', function() {
  var foo = element(by.model('THING.name'));
  expect((foo).getAttribute("required")).toBe("true");
});

or

expect(element(by.model('THING.name')).getAttribute("required")).toBe(true);

Except doing it that way also defeats the purpose of using page objects in the first place. From the page object file:

var THINGNameField = element(by.model('THING.name'));

this.addTHINGName = function (THINGName) {
THINGNameField.sendKeys(THINGName);
};

With that object, this code works in the spec/test file to add the name: THINGEditor.addTHINGName ('Test THING title');

but everything I've tried to validate the name is required either results in Cannot read property 'getAttribute' of undefined or an error saying the "______ is undefined"

Someone else who tried to assist said it seemed like something was not being returned correctly in the page object file, so I changed it to get/set within a class and instantiated the new object within the page object file. That improved things to have the assertion above resolve to null, but that is still not giving the desired result, and the app I'm testing has many required fields, so I need to be able to validate that certain fields (several per form) are required, not just that a generic "required" exists on the page. I'm wondering now though if I should just scrap this and assert instead that the field shows "Name*" on the form and then have the test make sure the save button is not clickable for this particular form. Really, I need to verify that the person filling out the form has a visual indicator that the form is required but also that the form actually enforces the requirement, which can be two different things. How do you all typically verify that fields are required when using page objects?

Answer 1

If you are doing this with a page object, you should create a class, require / import the class, and make a new class. Probably what is happening, is the var being named and referenced is properly exported resulting in it being undefined. The following example is in TypeScript.

import {by, element, ElementFinder} from 'protractor';

export class FooPageObject {
  foo: ElementFinder = element(by.model('THING.name'));

  /**
   * Adds a name by sending the keys to the foo object.
   * @param keys The string representing the name
   * @return a promise
   */
  addName(keys: string): Promise<void> {
    return foo.sendKeys(keys);
  }

  /**
   * Gets the required attribute for the input box.
   * @return a promise to the boolean value
   */
  getRequired(): Promise<boolean> {
    return foo.getAttribute('required');
  }
}

In your test, you should use async / await. This is done by setting the SELENIUM_PROMISE_MANAGER to false in your config:

import {FooPageObject} from './path/to/foo';

describe('foo page object', () => {
  it('should add a name and check if it is required', async () => {
    const fooPageObject = new FooPageObject();
    await fooPageObject.addName('my name');
    expect(await fooPageObject.getRequired()).toBe(true);
  });
});