如何在页面对象模型中编码页面，以便更轻松地调试量角器测试？

Question

序言

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

我做什么

当我开始准备Protractor的2期末测试时，我尝试通过执行以下步骤来准备Page Object Model中的代码：

1. 打开要在网络浏览器中测试的页面
2. 打开developer tools（F12），
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. 有什么更好的方法来确保我的页面对象模型代码正确？显然，我可以尝试为每种方法/属性编写测试，但是我不想混淆那些将读取测试输出的人员（并从业务角度期望结果）？

Answer 1

1. 在项目中使用开发人员工具或实际HTML是很好的方法。
2. 如果您要编写方法来获取/执行每个页面上的所有内容，则会花费大量时间。我这样做的方法是在编写测​​试时创建方法。