javascript - 使用页面对象模型在 Protractor 测试中需要断言表单字段

Question

基于如何断言表单字段是必需的示例 How can I check if an element is require using Protractor in angular2? ，我尝试了下面两种有效的编码方式。

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

或

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

除此之外，这样做也违背了使用页面对象的初衷。 来自页面对象文件:

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

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

使用该对象，此代码在规范/测试文件中添加名称: THINGEditor.addTHINGName('测试THING标题');

但是我尝试验证名称的所有内容都是必需的，要么导致无法读取未定义的属性“getAttribute”，要么导致错误提示“______ 未定义”

其他试图提供帮助的人说页面对象文件中似乎没有正确返回某些内容，因此我将其更改为在类中获取/设置并在页面对象文件中实例化新对象。这改进了上面的断言解析为 null，但这仍然没有给出预期的结果，而且我正在测试的应用程序有很多必填字段，所以我需要能够验证某些字段(每个表单几个)是必需的，而不仅仅是页面上存在通用的“必需”。我现在想知道我是否应该放弃这个并断言该字段在表单上显示“名称*”，然后进行测试以确保保存按钮对于这个特定的表单不可点击。真的，我需要验证填写表格的人是否有一个视觉指示器，表明该表格是必需的，而且该表格实际上强制执行了要求，这可能是两个不同的事情。在使用页面对象时，你们通常如何验证字段是否为必填项？

Answer 1

如果您对页面对象执行此操作，则应创建一个类，要求/导入该类，然后创建一个新类。可能正在发生的事情是，被命名和引用的 var 是否正确导出导致它未定义。以下示例使用 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');
  }
}

在你的测试中，你应该使用 async/await。这是通过在您的配置中将 SELENIUM_PROMISE_MANAGER 设置为 false 来完成的:

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);
  });
});