如何在页面对象模型中编写页面代码以便于量角器测试的调试？

Question

前言

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

我做什么

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

1. 在网络浏览器中打开我要测试的页面，
2. 打开developer tools (F12)，
3. 使用inspect工具熟悉DOM 页面，查看我想要用于页面对象模型的元素的 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，但是很多情况下还是很难找到返回undefined的地方...

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

---

问题

你能告诉我吗：

1. 我应该如何为页面对象模型准备代码，以便更容易维护和调试，从而确保我的方法确实返回了一些东西？有没有比在浏览器中使用开发者工具并根据我在 HTML 中看到的编码更好的方法？
2. 有什么更好的方法可以确保我的页面对象模型代码正确无误？显然我可以尝试为每个方法/属性编写测试，但我不想让那些将阅读测试输出（并从业务角度期待结果）的人感到困惑？

Answer 1

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