如何在页面对象模型中对页面进行编码,以便于量角器测试的调试?

前言

我想为使用页面对象模型的e2e测试准备易于维护和调试的代码。

我所做的

当我开始准备 Protractor 结束2结束测试,我尝试在 Page Object Model 通过执行以下步骤:

1. 打开我要在浏览器中测试的页面,
2. 正常开放 developer tools (12层),
3. 使用 inspect 工具熟悉 页面,查看ID、类名和CSS选择器,这些元素是我想用于页面对象模型的,
4. 以这样的方式开始编码:元素依赖于 以前定义的。特别是,我尝试将代码分成不同的类。

让我提供第4点中提到的此类代码的简化示例:

class genericPageWithTable {

    get Frame1() {
        return element(by.id('someId'));
        }

    get Table1() {
        return this.Frame1.element(by.tagName('table'));
        }
}

class specificTable extends genericPageWithTable {

    get specificElement {
        return this.Table1.element(by.className('specificElement'));
        }
}

我用下面的断言示例编写了简单的测试:

expect(specificElement.getText()).toBe('someString');

我的挫折就是从这里开始的。。。

测试失败,因为 undefined 没有getText()。。。

问题

我不知道哪个元素是未定义的,我的哪些方法没有返回任何元素。我不知道我能不能相信我的方法。

所以我在跑步 protractor --elementExplorer 试着验证我是否正确地写下了每个定位器。。。 在elementExplorer中它可以工作,所以我开始添加 browser.wait(EC.visibilityOf(...)) 条件。。。但现在错误消息提供了未定义的信息,其中不包含“isPresent”方法。 所以我开始补充 async 和 await ,但在许多情况下,仍然很难找到未定义的返回位置。。。

在很多情况下,添加断点和尝试调试也会让我感到困惑,因为流在某种程度上是意外的。

问题

你能告诉我:

1. 我应该如何为页面对象模型准备代码,以便更容易维护和调试,从而确保我的方法真的返回某些内容?有没有比在浏览器中使用开发人员工具和基于我在HTML中看到的内容进行编码更好的方法呢?
2. 有什么更好的方法可以确保我的页面对象模型代码是正确的?显然,我可以尝试为每个方法/属性编写测试,但我不想混淆那些将读取测试输出(并从业务角度期望结果)的人?